/*!
 * Travelodge /pp/ refresh
 * Loaded after resources/assets/style.css. Every rule is scoped to body.tl-refresh,
 * so define( 'TL_REFRESH', false ) in wp-config.php returns the site to the original look.
 *
 *  1. Tokens
 *  2. Type
 *  3. Layout and sections
 *  4. Header and menus
 *  5. Buttons, links, tags
 *  6. Hero search card
 *  7. Hotel search (deals page module)
 *  8. Article and event search fields
 *  9. Tabs, filters and inline selects
 * 10. Cards and sliders
 * 11. Feature sections
 * 12. Newsletter and footer
 * 13. Article pages
 * 14. Motion
 */

/* 1. Tokens ---------------------------------------------------------------- */

.tl-refresh {
  --tl-ink: #0e1a2f;
  --tl-navy: #0a2c44;
  --tl-text: #263f52;
  --tl-muted: rgba(10, 44, 68, 0.64);
  --tl-placeholder: rgba(10, 44, 68, 0.45);
  --tl-blue: #008dc8;
  --tl-blue-hover: #007fb4;
  --tl-blue-mid: #26b4e9;
  --tl-tint: #e5f3f9;
  --tl-tint-2: #d4ecf7;
  --tl-light: #eff3fa;
  --tl-track: #eef3f6;
  --tl-line: rgba(14, 26, 47, 0.14);
  --tl-line-strong: rgba(14, 26, 47, 0.24);
  --tl-header: #0c417f;
  --tl-error: #d0342c;
  --tl-orange: #f59a43;
  --tl-radius: 12px;
  --tl-radius-sm: 8px;
  --tl-radius-field: 14px;
  --tl-radius-lg: 20px;
  --tl-shadow: 0 12px 34px rgba(10, 44, 68, 0.14);
  --tl-shadow-pop: 0 18px 48px rgba(10, 44, 68, 0.22);
  --tl-font: FSAlbert, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --tl-section-y: 48px;
  --tl-gutter: 16px;

  font-family: var(--tl-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--tl-text);
}

@media (min-width: 768px) {
  .tl-refresh {
    --tl-gutter: 24px;
    --tl-section-y: 64px;
  }
}

@media (min-width: 1024px) {
  .tl-refresh {
    --tl-section-y: 80px;
  }
}

/* 2. Type ------------------------------------------------------------------ */

.tl-refresh :is(
  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
  button, input, select, textarea,
  .btn, .header, .card__info-list, .checkbox-group, .ucs__option,
  .image-card__caption, .image-card__description, .submenu-card p,
  .subscribe, .card--place, .custom-marker, .vertical-bar
) {
  font-family: var(--tl-font);
}

:where(.tl-refresh) :is(h1, h2, h3, h4, h5, h6),
:where(.tl-refresh) :is(.h1, .h2, .h3, .h4, .h5, .h6) {
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 16px;
}

:where(.tl-refresh) :is(h1, .h1) { font-size: 32px; line-height: 1.15; }
:where(.tl-refresh) :is(h2, .h2) { font-size: 26px; line-height: 1.2; }
:where(.tl-refresh) :is(h3, .h3) { font-size: 22px; line-height: 1.25; }
:where(.tl-refresh) :is(h4, .h4) { font-size: 20px; line-height: 1.3; }
:where(.tl-refresh) :is(h5, .h5) { font-size: 18px; line-height: 1.3; }
:where(.tl-refresh) :is(h6, .h6) { font-size: 16px; line-height: 1.35; }

@media (min-width: 1024px) {
  :where(.tl-refresh) :is(h1, .h1) { font-size: 44px; }
  :where(.tl-refresh) :is(h2, .h2) { font-size: 32px; }
  :where(.tl-refresh) :is(h3, .h3) { font-size: 26px; }
  :where(.tl-refresh) :is(h4, .h4) { font-size: 22px; }
}

.tl-refresh :is(h1, .h1, h2, .h2) {
  letter-spacing: 0;
}

:where(.tl-refresh) :is(p, ul, ol, dl) {
  margin-bottom: 12px;
}

:where(.tl-refresh) :is(p, ul, ol, dl):last-child {
  margin-bottom: 0;
}

.tl-refresh .text-base,
.tl-refresh .text-base-2 { font-size: 16px; font-weight: 700; }
.tl-refresh .text-md,
.tl-refresh .text-md-2 { font-size: 15px; }
.tl-refresh .text-sm,
.tl-refresh .text-sm-2 { font-size: 14px; }
.tl-refresh .text-medium { font-weight: 400; }
.tl-refresh .text-semibold { font-weight: 700; }

.tl-refresh .subtitle,
.tl-refresh .text-category {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.tl-refresh a:focus-visible,
.tl-refresh button:focus-visible {
  outline: 2px solid var(--tl-blue);
  outline-offset: 2px;
}

/* 3. Layout and sections --------------------------------------------------- */

.tl-refresh .container,
.tl-refresh .submenu-drop__wrapper {
  max-width: 1248px;
  padding-left: var(--tl-gutter);
  padding-right: var(--tl-gutter);
}

.tl-refresh .container--full {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.tl-refresh .container--sm { max-width: 810px; }
.tl-refresh .container--md { max-width: 1050px; }

/* Flat full-width bands, like the campaign pages, instead of stacked rounded panels.
   The newsletter panel keeps its original rounded shape over the footer. */
.tl-refresh .section:not(.section--07) {
  margin-top: 0 !important;
  border-radius: 0 !important;
  padding-top: var(--tl-section-y) !important;
  padding-bottom: var(--tl-section-y) !important;
}

/* The band above the newsletter keeps the original rounded bottom, so the blue panel tucks under it. */
.tl-refresh .section:has(+ .section--07),
.tl-refresh .section:has(+ p:empty + .section--07) {
  border-bottom-left-radius: 40px !important;
  border-bottom-right-radius: 40px !important;
}

/* Two bands of the same colour in a row share one gap instead of doubling it. */
.tl-refresh .section:not(.section--sm):is(.bg-white, :not(.section--02, .section--04, .section--06, .section--07, .section--10, .section--light, .bg-blue, .bg-light, .bg-gray))
  + .section:is(.bg-white, :not(.section--02, .section--04, .section--06, .section--07, .section--10, .section--light, .bg-blue, .bg-light, .bg-gray)),
.tl-refresh .section:not(.section--sm):is(.bg-light, :is(.section--02, .section--06, .section--10, .section--light):not(.bg-white, .bg-blue, .bg-gray))
  + .section:is(.bg-light, :is(.section--02, .section--06, .section--10, .section--light):not(.bg-white, .bg-blue, .bg-gray)) {
  padding-top: 0 !important;
}

/* Blocks inside another band (the Text template wraps content in a section): no second gutter and
   no doubled padding at the top and bottom. White bands only, so coloured ones keep their insets. */
.tl-refresh .section .section:is(.bg-white, :not(.section--02, .section--04, .section--06, .section--07, .section--10, .section--light, .bg-blue, .bg-light, .bg-gray)) > .container {
  padding-left: 0;
  padding-right: 0;
}

.tl-refresh .section .section:first-child:is(.bg-white, :not(.section--02, .section--04, .section--06, .section--07, .section--10, .section--light, .bg-blue, .bg-light, .bg-gray)) {
  padding-top: 0 !important;
}

.tl-refresh .section .section:last-child:is(.bg-white, :not(.section--02, .section--04, .section--06, .section--07, .section--10, .section--light, .bg-blue, .bg-light, .bg-gray)) {
  padding-bottom: 0 !important;
}

/* "Title and Content" template: the first white block sits under the page title, not 48-80px below it. */
.tl-refresh .main > .container + .section:is(.bg-white, :not(.section--02, .section--04, .section--06, .section--07, .section--10, .section--light, .bg-blue, .bg-light, .bg-gray)) {
  padding-top: 0 !important;
}

/* With no band above to tuck under, the panel gets rounded top corners instead. */
.tl-refresh :not(.section, p:empty) + .section--07 {
  margin-top: 0;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  padding-top: var(--tl-section-y);
}

.tl-refresh .section.section--sm {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.tl-refresh .section--hero {
  padding-top: 24px !important;
}

.tl-refresh .section--static:not(:first-child):not(.hero + .section--static):not(.top-banner + .section--static) {
  padding-top: 0 !important;
}

.tl-refresh .section__heading {
  gap: 16px;
  margin-bottom: 24px;
}

.tl-refresh .section__heading h2,
.tl-refresh .section__heading .h2 {
  font-size: 26px;
}

@media (min-width: 768px) {
  .tl-refresh .section__heading {
    margin-bottom: 32px;
  }
}

@media (min-width: 1024px) {
  .tl-refresh .section__heading h2,
  .tl-refresh .section__heading .h2 {
    font-size: 30px;
  }
}

.tl-refresh .section__footer {
  margin-top: 40px;
}

/* The custom cursor is switched off in app.js; make sure its element never shows. */
.tl-refresh .custom-cursor {
  display: none !important;
}

/* Generic heroes on inner pages: same scale, no overlapping white tab. */
.tl-refresh .hero {
  min-height: 0;
  padding-top: 64px;
  padding-bottom: 56px;
}

.tl-refresh .hero::after {
  content: none;
}

@media (min-width: 1024px) {
  .tl-refresh .hero {
    padding-top: 96px;
    padding-bottom: 80px;
  }
}

.tl-refresh .hero--base,
.tl-refresh .hero--sm {
  padding-top: 32px;
  padding-bottom: 48px;
}

.tl-refresh .hero--md {
  min-height: 360px;
  padding-top: 72px;
  padding-bottom: 72px;
}

/* Short hero text sits in the middle of the image rather than at the top. */
.tl-refresh .hero--md .hero__content {
  justify-content: center;
}

.tl-refresh .hero--md .hero__content > :last-child {
  margin-bottom: 0;
}

.tl-refresh .hero + .section:not(.section--sm) {
  padding-top: var(--tl-section-y) !important;
}

.tl-refresh .hero:not(.tl-hero) p {
  margin-bottom: 20px;
}

.tl-refresh .top-banner {
  padding-bottom: 48px;
}

/* 4. Header and menus ------------------------------------------------------ */

/* Keeps the theme's white header; just sits it above the hero rather than over it. */
.tl-refresh:not(.with-sticky-header) .header {
  position: relative;
}

.tl-refresh .menubar > li > a {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

.tl-refresh .menubar li.active > a,
.tl-refresh .menubar a:hover {
  color: var(--tl-blue);
}

.tl-refresh .submenu a,
.tl-refresh .submenu-close {
  font-size: 16px;
  font-weight: 700;
  color: var(--tl-navy);
}

.tl-refresh .submenu a:hover {
  color: var(--tl-blue);
}

.tl-refresh .submenu .submenu__all-btn {
  font-size: 16px;
}

.tl-refresh .submenu-card__title {
  font-size: 18px;
  margin-bottom: 14px;
  color: var(--tl-navy);
}

.tl-refresh .submenu-card p {
  font-size: 14px;
  color: var(--tl-text);
}

.tl-refresh .submenu-card__img {
  border-radius: var(--tl-radius);
}

.tl-refresh .overlay {
  background-color: rgba(10, 44, 68, 0.35);
}

@media (min-width: 1024px) {
  .tl-refresh .menubar > li > a {
    font-size: 17px;
    font-weight: 400;
    white-space: nowrap;
  }

  .tl-refresh .menubar > li > a svg {
    width: 16px;
    height: 16px;
  }

  .tl-refresh .submenu-drop {
    box-shadow: 0 18px 32px rgba(10, 44, 68, 0.16);
  }

  .tl-refresh .submenu-drop__wrapper {
    padding-top: 28px;
    padding-bottom: 32px;
  }

  .tl-refresh .submenu-drop:not(.submenu-drop--md) .submenu-drop__wrapper {
    justify-content: flex-start;
    gap: 24px;
  }

  .tl-refresh .submenu-drop:not(.submenu-drop--md) .submenu-card {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 16px;
  }

  .tl-refresh .submenu-drop:not(.submenu-drop--md) .submenu-card__img {
    width: 100%;
    height: 132px;
    min-height: 0;
  }

  .tl-refresh .submenu-card__title {
    margin-bottom: 12px;
    font-size: 18px;
  }

  .tl-refresh .submenu-card .cols-wrapper {
    display: flex !important;
    flex-direction: row !important;
    gap: 24px !important;
    width: 100%;
  }

  .tl-refresh .submenu-card .cols-wrapper > .submenu {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
  }

  .tl-refresh .submenu li {
    margin-bottom: 9px;
  }

  .tl-refresh .submenu a {
    font-weight: 400;
    line-height: 1.3;
  }

  .tl-refresh .submenu .submenu__all-btn {
    font-weight: 700;
  }
}

/* Small laptops: keep the six menu items on one line. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .tl-refresh .header__inner {
    grid-template-columns: 160px 1fr 48px;
    gap: 16px;
  }

  .tl-refresh .header .logo {
    max-width: 160px;
  }

  .tl-refresh .menubar {
    gap: 16px;
  }

  .tl-refresh .menubar > li > a {
    font-size: 15px;
  }
}

/* 5. Buttons, links, tags -------------------------------------------------- */

/* Buttons use the campaign blue, as on the deals pages, rather than near-black. */
.tl-refresh .btn {
  border-color: var(--tl-blue);
  border-radius: var(--tl-radius-sm);
  background-color: var(--tl-blue);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.tl-refresh .btn:hover {
  border-color: var(--tl-navy);
  background-color: var(--tl-navy);
}

.tl-refresh .btn--md {
  padding-left: 26px;
  padding-right: 26px;
  font-size: 16px;
}

.tl-refresh .btn--secondary,
.tl-refresh .btn--active {
  border-color: var(--tl-blue);
  background-color: var(--tl-blue);
}

.tl-refresh .btn--secondary:hover,
.tl-refresh .btn--active:hover {
  border-color: var(--tl-navy);
  background-color: var(--tl-navy);
}

.tl-refresh .btn--outlined {
  border-color: var(--tl-line-strong);
  background-color: #fff;
  color: var(--tl-ink);
}

.tl-refresh .btn--outlined:hover {
  border-color: var(--tl-blue);
  background-color: #fff;
  color: var(--tl-blue);
}

/* Link pills (Website, Call, Directions, Book now): soft tint, not heavy dark buttons. */
.tl-refresh .btn.btn--pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  border: 0;
  border-radius: 100px;
  background-color: var(--tl-tint);
  color: var(--tl-navy);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.tl-refresh .btn.btn--pill svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: currentColor;
}

.tl-refresh a.btn.btn--pill:hover {
  background-color: var(--tl-tint-2);
  color: var(--tl-navy);
}

.tl-refresh span.btn.btn--pill {
  cursor: default;
}

/* Card buttons such as Search deals: one line, outlined, so a row of cards isn't a row of dark blocks. */
.tl-refresh .btn.card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 44px;
  padding: 0 12px;
  overflow: hidden;
  border: 1.5px solid var(--tl-blue);
  background-color: #fff;
  color: var(--tl-blue);
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.tl-refresh .card:hover .btn.card__btn,
.tl-refresh .btn.card__btn:hover {
  border-color: var(--tl-blue);
  background-color: var(--tl-blue);
  color: #fff;
}

.tl-refresh .btn-rounded {
  border-color: var(--tl-line-strong);
}

.tl-refresh .tag:not(.tag--lg) {
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--tl-navy);
}

.tl-refresh .tag--outlined {
  border-color: transparent;
  background-color: var(--tl-tint);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.tl-refresh .tag--outlined-vista { background-color: #a1a5ef; }
.tl-refresh .tag--outlined-yellow { background-color: #eab464; }
.tl-refresh .tag--outlined-blue { background-color: #a3cef1; }
.tl-refresh .tag--outlined-khaki { background-color: #c5afa0; }
.tl-refresh .tag--outlined-verdigris { background-color: #0fbaba; }
.tl-refresh .tag--outlined-citrine { background-color: #bdbf06; }
.tl-refresh .tag--outlined-red { background-color: #ed6a5a; }
.tl-refresh .tag--outlined-emarald { background-color: #7ebe8c; }
.tl-refresh .tag--outlined-sandy { background-color: #f59a43; }
.tl-refresh .tag--outlined-uranian { background-color: #a3cef1; }
.tl-refresh .tag--outlined-blue-light { background-color: #7395d4; }
.tl-refresh .tag--outlined-pink { background-color: #d6778b; }

.tl-refresh .tag--outlined-primary {
  background-color: var(--tl-ink);
  color: #fff;
}

/* Dark tags keep white text; the base tag colour above would otherwise win. */
.tl-refresh .tag.tag--primary,
.tl-refresh .tag.tag--outlined-primary {
  color: #fff;
}

/* Filter labels come from the CMS in any case ("all", "christmas"): start them with a capital. */
.tl-refresh .checkbox-tag .tag::first-letter {
  text-transform: uppercase;
}

.tl-refresh .tag sup {
  top: -0.3em;
  font-size: 10px;
}

/* A bigger tap area for the clear (x) button in search fields, with the icon where it was. */
.tl-refresh .form-control__clear-btn {
  right: 4px;
  width: 36px;
  height: 36px;
}

/* Tags whose category has no colour set get one from the same palette, by position. */
.tl-refresh .tag-list li:nth-child(6n+1) .tag--outlined:not([class*="tag--outlined-"]) { background-color: #a3cef1; }
.tl-refresh .tag-list li:nth-child(6n+2) .tag--outlined:not([class*="tag--outlined-"]) { background-color: #7ebe8c; }
.tl-refresh .tag-list li:nth-child(6n+3) .tag--outlined:not([class*="tag--outlined-"]) { background-color: #f59a43; }
.tl-refresh .tag-list li:nth-child(6n+4) .tag--outlined:not([class*="tag--outlined-"]) { background-color: #d6778b; }
.tl-refresh .tag-list li:nth-child(6n+5) .tag--outlined:not([class*="tag--outlined-"]) { background-color: #0fbaba; }
.tl-refresh .tag-list li:nth-child(6n+6) .tag--outlined:not([class*="tag--outlined-"]) { background-color: #c5afa0; }

.tl-refresh a.tag--outlined:hover {
  border-color: transparent;
  color: var(--tl-navy);
}

@media (hover: hover) and (pointer: fine) {
  .tl-refresh a.tag--outlined:hover {
    filter: brightness(0.94);
    transform: translateY(-1px);
  }
}

.tl-refresh a.tag--outlined-primary:hover {
  color: #fff;
}

/* Keep each tag's own colour on hover instead of the theme's swap. */
.tl-refresh .tag--outlined-vista:hover { background-color: #a1a5ef; }
.tl-refresh .tag--outlined-yellow:hover { background-color: #eab464; }
.tl-refresh .tag--outlined-blue:hover { background-color: #a3cef1; }
.tl-refresh .tag--outlined-khaki:hover { background-color: #c5afa0; }
.tl-refresh .tag--outlined-verdigris:hover { background-color: #0fbaba; }
.tl-refresh .tag--outlined-citrine:hover { background-color: #bdbf06; }
.tl-refresh .tag--outlined-red:hover { background-color: #ed6a5a; }
.tl-refresh .tag--outlined-emarald:hover { background-color: #7ebe8c; }
.tl-refresh .tag--outlined-sandy:hover { background-color: #f59a43; }
.tl-refresh .tag--outlined-uranian:hover { background-color: #a3cef1; }
.tl-refresh .tag--outlined-blue-light:hover { background-color: #7395d4; }
.tl-refresh .tag--outlined-pink:hover { background-color: #d6778b; }
.tl-refresh .tag--outlined-primary:hover { background-color: var(--tl-ink); }

.tl-refresh .tag-list {
  gap: 6px;
}

.tl-refresh .info-list {
  gap: 6px;
  font-size: 14px;
  font-weight: 400;
  color: var(--tl-text);
}

.tl-refresh .info-list__icon {
  width: 22px;
  height: 22px;
  border-radius: 0;
  background-color: transparent;
}

/* Long date ranges and addresses wrap instead of running off the edge on phones. */
.tl-refresh .info-list__item {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
}

.tl-refresh .info-list__icon img {
  filter: brightness(0) saturate(100%) invert(19%) sepia(29%) saturate(1500%) hue-rotate(176deg) brightness(92%);
}

.tl-refresh .scroll-link {
  display: none;
}

/* 6. Hero search card ------------------------------------------------------ */

.tl-refresh .tl-hero {
  z-index: 30;
  display: block;
  min-height: 0;
  padding: 32px 0 28px;
  overflow: visible;
  text-align: left;
  color: #fff;
  background-color: var(--tl-header);
}

.tl-refresh .tl-hero.section--ready:has(> .in-viewport) {
  animation: none;
}

.tl-refresh .tl-hero::before {
  background-image: none;
}

.tl-refresh .tl-hero .hero__slider {
  overflow: hidden;
}

.tl-refresh .tl-hero .hero__slider::before {
  background-image: linear-gradient(180deg, rgba(10, 44, 68, 0.62) 0%, rgba(10, 44, 68, 0.28) 46%, rgba(10, 44, 68, 0.5) 100%);
}

.tl-refresh .tl-hero .slick-dots {
  display: none !important;
}

.tl-refresh .tl-hero__content {
  display: block;
  pointer-events: auto;
}

.tl-refresh .tl-hero__title {
  max-width: 760px;
  margin: 0 0 8px;
  color: #fff;
  font-size: 30px;
  line-height: 1.12;
  text-shadow: 0 1px 16px rgba(10, 44, 68, 0.35);
}

.tl-refresh .tl-hero__text {
  max-width: 640px;
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 16px;
  line-height: 1.45;
  text-shadow: 0 1px 10px rgba(10, 44, 68, 0.35);
}

/* Keep the squiggles in the corners now the hero is shorter. */
@media (max-width: 767px) {
  .tl-refresh .tl-hero .animation-path--top-right {
    width: 52%;
    height: auto;
  }
}

/* Phones with the slim search: heading at the top, search at the bottom, picture in between. */
@media (max-width: 767px) {
  .tl-refresh .tl-hero:has(.tl-search.is-compact) .tl-hero__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: min(400px, 56vh);
    text-align: left;
  }

  .tl-refresh .tl-hero:has(.tl-search.is-compact) .tl-search-slot {
    margin-top: auto;
  }
}

body.tl-search-docked .tl-hero {
  z-index: 95;
}

@media (min-width: 1024px) {
  .tl-refresh .tl-hero {
    padding: 112px 0 88px;
  }

  .tl-refresh .tl-hero__title {
    font-size: 48px;
    margin-bottom: 10px;
  }

  .tl-refresh .tl-hero__text {
    font-size: 19px;
    margin-bottom: 28px;
  }
}

.tl-refresh .tl-search {
  position: relative;
  z-index: 5;
  padding: 14px;
  border-radius: var(--tl-radius-lg);
  background-color: #fff;
  box-shadow: var(--tl-shadow-pop);
  color: var(--tl-navy);
  text-align: left;
}

.tl-refresh .tl-search *,
.tl-refresh .tl-search *::before,
.tl-refresh .tl-search *::after {
  box-sizing: border-box;
}

.tl-refresh .tl-search__head {
  display: flex;
  margin-bottom: 14px;
}

.tl-refresh .tl-search [data-tabs].tl-search__tabs {
  display: flex;
  width: 100%;
  gap: 4px;
  margin: 0;
  padding: 4px;
  border: 0;
  border-radius: 100px;
  background-color: var(--tl-track);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}

.tl-refresh .tl-search__tabs li {
  flex: 1 1 auto;
  margin: 0;
}

.tl-refresh .tl-search [data-tabs].tl-search__tabs a {
  display: block;
  padding: 10px 8px;
  border-radius: 100px;
  background-color: transparent;
  color: var(--tl-navy);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.tl-refresh .tl-search [data-tabs].tl-search__tabs a:hover {
  background-color: rgba(0, 141, 200, 0.1);
  color: var(--tl-navy);
}

.tl-refresh .tl-search [data-tabs].tl-search__tabs a[aria-selected=true] {
  background-color: var(--tl-blue);
  color: #fff;
}

.tl-refresh .tl-search__panel[hidden] {
  display: none !important;
}

.tl-refresh .tl-search__note {
  margin: 12px 0 0;
  color: var(--tl-muted);
  font-size: 14px;
}

@media (min-width: 560px) {
  .tl-refresh .tl-search [data-tabs].tl-search__tabs {
    display: inline-flex;
    width: auto;
  }

  .tl-refresh .tl-search__tabs li {
    flex: 0 0 auto;
  }

  .tl-refresh .tl-search [data-tabs].tl-search__tabs a {
    padding: 9px 20px;
    font-size: 14px;
  }
}

@media (min-width: 900px) {
  .tl-refresh .tl-search {
    padding: 20px 24px 22px;
  }

  .tl-refresh .tl-search__head {
    margin-bottom: 16px;
  }
}

/* Docked bar: the active search stays to hand once the hero scrolls away (desktop). */
.tl-refresh .tl-search.is-docked {
  position: fixed;
  z-index: 95;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px max(var(--tl-gutter), calc((100vw - 1200px) / 2));
  border-radius: 0;
  border-bottom: 1px solid var(--tl-line);
  box-shadow: 0 10px 24px rgba(10, 44, 68, 0.14);
  animation: tl-dock-in 0.25s ease-out;
}

.tl-refresh .tl-search.is-docked .tl-search__panel:not(#tab-hotel) {
  display: none !important;
}

.tl-refresh .tl-search.is-docked #tab-hotel[hidden] {
  display: block !important;
}

.tl-refresh.admin-bar .tl-search.is-docked {
  top: 32px;
}

.tl-refresh .tl-search.is-docked .tl-search__head,
.tl-refresh .tl-search.is-docked .tl-search__note,
.tl-refresh .tl-search.is-docked .tl-hs__map-link {
  display: none;
}

.tl-refresh .tl-search.is-docked .tl-hs__field-inner,
.tl-refresh .tl-search.is-docked .tl-field__input {
  min-height: 54px;
}

.tl-refresh .tl-search.is-docked .tl-field__input {
  height: 54px;
  padding-top: 25px;
}

.tl-refresh .tl-search.is-docked .tl-field__label {
  top: 8px;
}

.tl-refresh .tl-search.is-docked .tl-hs__submit,
.tl-refresh .tl-search.is-docked .tl-search__submit {
  min-height: 54px;
}

.tl-refresh .tl-search.is-docked .tl-hs__dropdown {
  max-height: calc(100vh - 110px);
}

html:has(body.tl-search-docked) {
  scroll-padding-top: 96px;
}

html:has(.tl-mbar.is-visible) {
  scroll-padding-top: 76px;
}

@keyframes tl-dock-in {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* 7. Hotel search (ported from the deals page) ----------------------------- */

.tl-refresh .tl-hs {
  margin: 0;
  color: var(--tl-navy);
}

.tl-refresh .tl-hs__bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tl-refresh .tl-hs__field {
  position: relative;
  width: 100%;
  min-width: 0;
  border: 1.5px solid var(--tl-line);
  border-radius: var(--tl-radius-field);
  background-color: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.tl-refresh .tl-hs__field:hover {
  border-color: rgba(0, 141, 200, 0.5);
}

.tl-refresh .tl-hs__field:focus-within,
.tl-refresh .tl-hs__field.is-open {
  border-color: var(--tl-blue);
  background-color: var(--tl-tint);
}

.tl-refresh .tl-hs__field.is-disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.tl-refresh .tl-hs__field.is-disabled .tl-hs__field-inner {
  opacity: 0.6;
}

.tl-refresh .tl-hs__field.is-invalid {
  border-color: var(--tl-error);
}

.tl-refresh .tl-hs__field-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 100%;
  min-height: 62px;
  margin: 0;
  padding: 10px 16px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: inherit;
}

.tl-refresh .tl-hs__field-inner:focus {
  outline: none;
}

.tl-refresh .tl-hs__field:not(.is-open):has(.tl-hs__field-inner:focus-visible),
.tl-refresh .tl-hs__field:not(.is-open):has(.tl-hs__input:focus-visible) {
  outline: 2px solid var(--tl-blue);
  outline-offset: 2px;
}

.tl-refresh .tl-hs__label {
  display: block;
  margin: 0;
  color: var(--tl-navy);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  cursor: inherit;
}

.tl-refresh .tl-hs__value,
.tl-refresh .tl-hs .tl-hs__input {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--tl-navy);
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}

.tl-refresh .tl-hs__value.is-placeholder {
  color: var(--tl-placeholder);
}

.tl-refresh .tl-hs .tl-hs__input::placeholder {
  color: var(--tl-placeholder);
  opacity: 1;
}

.tl-refresh .tl-hs .tl-hs__input::-webkit-search-decoration,
.tl-refresh .tl-hs .tl-hs__input::-webkit-search-cancel-button,
.tl-refresh .tl-hs .tl-hs__input::-webkit-search-results-button,
.tl-refresh .tl-hs .tl-hs__input::-webkit-search-results-decoration {
  display: none;
  -webkit-appearance: none;
}

.tl-refresh .tl-hs__submit,
.tl-refresh .tl-search__submit {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  margin: 0;
  padding: 0 26px;
  border: 0;
  border-radius: var(--tl-radius-field);
  background-color: var(--tl-blue);
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.15s ease;
}

.tl-refresh .tl-hs__submit:hover,
.tl-refresh .tl-search__submit:hover {
  background-color: var(--tl-navy);
  color: #fff;
}

.tl-refresh .tl-hs__submit:active,
.tl-refresh .tl-search__submit:active {
  transform: scale(0.98);
}

.tl-refresh .tl-hs__submit:focus-visible,
.tl-refresh .tl-search__submit:focus-visible {
  outline: 3px solid var(--tl-blue-mid);
  outline-offset: 2px;
}

.tl-refresh .tl-hs__errors {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tl-refresh .tl-hs__errors:has(.tl-hs__error:not([hidden])) {
  margin-top: 10px;
}

.tl-refresh .tl-hs__error {
  margin: 0;
  color: var(--tl-error);
  font-size: 14px;
  font-weight: 700;
}

.tl-refresh .tl-hs__error[hidden] {
  display: none;
}

.tl-refresh .tl-hs__error::before {
  content: "\2715\00a0";
}

.tl-refresh .tl-hs__map-link {
  margin: 12px 0 0;
  color: var(--tl-muted);
  font-size: 14px;
  text-align: left;
}

.tl-refresh .tl-hs__map-link a {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--tl-blue);
  font-weight: 700;
  text-decoration: underline;
}

.tl-refresh .tl-hs__map-link a:hover {
  color: var(--tl-navy);
}

/* Dropdown panels */

.tl-refresh .tl-hs__dropdown {
  position: absolute;
  z-index: 60;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 70vh;
  margin-top: 8px;
  padding: 16px;
  overflow-y: auto;
  border: 1px solid var(--tl-line);
  border-radius: 18px;
  background-color: #fff;
  box-shadow: var(--tl-shadow-pop);
  color: var(--tl-navy);
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

.tl-refresh .tl-hs__dropdown[hidden] {
  display: none;
}

.tl-refresh .tl-hs__dropdown p {
  margin: 0;
}

.tl-refresh .tl-hs__cols {
  display: block;
}

.tl-refresh .tl-hs__group {
  min-width: 0;
}

.tl-refresh .tl-hs .tl-hs__group-title {
  margin: 6px 0;
  color: var(--tl-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tl-refresh .tl-hs__suggestions {
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}

.tl-refresh .tl-hs__suggestions li {
  margin: 0;
}

.tl-refresh .tl-hs__suggestion {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--tl-navy);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.tl-refresh .tl-hs__suggestion:hover,
.tl-refresh .tl-hs__suggestion:focus {
  background-color: var(--tl-tint);
}

.tl-refresh .tl-hs__suggestion:focus-visible {
  outline: 2px solid var(--tl-blue);
  outline-offset: -2px;
}

.tl-refresh .tl-hs__suggestion-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background-color: var(--tl-tint);
  color: var(--tl-blue);
}

.tl-refresh .tl-hs .tl-hs__no-results {
  padding: 8px 10px;
  color: var(--tl-muted);
  font-size: 14px;
}

.tl-refresh .tl-hs__tabs-wrap {
  display: flex;
  justify-content: center;
}

.tl-refresh .tl-hs__tabs {
  display: flex;
  width: 100%;
  gap: 4px;
  margin: 0 auto 16px;
  padding: 4px;
  border-radius: 100px;
  background-color: var(--tl-track);
}

.tl-refresh .tl-hs__tab {
  flex: 1 1 auto;
  padding: 8px 12px;
  border: 0;
  border-radius: 100px;
  background: transparent;
  color: var(--tl-navy);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.tl-refresh .tl-hs__tab[aria-selected=true] {
  background-color: var(--tl-blue);
  color: #fff;
}

.tl-refresh .tl-hs__tab-full { display: none; }
.tl-refresh .tl-hs__tab-short { display: inline; }

@media (min-width: 560px) {
  .tl-refresh .tl-hs__tab-full { display: inline; }
  .tl-refresh .tl-hs__tab-short { display: none; }
}

.tl-refresh .tl-hs__quick {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}

.tl-refresh .tl-hs__chip {
  padding: 7px 16px;
  border: 1.5px solid var(--tl-line);
  border-radius: 100px;
  background-color: #fff;
  color: var(--tl-navy);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.tl-refresh .tl-hs__chip:hover {
  border-color: var(--tl-blue);
}

.tl-refresh .tl-hs__chip.is-active {
  border-color: var(--tl-blue);
  background-color: var(--tl-blue);
  color: #fff;
}

.tl-refresh .tl-hs .tl-hs__date-hint {
  margin: 0 0 12px;
  color: var(--tl-muted);
  font-size: 13px;
  text-align: center;
}

.tl-refresh .tl-hs__cal-wrap {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.tl-refresh .tl-hs__cal {
  flex: 1;
  max-width: 320px;
}

.tl-refresh .tl-hs__cal--second {
  display: none;
}

.tl-refresh .tl-hs__cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.tl-refresh .tl-hs__cal-title {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.tl-refresh .tl-hs__cal-nav {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1.5px solid var(--tl-line);
  border-radius: 50%;
  background-color: #fff;
  color: var(--tl-navy);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.tl-refresh .tl-hs__cal-nav--spacer {
  visibility: hidden;
}

.tl-refresh .tl-hs__cal-nav:hover:not(:disabled) {
  border-color: var(--tl-blue);
}

.tl-refresh .tl-hs__cal-nav:disabled {
  opacity: 0.3;
  cursor: default;
}

.tl-refresh .tl-hs__cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.tl-refresh .tl-hs__cal-dow {
  padding: 4px 0;
  color: var(--tl-muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.tl-refresh .tl-hs__day {
  min-height: 36px;
  aspect-ratio: 1;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--tl-navy);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tl-refresh .tl-hs__day:hover:not(:disabled) {
  border-color: var(--tl-blue);
}

.tl-refresh .tl-hs__day:focus-visible {
  outline: 2px solid var(--tl-blue);
  outline-offset: -1px;
}

.tl-refresh .tl-hs__day:disabled {
  color: rgba(10, 44, 68, 0.25);
  text-decoration: line-through;
  text-decoration-color: rgba(10, 44, 68, 0.15);
  cursor: default;
}

.tl-refresh .tl-hs__day.is-today {
  font-weight: 700;
}

.tl-refresh .tl-hs__day.is-in-range {
  border-radius: 0;
  background-color: var(--tl-tint);
}

.tl-refresh .tl-hs__day.is-checkin,
.tl-refresh .tl-hs__day.is-checkout {
  border-radius: 50%;
  background-color: var(--tl-blue);
  color: #fff;
  font-weight: 700;
}

.tl-refresh .tl-hs .tl-hs__flex-q {
  margin: 4px 0 14px;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}

.tl-refresh .tl-hs__months {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.tl-refresh .tl-hs__month-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 8px;
  border: 1.5px solid var(--tl-line);
  border-radius: var(--tl-radius-field);
  background-color: #fff;
  color: var(--tl-navy);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.tl-refresh .tl-hs__month-card:hover {
  border-color: var(--tl-blue);
}

.tl-refresh .tl-hs__month-card.is-active {
  border-color: var(--tl-blue);
  background-color: var(--tl-tint);
}

.tl-refresh .tl-hs__month-name {
  font-size: 15px;
  font-weight: 700;
}

.tl-refresh .tl-hs__month-year {
  color: var(--tl-muted);
  font-size: 13px;
}

.tl-refresh .tl-hs .tl-hs__flex-note {
  margin: 16px 0 0;
  color: var(--tl-muted);
  font-size: 13px;
  text-align: center;
}

.tl-refresh .tl-hs__rooms {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tl-refresh .tl-hs__room {
  padding: 14px;
  border: 1.5px solid var(--tl-line);
  border-radius: var(--tl-radius-field);
}

.tl-refresh .tl-hs__room-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.tl-refresh .tl-hs .tl-hs__room-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.tl-refresh .tl-hs__room-remove {
  padding: 4px 6px;
  border: 0;
  background: transparent;
  color: var(--tl-blue);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.tl-refresh .tl-hs__room-remove:hover {
  color: var(--tl-navy);
}

.tl-refresh .tl-hs__stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
}

.tl-refresh .tl-hs__stepper-label {
  display: flex;
  flex-direction: column;
}

.tl-refresh .tl-hs__stepper-label strong {
  font-size: 15px;
  font-weight: 700;
}

.tl-refresh .tl-hs__stepper-label span {
  color: var(--tl-muted);
  font-size: 12px;
}

.tl-refresh .tl-hs__stepper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tl-refresh .tl-hs__step-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1.5px solid var(--tl-line);
  border-radius: 50%;
  background-color: #fff;
  color: var(--tl-navy);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.tl-refresh .tl-hs__step-btn:hover:not(:disabled) {
  border-color: var(--tl-blue);
}

.tl-refresh .tl-hs__step-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.tl-refresh .tl-hs__step-count {
  min-width: 20px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.tl-refresh .tl-hs__accessible {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  color: var(--tl-navy);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}

.tl-refresh .tl-hs__accessible input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--tl-blue);
  cursor: pointer;
  -webkit-appearance: auto;
  appearance: auto;
}

.tl-refresh .tl-hs__add-room {
  width: 100%;
  margin-top: 14px;
  padding: 11px;
  border: 1.5px dashed var(--tl-blue);
  border-radius: var(--tl-radius);
  background: transparent;
  color: var(--tl-blue);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.tl-refresh .tl-hs__add-room:hover {
  background-color: var(--tl-tint);
}

.tl-refresh .tl-hs__group-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--tl-radius);
  background-color: rgba(245, 154, 67, 0.16);
  color: #051724;
  font-size: 14px;
  line-height: 1.45;
}

.tl-refresh .tl-hs__group-note svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--tl-orange);
}

.tl-refresh .tl-hs__group-note[hidden] {
  display: none;
}

.tl-refresh .tl-hs__group-note a {
  color: var(--tl-blue);
  font-weight: 700;
  text-decoration: underline;
}

.tl-refresh .tl-hs__rooms-done {
  width: 100%;
  margin-top: 10px;
  padding: 13px;
  border: 0;
  border-radius: var(--tl-radius);
  background-color: var(--tl-blue);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.tl-refresh .tl-hs__rooms-done:hover {
  background-color: var(--tl-navy);
}

.tl-refresh .tl-hs :is(.tl-hs__step-btn, .tl-hs__cal-nav, .tl-hs__chip, .tl-hs__month-card, .tl-hs__tab, .tl-hs__add-room, .tl-hs__rooms-done, .tl-hs__room-remove):focus-visible {
  outline: 2px solid var(--tl-blue);
  outline-offset: 2px;
}

@media (max-width: 899px) {
  /* Panels open in the flow on small screens, so nothing is covered or cut off. */
  .tl-refresh .tl-hs__dropdown {
    position: static;
    width: 100%;
    max-height: none;
    margin-top: 6px;
    border-radius: var(--tl-radius-field);
    box-shadow: 0 8px 20px rgba(10, 44, 68, 0.1);
  }

  .tl-refresh .tl-hs__dropdown--dest {
    max-height: 60vh;
  }

  .tl-refresh .tl-hs__field.is-open {
    background-color: #fff;
  }

  .tl-refresh .tl-hs__field.is-open > .tl-hs__field-inner {
    border-radius: var(--tl-radius-field) var(--tl-radius-field) 0 0;
    background-color: var(--tl-tint);
  }

  .tl-refresh .tl-hs__field.is-open > .tl-hs__dropdown {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--tl-line);
    border-radius: 0 0 var(--tl-radius-field) var(--tl-radius-field);
    box-shadow: none;
  }

  .tl-refresh .tl-hs__submit {
    width: 100%;
  }
}

@media (min-width: 900px) {
  .tl-refresh .tl-hs__bar {
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
  }

  .tl-refresh .tl-hs__field {
    flex: 1 1 0;
  }

  .tl-refresh .tl-hs__field--dest {
    flex: 1.4 1 0;
  }

  .tl-refresh .tl-hs__submit {
    min-height: 0;
  }

  .tl-refresh .tl-hs__dropdown {
    width: 380px;
  }

  .tl-refresh .tl-hs__dropdown--dest {
    width: min(760px, calc(100vw - 48px));
  }

  .tl-refresh .tl-hs__dropdown--dest .tl-hs__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 8px 16px;
  }

  .tl-refresh .tl-hs__dropdown--dest .tl-hs__group:nth-child(n+3) {
    grid-column: 1 / -1;
  }

  .tl-refresh .tl-hs__dropdown--dest .tl-hs__group-title {
    margin-top: 0;
  }

  .tl-refresh .tl-hs__dropdown--dates {
    left: 50%;
    width: 720px;
    transform: translateX(-50%);
  }

  .tl-refresh .tl-hs__dropdown--guests {
    left: auto;
    right: 0;
    width: 400px;
  }

  .tl-refresh .tl-hs__tabs {
    display: inline-flex;
    width: auto;
  }

  .tl-refresh .tl-hs__tab {
    padding: 8px 20px;
    font-size: 14px;
  }

  .tl-refresh .tl-hs__cal--second {
    display: block;
  }

  .tl-refresh .tl-hs__cal-nav--next-m1 {
    visibility: hidden;
  }

  .tl-refresh .tl-hs__months {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 7b. Article booking search: the hotel search in one column at every width ---- */

.tl-refresh .tl-hs--stacked .tl-hs__bar {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.tl-refresh .tl-hs--stacked .tl-hs__field,
.tl-refresh .tl-hs--stacked .tl-hs__field--dest {
  flex: none;
}

.tl-refresh .tl-hs--stacked .tl-hs__field-inner {
  min-height: 56px;
}

.tl-refresh .tl-hs--stacked .tl-hs__dropdown,
.tl-refresh .tl-hs--stacked .tl-hs__dropdown--dest,
.tl-refresh .tl-hs--stacked .tl-hs__dropdown--dates,
.tl-refresh .tl-hs--stacked .tl-hs__dropdown--guests {
  position: static;
  left: auto;
  right: auto;
  width: 100%;
  max-height: none;
  margin: 0;
  transform: none;
}

.tl-refresh .tl-hs--stacked .tl-hs__dropdown--dest {
  max-height: 60vh;
}

.tl-refresh .tl-hs--stacked .tl-hs__dropdown--dest .tl-hs__cols {
  display: block;
}

.tl-refresh .tl-hs--stacked .tl-hs__field.is-open {
  background-color: #fff;
}

.tl-refresh .tl-hs--stacked .tl-hs__field.is-open > .tl-hs__field-inner {
  border-radius: var(--tl-radius-field) var(--tl-radius-field) 0 0;
  background-color: var(--tl-tint);
}

.tl-refresh .tl-hs--stacked .tl-hs__field.is-open > .tl-hs__dropdown {
  border: 0;
  border-top: 1px solid var(--tl-line);
  border-radius: 0 0 var(--tl-radius-field) var(--tl-radius-field);
  box-shadow: none;
}

.tl-refresh .tl-hs--stacked .tl-hs__tabs {
  display: flex;
  width: 100%;
}

.tl-refresh .tl-hs--stacked .tl-hs__tab {
  padding: 8px 10px;
  font-size: 13px;
}

.tl-refresh .tl-hs--stacked .tl-hs__tab-full {
  display: none;
}

.tl-refresh .tl-hs--stacked .tl-hs__tab-short {
  display: inline;
}

/* Narrow sidebars: the calendar shrinks to fit rather than widening the column. */
.tl-refresh .tl-hs--stacked,
.tl-refresh .tl-hs--stacked .tl-hs__dropdown,
.tl-refresh .tl-hs--stacked .tl-hs__cal-wrap,
.tl-refresh .tl-hs--stacked .tl-hs__cal {
  min-width: 0;
  max-width: 100%;
}

.tl-refresh .tl-hs--stacked .tl-hs__cal-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.tl-refresh .tl-hs--stacked .tl-hs__day {
  min-width: 0;
  min-height: 0;
  height: 34px;
  aspect-ratio: auto;
}

.tl-refresh .tl-hs--stacked .tl-hs__cal--second {
  display: none;
}

.tl-refresh .tl-hs--stacked .tl-hs__cal-nav--next-m1 {
  visibility: visible;
}

.tl-refresh .tl-hs--stacked .tl-hs__months {
  grid-template-columns: repeat(2, 1fr);
}

.tl-refresh .tl-hs--stacked .tl-hs__submit {
  width: 100%;
  min-height: 52px;
}

.tl-refresh .tl-bk .vertical-bar__title {
  margin-bottom: 8px;
}

.tl-refresh .tl-bk > p {
  margin-bottom: 20px;
}

/* Labels sit inside the white fields, so they stay navy even on the blue background. */
.tl-refresh .tl-bk .tl-hs label.tl-hs__label,
.tl-refresh .tl-bk .tl-hs .tl-hs__label {
  color: var(--tl-navy);
}

/* Blue background: white heading and copy, and errors that can be read on blue. */
.tl-refresh .tl-bk.bg-blue,
.tl-refresh .tl-bk.bg-blue > :is(.vertical-bar__title, p) {
  color: #fff;
}

/* The theme turns every label on the blue card white; inside the search panels they need to stay dark. */
.tl-refresh .tl-bk.bg-blue .tl-hs {
  color: var(--tl-navy);
}

.tl-refresh .tl-bk.bg-blue .tl-hs label {
  color: var(--tl-navy);
}

.tl-refresh .tl-bk.bg-blue .tl-hs__error {
  padding: 8px 12px;
  border-radius: var(--tl-radius-sm);
  background-color: #fff;
}

.tl-refresh .tl-bk.bg-blue .tl-hs__errors {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tl-refresh .tl-bk.bg-blue .tl-hs__submit {
  background-color: #fff;
  color: var(--tl-navy);
}

.tl-refresh .tl-bk.bg-blue .tl-hs__submit:hover {
  background-color: var(--tl-tint);
  color: var(--tl-navy);
}

/* 8. Article and event search fields --------------------------------------- */

.tl-refresh .tl-search__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.tl-refresh .tl-search__form .form-control {
  position: relative;
  min-width: 0;
  max-width: none;
  margin: 0;
  flex: 1 1 auto;
}

.tl-refresh .tl-search__form .form-control__group {
  position: relative;
  margin: 0;
}

.tl-refresh .tl-search__form .form-control__img {
  display: none;
}

.tl-refresh .tl-field__label {
  position: absolute;
  z-index: 2;
  top: 11px;
  left: 17.5px;
  margin: 0;
  color: var(--tl-navy);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.tl-refresh .tl-search__form .tl-field__input {
  display: block;
  width: 100%;
  height: 65px;
  margin: 0;
  padding: 29px 16px 10px;
  border: 1.5px solid var(--tl-line);
  border-radius: var(--tl-radius-field);
  background-color: #fff;
  box-shadow: none;
  color: var(--tl-navy);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.3;
  text-overflow: ellipsis;
  transition: border-color 0.25s ease, background-color 0.25s ease;
  -webkit-appearance: none;
  appearance: none;
}

.tl-refresh .tl-search__form .tl-field__input::placeholder {
  color: var(--tl-placeholder);
  opacity: 1;
}

.tl-refresh .tl-search__form .tl-field__input:hover {
  border-color: rgba(0, 141, 200, 0.5);
}

.tl-refresh .tl-search__form .tl-field__input:focus,
.tl-refresh .tl-search__form .form-control__group.active .tl-field__input {
  border-color: var(--tl-blue);
  outline: 0;
  background-color: var(--tl-tint);
}

.tl-refresh .tl-search__form .tl-field__input:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 1px var(--tl-blue);
}

.tl-refresh .tl-search__form .tl-field__input.datepicker-range {
  cursor: pointer;
}

.tl-refresh .tl-search__form .form-control--error .tl-field__input {
  border-color: var(--tl-error);
}

.tl-refresh .tl-search__form .form-control--error .tl-field__label {
  color: var(--tl-error);
}

.tl-refresh .tl-search__submit {
  width: 100%;
}

@media (min-width: 900px) {
  .tl-refresh .tl-search__form {
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
  }

  .tl-refresh .tl-search__form .tl-field--grow {
    flex: 1 1 0;
  }

  .tl-refresh .tl-search__form .tl-field--dates {
    flex: 0 0 300px;
  }

  .tl-refresh .tl-search__submit {
    width: auto;
    min-height: 0;
  }
}

/* Event date popup, restyled to match the hotel calendar. */
.tl-refresh .tl-search .datepicker-popup {
  top: calc(100% + 8px);
  border: 1px solid var(--tl-line);
  border-radius: 18px;
  box-shadow: var(--tl-shadow-pop);
  color: var(--tl-navy);
}

@media (max-width: 899px) {
  .tl-refresh .tl-search .datepicker-popup {
    position: static;
    min-width: 0;
    max-width: none;
    width: 100%;
    margin-top: 6px;
    overflow-x: auto;
    box-shadow: 0 8px 20px rgba(10, 44, 68, 0.1);
  }

  /* One month at a time on phones; the arrows still step through the range. */
  .tl-refresh .tl-search .datepicker-popup .flatpickr-calendar,
  .tl-refresh .tl-search .datepicker-popup .flatpickr-days,
  .tl-refresh .tl-search .datepicker-popup .dayContainer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .tl-refresh .tl-search .datepicker-popup .flatpickr-month ~ .flatpickr-month,
  .tl-refresh .tl-search .datepicker-popup .flatpickr-weekdaycontainer ~ .flatpickr-weekdaycontainer,
  .tl-refresh .tl-search .datepicker-popup .dayContainer ~ .dayContainer {
    display: none !important;
  }

  .tl-refresh .tl-search .datepicker-popup .flatpickr-day {
    max-width: none;
    height: 42px;
    line-height: 40px;
    flex-basis: 14.2857%;
  }

  .tl-refresh .tl-search .datepicker-popup .flatpickr-calendar::before {
    content: none !important;
  }

  .tl-refresh .tl-search .datepicker-popup .flatpickr-month:first-of-type {
    padding-right: 0;
  }
}

@media (min-width: 900px) {
  .tl-refresh .tl-search .datepicker-popup {
    left: auto;
    right: 0;
    transform: none;
  }
}

.tl-refresh .datepicker-popup .flatpickr-months,
.tl-refresh .datepicker-popup .flatpickr-weekdays,
.tl-refresh .datepicker-popup .flatpickr-day {
  font-family: var(--tl-font);
}

.tl-refresh .datepicker-popup .flatpickr-day.selected,
.tl-refresh .datepicker-popup .flatpickr-day.startRange,
.tl-refresh .datepicker-popup .flatpickr-day.endRange {
  border-color: var(--tl-blue);
  background-color: var(--tl-blue);
  color: #fff;
}

.tl-refresh .datepicker-popup .flatpickr-day.inRange {
  border-color: var(--tl-tint);
  background-color: var(--tl-tint);
  box-shadow: -5px 0 0 var(--tl-tint), 5px 0 0 var(--tl-tint);
}

.tl-refresh .datepicker-popup__footer {
  border-top: 1px solid var(--tl-line);
}

.tl-refresh .datepicker-popup__footer input {
  border-radius: var(--tl-radius-sm);
}

/* jQuery UI autocomplete menus (article, event and header search). */
.tl-refresh .ui-menu {
  padding: 8px;
  border: 1px solid var(--tl-line);
  border-radius: 16px;
  background-color: #fff;
  box-shadow: var(--tl-shadow-pop);
  color: var(--tl-navy);
  font-family: var(--tl-font);
  font-size: 15px;
}

.tl-refresh .ui-menu li {
  margin-bottom: 2px;
}

.tl-refresh .ui-menu .link {
  padding: 9px 10px;
  border-radius: 10px;
  color: var(--tl-navy);
}

.tl-refresh .ui-menu .link:hover,
.tl-refresh .ui-menu .ui-state-active .link,
.tl-refresh .ui-menu .link.ui-state-active {
  background-color: var(--tl-tint);
  color: var(--tl-navy);
}

.tl-refresh .ui-menu .link__text {
  font-size: 13px;
  color: var(--tl-muted);
}

.tl-refresh .ui-autocomplete-term {
  color: var(--tl-blue);
}

/* 9. Tabs, filters and inline selects -------------------------------------- */

.tl-refresh [data-tabs]:not(.tl-search__tabs) {
  gap: 4px;
  padding: 4px;
  border: 0;
  border-radius: 100px;
  background-color: var(--tl-track);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}

.tl-refresh [data-tabs]:not(.tl-search__tabs) a {
  padding: 9px 18px;
  border-radius: 100px;
  background-color: transparent;
  color: var(--tl-navy);
  white-space: nowrap;
}

.tl-refresh [data-tabs]:not(.tl-search__tabs) a:hover {
  background-color: rgba(0, 141, 200, 0.1);
  color: var(--tl-navy);
}

.tl-refresh [data-tabs]:not(.tl-search__tabs) a[aria-selected=true] {
  background-color: var(--tl-blue);
  color: #fff;
}

.tl-refresh [data-tabs].tabs-square,
.tl-refresh [data-tabs].tabs-square a {
  border-radius: 100px;
}

@media (max-width: 559px) {
  .tl-refresh [data-tabs]:not(.tl-search__tabs) {
    width: 100%;
  }

  .tl-refresh [data-tabs]:not(.tl-search__tabs) li {
    flex: 1 1 auto;
  }

  .tl-refresh [data-tabs]:not(.tl-search__tabs) a {
    padding: 9px 8px;
    font-size: 13px;
    text-align: center;
  }
}

.tl-refresh .grid--03 {
  gap: 12px;
  margin-bottom: 24px;
}

/* Inline select: replaces the native full-screen picker on phones. */
.tl-refresh .tl-select {
  position: relative;
  width: 100%;
}

.tl-refresh .tl-select__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.tl-refresh .tl-select__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 10px 14px;
  border: 1.5px solid var(--tl-line);
  border-radius: var(--tl-radius);
  background-color: #fff;
  color: var(--tl-navy);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.tl-refresh .tl-select__btn:hover {
  border-color: rgba(0, 141, 200, 0.5);
}

.tl-refresh .tl-select.is-open .tl-select__btn {
  border-color: var(--tl-blue);
  background-color: var(--tl-tint);
}

.tl-refresh .tl-select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tl-refresh .tl-select__chevron {
  display: flex;
  flex-shrink: 0;
  color: var(--tl-navy);
  transition: transform 0.2s ease;
}

.tl-refresh .tl-select.is-open .tl-select__chevron {
  transform: rotate(180deg);
}

.tl-refresh .tl-select--icon .tl-select__btn {
  padding-left: 42px;
}

.tl-refresh .tl-select__list {
  position: fixed;
  z-index: 9999;
  max-width: calc(100vw - 16px);
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--tl-line);
  border-radius: 14px;
  background-color: #fff;
  box-shadow: var(--tl-shadow-pop);
  color: var(--tl-navy);
  font-family: var(--tl-font);
  font-size: 15px;
  line-height: 1.3;
  outline: 0;
  overscroll-behavior: contain;
}

.tl-refresh .tl-select__list[hidden] {
  display: none;
}

.tl-refresh .tl-select__option {
  margin: 0;
  padding: 9px 12px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
}

.tl-refresh .tl-select__option.is-active {
  background-color: var(--tl-tint);
}

.tl-refresh .tl-select__option.is-selected {
  color: var(--tl-blue);
  font-weight: 700;
}

.tl-refresh .tl-select__option.is-selected::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 11px;
  margin-left: 10px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

.tl-refresh .tl-select__option[aria-disabled=true] {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (min-width: 768px) {
  .tl-refresh .section__heading .tl-select,
  .tl-refresh .grid--03 .tl-select {
    min-width: 240px;
  }
}

/* The UK region picker (custom select plugin) */
.tl-refresh .ucs {
  text-transform: none;
}

.tl-refresh .ucs__btn {
  padding: 10px 36px 10px 14px;
  border: 1.5px solid var(--tl-line);
  border-radius: var(--tl-radius);
  font-size: 15px;
}

.tl-refresh .ucs__btn:hover {
  border-color: var(--tl-blue);
  background-color: #fff;
  color: var(--tl-navy);
}

.tl-refresh .ucs__btn:hover::after {
  content: url('data:image/svg+xml,<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 8L10 13L15 8" stroke="%23292929" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.tl-refresh .ucs--has-value .ucs__btn {
  border-color: var(--tl-blue);
  background-color: var(--tl-blue);
}

.tl-refresh .ucs__value {
  text-transform: none;
}

.tl-refresh .ucs__list {
  padding: 6px;
  border-color: var(--tl-line);
  border-radius: 14px;
  box-shadow: var(--tl-shadow-pop);
}

.tl-refresh .ucs__option {
  padding: 9px 12px;
  font-size: 15px;
}

.tl-refresh .ucs__option.is-active {
  background-color: var(--tl-tint);
  color: var(--tl-navy);
}

/* Destination / region radio pills: same segmented control as the tabs. */
.tl-refresh .checkbox-group {
  gap: 4px;
  padding: 4px;
  border: 0;
  border-radius: 100px;
  background-color: var(--tl-track);
  text-transform: none;
}

.tl-refresh .checkbox-group label,
.tl-refresh .checkbox-group .label {
  padding: 9px 16px;
  border-radius: 100px;
  color: var(--tl-navy);
  font-size: 14px;
  letter-spacing: 0;
}

.tl-refresh .checkbox-group label:hover,
.tl-refresh .checkbox-group .label:hover {
  background-color: rgba(0, 141, 200, 0.1);
  color: var(--tl-navy);
}

.tl-refresh .checkbox-group label:has(+ :checked),
.tl-refresh .checkbox-group .label:has(+ :checked) {
  background-color: var(--tl-blue);
  color: #fff;
}

.tl-refresh .checkbox-group .ucs__btn {
  padding-top: 9px;
  padding-bottom: 9px;
  border: 0;
  border-radius: 100px;
  background-color: transparent;
  font-size: 14px;
}

.tl-refresh .checkbox-group .ucs--has-value .ucs__btn {
  background-color: var(--tl-blue);
  color: #fff;
}

/* Phones: four quick-date pills fit across a 360px screen instead of scrolling out of view. */
@media (max-width: 767px) {
  .tl-refresh .checkbox-group label,
  .tl-refresh .checkbox-group .label {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 13px;
  }

  .tl-refresh .checkbox-group .ucs__btn {
    font-size: 13px;
  }
}

/* Generic form fields outside the hero */
.tl-refresh .form-control > label:not(.visually-hidden):not(.tl-field__label) {
  margin-bottom: 6px;
  color: var(--tl-navy);
  font-size: 13px;
  font-weight: 700;
}

.tl-refresh .form-control input[type=text],
.tl-refresh .form-control input[type=email],
.tl-refresh .form-control input[type=search] {
  border-radius: var(--tl-radius);
}

/* 10. Cards and sliders ---------------------------------------------------- */

.tl-refresh .card__title {
  margin-bottom: 8px;
  color: var(--tl-navy);
  font-weight: 700;
}

.tl-refresh h4.card__title {
  font-size: 20px;
}

.tl-refresh h5.card__title {
  font-size: 18px;
}

.tl-refresh .card__body p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--tl-text);
}

.tl-refresh .card__img {
  border-radius: var(--tl-radius-sm);
}

.tl-refresh .card--base {
  padding: 8px;
  border: 1px solid var(--tl-line);
  border-radius: var(--tl-radius);
  background-color: #fff;
  transition: border-color 0.25s ease;
}


.tl-refresh .card--base .card__body {
  padding: 14px 10px 10px;
}

.tl-refresh .card--row {
  padding: 8px;
  border: 1px solid var(--tl-line);
  border-radius: var(--tl-radius);
  background-color: #fff;
}

.tl-refresh .card--row {
  transition: border-color 0.25s ease;
}

/* Hover only where a mouse is used; on phones a tapped card would otherwise stay highlighted. */
.tl-refresh .card--base:hover,
.tl-refresh .card--row:hover,
.tl-refresh .card--row:active {
  border-color: var(--tl-line);
  background-color: #fff;
  box-shadow: none;
}

.tl-refresh .card:hover .card__img img {
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .tl-refresh .card--base:hover,
  .tl-refresh .card--row:hover {
    border-color: var(--tl-line-strong);
  }

  .tl-refresh .card:hover .card__title {
    color: var(--tl-blue);
  }

  .tl-refresh .card--full:hover .card__title {
    color: #fff;
  }

  .tl-refresh .card:hover .card__img img {
    transform: scale(1.05);
  }
}

.tl-refresh .card--row .card__img {
  border-radius: var(--tl-radius-sm);
}

.tl-refresh .card--row .card__title {
  font-size: 17px;
  line-height: 1.3;
}

/* List variants (article results, search results, trending, related) stay borderless as designed:
   their lists already draw a rule between items. */
.tl-refresh :is(.card--row-xs, .card--row-sm, .card--row-lg),
.tl-refresh :is(.card--row-xs, .card--row-sm, .card--row-lg):is(:hover, :active) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
}

/* Trending and related links on phones: thumbnail and title side by side, not a stack of big images. */
@media (max-width: 767px) {
  .tl-refresh .card--row-xs {
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }

  .tl-refresh .card--row-xs .card__img {
    flex: 0 0 104px;
    width: 104px;
    height: 78px;
    padding-top: 0;
  }

  .tl-refresh .card--row-xs .card__body {
    min-width: 0;
  }

  .tl-refresh .card--row-xs .card__title {
    margin: 0;
    font-size: 16px;
  }
}

.tl-refresh .card--full {
  border-radius: var(--tl-radius);
}

.tl-refresh .card--full .card__title {
  color: #fff;
}

.tl-refresh .card--column .card__img {
  border-radius: var(--tl-radius);
}

.tl-refresh .card--column .card__body {
  padding-top: 12px;
}

.tl-refresh .slick-slider .btn-rounded,
.tl-refresh .slider-controls .btn-rounded {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(43, 46, 53, 0.32);
  background-color: #fff;
  color: var(--tl-ink);
}

@media (hover: hover) and (pointer: fine) {
  .tl-refresh .slick-slider .btn-rounded:hover,
  .tl-refresh .slider-controls .btn-rounded:hover {
    border-color: var(--tl-ink);
    background-color: var(--tl-light);
    color: var(--tl-ink);
  }
}

.tl-refresh .slick-slider .btn-rounded.slick-disabled {
  opacity: 0.4;
}

/* Arrows laid over hero images: the theme spaces them for smaller buttons, so size and space them as a pair. */
.tl-refresh .image-slider .slick-slider .btn-rounded,
.tl-refresh .slick-slider.image-slider .btn-rounded {
  width: 40px;
  height: 40px;
}

.tl-refresh .image-slider .slick-arrow.slick-next {
  right: 16px;
}

.tl-refresh .image-slider .slick-arrow.slick-prev {
  right: 64px;
}

.tl-refresh .image-slider.slick-initialized:has(.slick-arrow) .image-slider__caption {
  padding-right: 120px;
}

/* Room for the arrows and counter that sit under the slider. */
.tl-refresh .slick-slider--02.slick-initialized {
  margin-bottom: 76px;
}

/* Counters belong to live sliders only; grids that unslick on desktop keep theirs hidden. */
.tl-refresh :not(.slick-initialized) > .slick-counter {
  display: none;
}

.tl-refresh .slick-counter {
  color: var(--tl-muted);
  font-size: 14px;
}

.tl-refresh .slick-counter .current {
  color: var(--tl-navy);
  font-weight: 700;
}

/* 11. Feature sections ----------------------------------------------------- */

.tl-refresh .section--06,
.tl-refresh .section--10,
.tl-refresh .section--light {
  background-color: var(--tl-light);
}

/* "Looking for inspiration": a fixed collage instead of the scripted scatter. The original
   hides every card on phones and collapses categories that have no image into a sliver of tag. */
.tl-refresh .section--02 .container {
  min-height: 0 !important;
  display: block;
}

.tl-refresh .section--02 .section__heading {
  max-width: 560px;
  margin: 0 auto 28px;
  gap: 20px;
  text-align: center;
  align-items: center;
  opacity: 1 !important;
  transform: none !important;
}

.tl-refresh .section--02 .grid--02,
.tl-refresh .section--animate-cards .grid--02 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 14px;
  width: 100%;
}

.tl-refresh .section--02 .card--sm {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 1 !important;
  display: block;
  width: auto;
  max-width: none !important;
  margin: 0;
  padding: 0 !important;
  overflow: visible;
  opacity: 1 !important;
  transform: none !important;
}

.tl-refresh .section--02 .card--sm .card__img {
  padding-top: 75% !important;
  border-radius: 14px;
}

.tl-refresh .section--02 .card--sm .card__body {
  position: absolute;
  z-index: 2;
  left: 10px;
  bottom: -13px;
  margin: 0 !important;
  transition: none;
}

.tl-refresh .section--02 .card--sm .card__tag,
.tl-refresh .section--02 .tag {
  opacity: 1 !important;
  transform: none !important;
  white-space: nowrap;
}

/* Category without an image: a tile in its own colour with a brand squiggle. */
.tl-refresh .section--02 .card--sm:not(:has(.card__img))::before {
  content: "";
  display: block;
  padding-top: 75%;
  border-radius: 14px;
  background: #a3cef1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Cpath d='M-20 118C30 52 72 150 116 86S182 8 228 46' fill='none' stroke='%23fff' stroke-opacity='.45' stroke-width='16' stroke-linecap='round'/%3E%3C/svg%3E") center / cover no-repeat;
}

.tl-refresh .section--02 .card--sm:not(:has(.card__img)):has(.tag--vista)::before { background-color: #a1a5ef; }
.tl-refresh .section--02 .card--sm:not(:has(.card__img)):has(.tag--yellow)::before { background-color: #eab464; }
.tl-refresh .section--02 .card--sm:not(:has(.card__img)):has(.tag--khaki)::before { background-color: #c5afa0; }
.tl-refresh .section--02 .card--sm:not(:has(.card__img)):has(.tag--verdigris)::before { background-color: #0fbaba; }
.tl-refresh .section--02 .card--sm:not(:has(.card__img)):has(.tag--citrine)::before { background-color: #bdbf06; }
.tl-refresh .section--02 .card--sm:not(:has(.card__img)):has(.tag--red)::before { background-color: #ed6a5a; }
.tl-refresh .section--02 .card--sm:not(:has(.card__img)):has(.tag--emarald)::before { background-color: #7ebe8c; }
.tl-refresh .section--02 .card--sm:not(:has(.card__img)):has(.tag--sandy)::before { background-color: #f59a43; }
.tl-refresh .section--02 .card--sm:not(:has(.card__img)):has(.tag--pink)::before { background-color: #d6778b; }
.tl-refresh .section--02 .card--sm:not(:has(.card__img)):has(.tag--blue-light)::before { background-color: #7395d4; }

.tl-refresh .section--02 .card--sm:not(:has(.card__img)) .tag {
  box-shadow: 0 0 0 2px #fff;
}

.tl-refresh .section.bg-blue .btn,
.tl-refresh .section--02.bg-blue .btn {
  border-color: #fff;
  background-color: #fff;
  color: var(--tl-navy);
}

@media (hover: hover) and (pointer: fine) {
  .tl-refresh .section.bg-blue .btn:hover {
    border-color: var(--tl-blue);
    background-color: var(--tl-blue);
    color: #fff;
  }

  .tl-refresh .section--02 .card--sm {
    transition: transform 0.25s ease !important;
  }

  .tl-refresh .section--02 .card--sm:hover {
    transform: translateY(-4px) !important;
  }
}

@media (min-width: 768px) {
  .tl-refresh .section--02 .grid--02,
  .tl-refresh .section--animate-cards .grid--02 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 18px;
  }
}

/* Desktop: the cards float round the heading in fixed spots that never overlap it. */
@media (min-width: 1024px) {
  .tl-refresh .section--02 .container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(580px, 46vw, 680px);
  }

  .tl-refresh .section--02 .section__heading {
    position: relative;
    z-index: 5;
    max-width: 440px;
    margin: 0;
  }

  .tl-refresh .section--02 .grid--02,
  .tl-refresh .section--animate-cards .grid--02 {
    position: absolute;
    top: 0;
    right: var(--tl-gutter);
    bottom: 0;
    left: var(--tl-gutter);
    display: block !important;
    width: auto;
  }

  .tl-refresh .section--02 .card--sm {
    position: absolute !important;
  }

  .tl-refresh .section--02 .card--sm-01 { left: 1% !important; top: 4% !important; width: clamp(160px, 17vw, 220px); }
  .tl-refresh .section--02 .card--sm-02 { left: 30% !important; top: 0 !important; width: clamp(130px, 13vw, 170px); }
  .tl-refresh .section--02 .card--sm-03 { left: 59% !important; top: 5% !important; width: clamp(150px, 15vw, 200px); }
  .tl-refresh .section--02 .card--sm-04 { right: 0 !important; top: 16% !important; width: clamp(160px, 17vw, 230px); }
  .tl-refresh .section--02 .card--sm-05 { right: 5% !important; top: 60% !important; width: clamp(140px, 14vw, 180px); }
  .tl-refresh .section--02 .card--sm-06 { left: 56% !important; bottom: 0 !important; width: clamp(160px, 17vw, 220px); }
  .tl-refresh .section--02 .card--sm-07 { left: 22% !important; bottom: 3% !important; width: clamp(140px, 14vw, 180px); }
  .tl-refresh .section--02 .card--sm-08 { left: 0 !important; top: 53% !important; width: clamp(150px, 15vw, 200px); }

  .tl-refresh .section--02 .card--sm-02 .card__img,
  .tl-refresh .section--02 .card--sm-05 .card__img,
  .tl-refresh .section--02 .card--sm-07 .card__img,
  .tl-refresh .section--02 .card--sm-02:not(:has(.card__img))::before,
  .tl-refresh .section--02 .card--sm-05:not(:has(.card__img))::before,
  .tl-refresh .section--02 .card--sm-07:not(:has(.card__img))::before {
    padding-top: 100% !important;
  }

  /* Tags sit on a different corner of each card. */
  .tl-refresh .section--02 .card--sm-01 .card__body,
  .tl-refresh .section--02 .card--sm-07 .card__body { left: auto; right: -14px; bottom: -13px; }
  .tl-refresh .section--02 .card--sm-02 .card__body,
  .tl-refresh .section--02 .card--sm-06 .card__body { left: -14px; top: -13px; bottom: auto; }
  .tl-refresh .section--02 .card--sm-04 .card__body,
  .tl-refresh .section--02 .card--sm-08 .card__body { left: auto; right: -14px; top: -13px; bottom: auto; }
  .tl-refresh .section--02 .card--sm-03 .card__body,
  .tl-refresh .section--02 .card--sm-05 .card__body { left: -14px; bottom: -13px; }
}

.tl-refresh .section.bg-blue .section__heading :is(h2, h3, h4, p),
.tl-refresh .section--04 .section__heading :is(h2, h3, h4) {
  color: #fff;
}

.tl-refresh .section--04 .section__heading {
  margin-bottom: 24px;
}

.tl-refresh .section--04 .btn,
.tl-refresh .section--07 .btn:not(.newsletter-form .btn) {
  border-color: #fff;
  background-color: #fff;
  color: var(--tl-navy);
}

.tl-refresh .section--04 .btn:hover,
.tl-refresh .section--07 .btn:not(.newsletter-form .btn):hover {
  border-color: var(--tl-blue);
  background-color: var(--tl-blue);
  color: #fff;
}

.tl-refresh .line-box .line a {
  font-size: 34px;
  line-height: 1.2;
  font-weight: 700;
}

@media (min-width: 1024px) {
  .tl-refresh .line-box .line a {
    font-size: 48px;
  }
}

.tl-refresh .line-box .line img {
  width: 28px;
  height: 28px;
}

/* 12. Newsletter and footer ------------------------------------------------ */

/* The newsletter panel tucks 40px under the section above, as in the original; this keeps
   the same breathing room above the heading as every other section. */
.tl-refresh .section--07 {
  padding-top: calc(40px + var(--tl-section-y));
}

.tl-refresh .section--07 h2 {
  margin-bottom: 8px;
  font-size: 28px;
}

.tl-refresh .section--07 .text-medium {
  font-size: 17px;
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .tl-refresh .section--07 h2 {
    margin-bottom: 10px;
    font-size: 36px;
  }

  .tl-refresh .section--07 .text-medium {
    font-size: 18px;
  }
}

.tl-refresh .newsletter-form {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  padding: 6px;
  border-radius: var(--tl-radius-field);
  background-color: #fff;
}

.tl-refresh .newsletter-form input {
  height: 48px;
  border: 0;
  color: var(--tl-navy);
  font-size: 16px;
}

.tl-refresh .newsletter-form .btn {
  border-color: var(--tl-blue);
  border-radius: 10px;
  background-color: var(--tl-blue);
}

.tl-refresh .newsletter-form .btn:hover {
  border-color: var(--tl-navy);
  background-color: var(--tl-navy);
}

.tl-refresh .section--07 .text-sm-3 {
  margin-top: 14px;
  font-size: 13px;
}

/* The theme's own navy footer, untouched apart from keeping its original typeface. */
.tl-refresh .footer {
  font-family: Arial, "DM Sans", sans-serif;
}

/* Bigger tap areas on the footer links for touch, without moving anything. */
@media (max-width: 1023px) {
  .tl-refresh .footer__nav-list a {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .tl-refresh .footer__nav-list a.link-icon {
    margin-top: -6px;
    margin-bottom: -6px;
  }
}

/* 13. Article pages -------------------------------------------------------- */

.tl-refresh .tl-backbar {
  padding: 14px 0;
  border-bottom: 1px solid var(--tl-line);
  background-color: #fff;
}

.tl-refresh .tl-backbar + .section:not(.section--sm),
.tl-refresh .tl-backbar + .section--static:not(:first-child):not(.hero + .section--static):not(.top-banner + .section--static) {
  padding-top: 40px !important;
}

.tl-refresh .breadcrumbs {
  font-size: 14px;
  font-weight: 400;
}

.tl-refresh .breadcrumbs a {
  font-weight: 700;
  text-decoration: none;
}

.tl-refresh .breadcrumbs a:hover {
  text-decoration: underline;
}

/* One line at every width. The current page repeats the heading below it, so it gives way first and ends in an ellipsis. */
.tl-refresh .breadcrumbs {
  max-width: 100%;
}

.tl-refresh .hero__content > .breadcrumbs {
  align-self: stretch;
}

.tl-refresh .breadcrumbs__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  min-width: 0;
}

.tl-refresh .hero__content > .breadcrumbs .breadcrumbs__list {
  justify-content: center;
  justify-content: safe center;
}

.tl-refresh .breadcrumbs__list > li {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  min-width: 0;
  white-space: nowrap;
}

.tl-refresh .breadcrumbs__list > li:last-child {
  flex-shrink: 1;
}

.tl-refresh .breadcrumbs__list > li > :is(a, span) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tl-refresh .breadcrumbs__list > li:first-child > a {
  overflow: visible;
}

.tl-refresh .breadcrumbs__list > li::after {
  flex: 0 0 auto;
  margin: 0 7px;
}

.tl-refresh .rich-content,
.tl-refresh .section__article-col {
  font-size: 17px;
  line-height: 1.6;
}

.tl-refresh .section__article-col {
  margin-bottom: 48px;
}

.tl-refresh .rich-content :is(h2, h3, h4),
.tl-refresh .section__article-col :is(h2, h3, h4) {
  margin-top: 0;
}

/* Stray empty paragraphs from the editor add gaps for nothing. */
.tl-refresh main > p:empty,
.tl-refresh .rich-content p:empty {
  display: none;
}

/* Quotes: a soft panel with an opening mark, in place of the theme's side rule. */
.tl-refresh main :is(blockquote, .wp-block-quote, .wp-block-pullquote) {
  position: relative;
  margin: 24px 0;
  padding: 20px 20px 20px 56px;
  border: 0;
  border-radius: var(--tl-radius);
  background-color: var(--tl-light);
  color: var(--tl-navy);
  font-size: 18px;
  line-height: 1.5;
}

.tl-refresh main :is(blockquote, .wp-block-quote, .wp-block-pullquote)::before {
  content: "\201C";
  position: absolute;
  top: 12px;
  left: 18px;
  color: var(--tl-blue);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 52px;
  line-height: 1;
}

.tl-refresh main .wp-block-pullquote blockquote {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
}

.tl-refresh main .wp-block-pullquote blockquote::before {
  content: none;
}

.tl-refresh main :is(blockquote, .wp-block-pullquote) :is(p:last-of-type) {
  margin-bottom: 0;
}

.tl-refresh main :is(blockquote cite, .wp-block-pullquote figcaption) {
  display: block;
  margin-top: 10px;
  color: var(--tl-muted);
  font-size: 14px;
  font-style: normal;
}

/* Map-numbered cards: the badge follows the card's rounded corner. */
.tl-refresh .card__number {
  border-top-left-radius: calc(var(--tl-radius) - 1px);
}

/* No accent strips on the booking search and newsletter cards. */
.tl-refresh :is(.vertical-bar__line, .subscribe__line) {
  display: none;
}

/* Search results pagination: proper tap targets and a visible current page. */
.tl-refresh .pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 32px;
}

.tl-refresh .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: var(--tl-radius-sm);
  color: var(--tl-navy);
  font-weight: 700;
  text-decoration: none;
}

.tl-refresh a.page-numbers:hover {
  background-color: var(--tl-light);
}

.tl-refresh .page-numbers.current {
  background-color: var(--tl-ink);
  color: #fff;
}

/* Previous and next: white text on a blue button, not navy on black. */
.tl-refresh :is(.navigation, .navigation-comments) .page-numbers:is(.prev, .next),
.tl-refresh .navigation-single :is(.prev, .next) {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  max-width: none;
  padding: 0 16px;
  border-radius: var(--tl-radius-sm);
  background-color: var(--tl-blue);
  color: #fff;
  opacity: 1;
  transition: background-color 0.2s ease;
}

.tl-refresh .navigation-single :is(.prev, .next) a {
  min-height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-weight: 700;
}

.tl-refresh :is(.navigation, .navigation-comments) .page-numbers:is(.prev, .next):hover,
.tl-refresh .navigation-single :is(.prev, .next):hover {
  background-color: var(--tl-navy);
  color: #fff;
  opacity: 1;
}

.tl-refresh :is(.navigation, .navigation-comments) .page-numbers:is(.prev, .next):focus-visible,
.tl-refresh .navigation-single :is(.prev, .next) a:focus-visible {
  outline: 2px solid var(--tl-blue);
  outline-offset: 2px;
}

/* Phones: page numbers on one row, previous and next underneath, so nothing wraps on its own. */
@media (max-width: 767px) {
  .tl-refresh .pagination .nav-links::after {
    content: "";
    order: 1;
    flex-basis: 100%;
    height: 0;
  }

  .tl-refresh .pagination .nav-links .page-numbers:is(.prev, .next) {
    order: 2;
  }
}

/* Contact forms: one arrow on selects, not the theme's triangle as well. */
.tl-refresh .select-area .wpcf7-form-control-wrap::after {
  content: none;
}

.tl-refresh .wpcf7-select {
  border-color: var(--tl-line-strong);
  border-radius: var(--tl-radius);
}

/* Event filters, desktop: the quick-date pills get the room they need and line up with the fields. */
@media (min-width: 1024px) {
  .tl-refresh .form--filters .form-control--md-3 {
    flex: 0 0 auto;
  }

  .tl-refresh .form--filters .form-control--md-2 {
    min-width: 150px;
  }

  .tl-refresh .form--filters .checkbox-group {
    min-height: 48px;
  }
}

@media (max-width: 767px) {
  /* Event filters, phones: one month at a time, as in the hero, with Cancel and Apply on screen. */
  .tl-refresh .form--filters .datepicker-popup {
    width: 100%;
    min-width: 0;
    max-width: none;
    overflow-x: visible;
  }

  .tl-refresh .form--filters .datepicker-popup :is(.flatpickr-calendar, .flatpickr-days, .dayContainer),
  .tl-refresh .form--filters .datepicker-popup__footer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .tl-refresh .form--filters .datepicker-popup :is(.flatpickr-month ~ .flatpickr-month, .flatpickr-weekdaycontainer ~ .flatpickr-weekdaycontainer, .dayContainer ~ .dayContainer) {
    display: none !important;
  }

  .tl-refresh .form--filters .datepicker-popup .flatpickr-calendar::before {
    content: none !important;
  }

  .tl-refresh .form--filters .datepicker-popup .flatpickr-month:first-of-type {
    padding-right: 0;
  }

  .tl-refresh .form--filters .datepicker-popup .flatpickr-day {
    max-width: none;
    height: 42px;
    line-height: 40px;
    flex-basis: 14.2857%;
  }

  .tl-refresh .form--filters .datepicker-popup__footer {
    flex-wrap: wrap;
  }

  .tl-refresh .form--filters :is(.datepicker-popup__dates, .datepicker-popup__actions) {
    flex: 1 1 100%;
    min-width: 0;
  }

  .tl-refresh .form--filters .datepicker-popup__dates input {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  .tl-refresh .form--filters .datepicker-popup__actions .btn {
    flex: 1 1 0;
    justify-content: center;
  }

  /* Banner copy runs the full width on phones, so shade the whole image, not just one side. */
  .tl-refresh .banner::before {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.8) 100%);
    opacity: 1;
  }
}

/* 15. Homepage blocks on phones and tablets -------------------------------- */

/* Featured articles: one lead story and a compact list per page, sized to its own content. */
@media (max-width: 767px) {
  .tl-refresh .slick-slider--01 .slick-track {
    align-items: flex-start;
  }

  .tl-refresh .slick-slider--01 .slick-list {
    transition: height 0.3s ease;
  }

  .tl-refresh .slick-slider--01 .grid--01 {
    gap: 12px;
  }

  .tl-refresh .slick-slider--01 .card--full {
    min-height: 232px;
  }

  .tl-refresh .slick-slider--01 .card--full .card__body {
    padding: 18px;
  }

  .tl-refresh .slick-slider--01 .card--full .tag-list li:nth-child(n+3) {
    display: none;
  }

  .tl-refresh .slick-slider--01 .grid--column {
    gap: 10px;
  }

  .tl-refresh .slick-slider--01 .card--row {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 8px;
  }

  .tl-refresh .slick-slider--01 .card--row .card__img {
    flex: 0 0 104px;
    width: 104px;
    max-width: none;
    height: 84px;
  }

  .tl-refresh .slick-slider--01 .card--row .card__body {
    min-width: 0;
    padding: 2px 4px 2px 0;
  }

  .tl-refresh .slick-slider--01 .card--row .tag-list li:nth-child(n+2) {
    display: none;
  }

  .tl-refresh .slick-slider--01 .card--row .tag-list:first-child {
    margin-bottom: 6px;
  }

  .tl-refresh .slick-slider--01 .card--row .card__title {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
  }
}

/* Featured articles on tablets: the lead story keeps some height when it spans the width. */
@media (min-width: 768px) and (max-width: 1023px) {
  .tl-refresh .slick-slider--01 .card--full {
    min-height: 320px;
  }
}

/* What's on: tabs and location filter run the full width until there is room for both. */
@media (max-width: 1023px) {
  .tl-refresh .grid--03 {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    gap: 12px;
  }

  .tl-refresh .grid--03 > [data-tabs] {
    display: flex;
    width: 100%;
  }

  .tl-refresh .grid--03 > [data-tabs] li {
    flex: 1 1 0;
  }

  .tl-refresh .grid--03 > [data-tabs] a {
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
  }

  .tl-refresh .grid--03 form,
  .tl-refresh .grid--03 .form-control {
    width: 100%;
    max-width: none;
  }
}

/* Discover attractions: filters stack full width; cards scroll sideways instead of a long column. */
@media (max-width: 1023px) {
  .tl-refresh .section--05 .section__heading {
    align-items: stretch;
  }

  .tl-refresh .form--filters-small {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }

  .tl-refresh .form--filters-small .form-control {
    width: 100%;
    max-width: none;
  }

  .tl-refresh .form--filters-small .form-control > label:not(.visually-hidden) {
    display: block;
    text-align: left;
  }

  .tl-refresh .form--filters-small .form-control--search input {
    width: 100%;
  }

  .tl-refresh .form--filters-small .checkbox-group {
    width: 100%;
  }

  .tl-refresh .form--filters-small .checkbox-group__item {
    flex: 1 1 auto;
  }

  .tl-refresh .section--05 .grid--04 {
    display: flex !important;
    gap: 14px;
    margin: 0 calc(var(--tl-gutter) * -1) 24px;
    padding: 2px var(--tl-gutter) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--tl-gutter);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .tl-refresh .section--05 .grid--04::-webkit-scrollbar {
    display: none;
  }

  .tl-refresh .section--05 .grid--04 > .card {
    flex: 0 0 68%;
    min-width: 0;
    scroll-snap-align: start;
  }

  .tl-refresh .section--05 .card--column .card__img {
    margin-bottom: 12px;
    padding-top: 112%;
  }

  .tl-refresh .section--05 .card--column .card__title {
    font-size: 17px;
  }
}

@media (min-width: 560px) and (max-width: 1023px) {
  .tl-refresh .section--05 .grid--04 > .card {
    flex-basis: 40%;
  }
}

/* Stay nearby (page and in-article), Related and Trending articles: a sideways row on phones
   instead of a 2,000px stack. */
@media (max-width: 767px) {
  .tl-refresh :is(.grid--05, .grid--09, .grid--11) {
    contain: inline-size;
    display: flex !important;
    gap: 14px;
    margin: 0 calc(var(--tl-gutter) * -1);
    padding: 2px var(--tl-gutter) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--tl-gutter);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .tl-refresh :is(.grid--05, .grid--09, .grid--11)::-webkit-scrollbar {
    display: none;
  }

  .tl-refresh :is(.grid--05, .grid--09, .grid--11) > * {
    flex: 0 0 78%;
    min-width: 0;
    scroll-snap-align: start;
  }

  .tl-refresh .grid--05 .card--column .card__img {
    margin-bottom: 12px;
    padding-top: 71.43%;
  }

  .tl-refresh .grid--05 .card--column .card__title {
    font-size: 17px;
  }
}

/* What's on: the event card follows the filters by the same gap as everywhere else. */
.tl-refresh .section--03 .tab-panel-simple {
  padding-top: 0;
}

@media (max-width: 767px) {
  /* Maps were 215% of their width tall, more than a whole phone screen to scroll past. */
  .tl-refresh .map {
    padding-top: min(100%, 60vh);
  }

  /* The floating sign-up badge covered a third of the screen width. */
  .tl-refresh .sign-up--01 {
    width: 84px;
    height: 84px;
    right: 12px;
    bottom: 12px;
  }

  .tl-refresh .sign-up--01 .sign-up__text {
    width: 76px;
  }

  /* An odd last transport tile spans the row instead of sitting next to a gap. */
  .tl-refresh .grid--10 > .grid__col:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* The original block's docked search is replaced by the bar in section 16; never show both. */
  .tl-refresh .fixed-header {
    display: none;
  }
}

/* Event cards: a little less padding on small screens. */
@media (max-width: 767px) {
  .tl-refresh .card--base .card__body {
    padding: 12px 8px 8px;
  }
}

/* 16. Search bar that follows you on phones -------------------------------- */

.tl-refresh .tl-mbar {
  position: fixed;
  z-index: 96;
  top: 0;
  right: 0;
  left: 0;
  padding: 8px var(--tl-gutter);
  background-color: #fff;
  box-shadow: 0 6px 18px rgba(10, 44, 68, 0.12);
  visibility: hidden;
  transform: translateY(-110%);
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

.tl-refresh .tl-mbar.is-visible {
  visibility: visible;
  transform: none;
  transition: transform 0.25s ease, visibility 0s;
}

.tl-refresh.admin-bar .tl-mbar {
  top: 46px;
}

@media (max-width: 600px) {
  .tl-refresh.admin-bar .tl-mbar {
    top: 0;
  }
}

@media (min-width: 1024px) {
  .tl-refresh .tl-mbar {
    display: none;
  }
}

.tl-refresh .tl-mbar__btn,
.tl-refresh .tl-search__compact {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 5px 5px 5px 14px;
  border: 1.5px solid var(--tl-line);
  border-radius: 100px;
  background-color: #fff;
  color: var(--tl-navy);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tl-refresh .tl-mbar__btn > svg,
.tl-refresh .tl-search__compact > svg {
  flex: none;
  color: var(--tl-navy);
}

.tl-refresh .tl-mbar__text,
.tl-refresh .tl-search__compact__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.tl-refresh .tl-mbar__where,
.tl-refresh .tl-mbar__meta,
.tl-refresh .tl-search__compact__where,
.tl-refresh .tl-search__compact__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tl-refresh .tl-mbar__where,
.tl-refresh .tl-search__compact__where {
  font-size: 15px;
  font-weight: 700;
}

.tl-refresh .tl-mbar__meta,
.tl-refresh .tl-search__compact__meta {
  margin-top: 2px;
  color: var(--tl-muted);
  font-size: 12px;
}

.tl-refresh .tl-mbar__go,
.tl-refresh .tl-search__compact__go {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border-radius: 100px;
  background-color: var(--tl-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

/* The phone search on pages without a hero search: hidden until it opens as a sheet. */
.tl-refresh .tl-search--float:not(.is-sheet) {
  display: none;
}

/* Phones: the hero shows the slim search, which opens the full form as a sheet. */
.tl-refresh .tl-search__compact {
  display: none;
}

.tl-refresh .tl-search.is-compact:not(.is-sheet) .tl-search__compact {
  display: flex;
}

.tl-refresh .tl-search.is-compact:not(.is-sheet) #tab-hotel > .tl-hs {
  display: none;
}

.tl-refresh .tl-search__compact:focus-visible,
.tl-refresh .tl-mbar__btn:focus-visible {
  outline: 2px solid var(--tl-blue);
  outline-offset: 2px;
}

/* The full hotel search opens as a sheet over the page. */
.tl-refresh .tl-search__sheet-head {
  display: none;
}

html.tl-lock,
html.tl-lock body {
  overflow: hidden;
}

@media (max-width: 1023px) {
  .tl-refresh .tl-search.is-sheet {
    position: fixed;
    z-index: 10001;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: 100%;
    margin: 0;
    padding: 0 var(--tl-gutter) calc(32px + env(safe-area-inset-bottom));
    overflow-y: auto;
    border-radius: 0;
    box-shadow: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    animation: tl-sheet-in 0.25s ease-out;
  }

  .tl-refresh .tl-search.is-sheet .tl-search__head,
  .tl-refresh .tl-search.is-sheet .tl-search__note,
  .tl-refresh .tl-search.is-sheet .tl-search__panel:not(#tab-hotel) {
    display: none !important;
  }

  .tl-refresh .tl-search.is-sheet #tab-hotel[hidden] {
    display: block !important;
  }

  .tl-refresh .tl-search.is-sheet .tl-search__sheet-head {
    position: sticky;
    z-index: 70;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 calc(var(--tl-gutter) * -1) 14px;
    padding: 12px var(--tl-gutter);
    border-bottom: 1px solid var(--tl-line);
    background-color: #fff;
  }
}

.tl-refresh .tl-search__sheet-title {
  margin: 0;
  color: var(--tl-navy);
  font-size: 18px;
  font-weight: 700;
}

.tl-refresh .tl-search__sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1.5px solid var(--tl-line);
  border-radius: 50%;
  background-color: #fff;
  color: var(--tl-navy);
  cursor: pointer;
}

@keyframes tl-sheet-in {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* 17. Leaving Travelodge notice -------------------------------------------- */

.tl-exit {
  position: fixed;
  z-index: 10002;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tl-gutter, 16px);
  font-family: var(--tl-font);
}

.tl-exit[hidden] {
  display: none;
}

.tl-exit__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(10, 44, 68, 0.55);
}

.tl-exit__box {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: 28px 24px 24px;
  border-radius: var(--tl-radius-lg);
  background-color: #fff;
  color: var(--tl-text);
  box-shadow: var(--tl-shadow-pop);
  animation: tl-sheet-in 0.2s ease-out;
}

.tl-exit__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--tl-navy);
  cursor: pointer;
}

.tl-exit__close:hover {
  background-color: var(--tl-light);
}

.tl-exit__title {
  margin: 0 40px 10px 0;
  color: var(--tl-navy);
  font-family: var(--tl-font);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.tl-exit__text {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.5;
}

.tl-exit__host {
  color: var(--tl-navy);
  word-break: break-word;
}

.tl-exit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tl-exit__btn {
  display: inline-flex;
  flex: 1 1 160px;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0;
  padding: 0 18px;
  border: 1.5px solid var(--tl-blue);
  border-radius: var(--tl-radius-sm);
  font-family: var(--tl-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.tl-exit__btn--go {
  background-color: var(--tl-blue);
  color: #fff;
}

.tl-exit__btn--go:hover {
  border-color: var(--tl-navy);
  background-color: var(--tl-navy);
}

.tl-exit__btn--stay {
  background-color: #fff;
  color: var(--tl-blue);
}

.tl-exit__btn--stay:hover {
  background-color: var(--tl-tint);
}

.tl-exit :is(.tl-exit__btn, .tl-exit__close):focus-visible {
  outline: 2px solid var(--tl-blue);
  outline-offset: 2px;
}

/* 14. Motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .tl-refresh .tl-search *,
  .tl-refresh .tl-select__chevron,
  .tl-refresh .card,
  .tl-refresh .card__img img {
    transition: none !important;
  }

  .tl-refresh .tl-search.is-docked,
  .tl-refresh .tl-search.is-sheet {
    animation: none;
  }

  .tl-refresh .tl-mbar {
    transition: none;
  }

  .tl-exit__box {
    animation: none;
  }
}