/* ============================================================================
   custom.css — styles owned by the backend, not by the frontend build.

   main.css is generated from the frontend repo's SCSS and is replaced wholesale
   on each sync, so anything written there is lost next time. This file is never
   generated, loads after main.css, and wins on equal specificity.

   Contents were derived by comparing the previous main.css against the frontend
   build: every rule not present verbatim upstream is here. Rules the frontend
   rewrote in its latest release were deliberately left out so that build wins.

   Put backend-only styles here. If a rule belongs to the design system proper,
   it belongs in the frontend SCSS instead.

   NOTE when syncing main.css from the frontend build: its image and font paths
   are ../../img/_dist/ and ../../fonts/, which must be rewritten to ../images/
   and ../fonts/ or every background image and the custom font 404s.
   ============================================================================ */

.regions-dropdown .states-tabs .state-content .state-panel-right {
    max-width: 450px;
}
.section-info .wrapper-left .link, .discover-section .link {
    display: inline-block;
    color: var(--c-dark-purple);
    line-height: 120%;
    text-decoration: underline;
    margin-bottom: 24px;
    transition: .3s
}
.mobile-menu {
    position: fixed;
    top: 82px;
    left: 0;
    width: 100%;
    background: var(--c-white);
    padding: 24px 64px;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all .35s ease;
    z-index: 11;
    /* Closed it is height:0 but still 48px tall from its own padding, fixed at
       top:82px and above everything at z-index 11 — an invisible strip sitting
       across the row directly under the header. It swallowed clicks on the
       service page's back bar, its section links and the like/share buttons.
       Inert while closed; live again once .open is on. */
    pointer-events: none
}
.search-overlay-results {
    border-radius: 16px;
    border: 1px solid var(--c-grey);
    background: var(--c-white);
    padding-top: 12px;
    max-height: 480px;
    overflow-y: auto
}
.hero-home .info .explore {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    padding: 24px 0
}

@media only screen and (max-width: 575.98px) {
.hero-home .info .explore {
        gap: 12px;
        padding: 0
    }
}

@media only screen and (max-width: 767.98px) {
.hero-home .info .explore.explore-overflow {
        gap: 16px;
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--c-white) rgba(0, 0, 0, 0)
    }
.hero-home .info .explore.explore-overflow::-webkit-scrollbar {
        height: 2px
    }
.hero-home .info .explore.explore-overflow::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0)
    }
.hero-home .info .explore.explore-overflow::-webkit-scrollbar-thumb {
        background: var(--c-white);
        border-radius: 10px
    }
}
.hero-home .info .explore-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform .25s ease;
    flex-shrink: 0
}
.discover-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    transform: scale(1);
    transition: transform .5s ease;
    z-index: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 35%, rgba(0, 0, 0, 0) 60%);
}
.swiper-button-prev,
.swiper-button-next,
.towns-button-prev,
.towns-button-next,
.now-button-prev,
.now-button-next,
.activities-button-prev,
.activities-button-next,
.social-button-prev,
.social-button-next {
    min-width: 52px !important;
    height: 52px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    top: unset !important;
    bottom: 0 !important;
    border: 1px solid var(--c-dark-purple);
    transition: .3s;
    cursor: pointer
}

@media only screen and (max-width: 575.98px) {
.swiper-button-prev,
    .swiper-button-next,
    .towns-button-prev,
    .towns-button-next,
    .now-button-prev,
    .now-button-next,
    .activities-button-prev,
    .activities-button-next,
    .social-button-prev,
    .social-button-next {
        min-width: 42px !important;
        height: 42px !important
    }
}
.swiper-button-prev:hover,
.swiper-button-next:hover,
.towns-button-prev:hover,
.towns-button-next:hover,
.now-button-prev:hover,
.now-button-next:hover,
.activities-button-prev:hover,
.activities-button-next:hover,
.social-button-prev:hover,
.social-button-next:hover {
    background-color: #ebe3fb
}
.section-things .row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 48px
}
.tour-card .info {
    width: 100%;
    transform: translateY(0);
    position: relative;
    /* max-height: 120px; */
    overflow: hidden;
    transition: max-height 1.5s ease, transform 1.5s ease;
    z-index: 2;
    padding: 0 30px
}

@media only screen and (max-width: 575.98px) {
.tour-card .info .text {
        max-height: 0;
        margin-top: 0
    }
}
@media only screen and (max-width: 575.98px) {
    .tour-card:hover .info .text,
    .tour-card:focus-within .info .text {
        max-height: 0;
        margin-top: 0
    }
}
.tabs {
    display: flex;
    gap: 24px;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch
}
.tabs .tab {
    color: var(--c-light-purple);
    font-size: 14px;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: .14px;
    text-transform: uppercase;
    padding: 6px 0;
    cursor: pointer;
    transition: .3s;
    flex-shrink: 0;
    white-space: nowrap
}
.section-packages .row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 343px));
    gap: 40px;
    margin: 64px 0
}

@media only screen and (max-width: 1199.98px) {
.section-packages .row {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media only screen and (max-width: 575.98px) {
.section-packages .row {
        grid-template-columns: repeat(1, 1fr)
    }
}
.section-activities .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 48px
}
.section-activities .row .tabs {
    flex-wrap: wrap;
    row-gap: 10px
}
.title-shadow {
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.5),
        0 2px 8px rgba(0, 0, 0, 0.4),
        0 4px 20px rgba(0, 0, 0, 0.3);
}
.shadow {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
/* @media only screen and (max-width: 575.98px) {
    .hero-grey {
        padding: 100px 0 60px
    }
}
*/

.hero-grey-title span {
    color: var(--c-purple)
}
.deals-wrapper .deal-card .fs-18,
.deals-wrapper .deal-card .text,
.tour-card .info .text {
    margin: 12px 0
}
.explore-region-wrapper .row-card .image {
    width: 100%;
    border-radius: 16px 16px 0 0;
    min-height: clamp(240px, 25vw, 250px);
    max-height: clamp(240px, 25vw, 250px);
    object-fit: cover;
    object-position: bottom center;
}
.grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.hero-region {
  background-position: center;
  position: relative;
}
.bar .wrapper-back .button {
  padding: 8px 0;
  gap: 8px;
  color: var(--c-dark-purple);
  font-size: 12px;
  font-weight: 700;
  line-height: 120%;
  letter-spacing: 0.12px;
  text-transform: uppercase;
  transition: 0.3s;
}
.discover-section .wrapper-left .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.section-services .h2 span {
  color: var(--c-purple);
}
.discover-section .wrapper-right .text, .discover-section p {
  color: var(--c-light-purple);
  margin-bottom: 16px;
}
.discover-section .wrapper .wrapper-slider .swiper-buttons .swiper-button-disabled {
  opacity: 0.3;
}
.section-location .row-col {
  border-radius: 16px;
  background: #EBE3FB;
  padding: 48px;
}
.section-location .row-col .amenities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 40px;
  column-gap: 32px;
}

@media only screen and (max-width: 575.98px) {
.section-location .row-col .amenities {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 30px;
    column-gap: 24px;
  }
}
.gallery-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(1px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 96px;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s ease;
  z-index: 9999;
}
.gallery-overlay .gallery-swiper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.gallery-overlay .swiper-pagination-bullet {
  background: var(--c-white);
  opacity: 0.4;
}
.photo-credit {
  position: absolute;
  z-index: 3;
  left: 24px;
  bottom: 24px;
}
.photo-credit-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(25, 0, 31, 0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--c-white);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.photo-credit-toggle:hover,
.photo-credit-toggle[aria-expanded="true"] {
  background: var(--c-purple);
  border-color: var(--c-purple);
  color: var(--c-white);
}
.photo-credit-toggle:focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: 2px;
}
.photo-credit-panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  min-width: 260px;
  max-width: min(360px, calc(100vw - 48px));
  padding: 20px 24px;
  border-radius: 16px;
  background: var(--c-white);
  box-shadow: 0 16px 40px rgba(25, 0, 31, 0.22);
  color: var(--c-dark-purple);
  text-align: left;
}
.photo-credit-panel[hidden] {
  display: none;
}
.photo-credit-panel::after {
  content: "";
  position: absolute;
  left: 14px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: var(--c-white);
  transform: rotate(45deg);
  border-radius: 2px;
}
.photo-credit-title {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-purple);
}
.photo-credit-panel dl {
  margin: 0;
}
.photo-credit-panel dt {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-light-purple);
}
.photo-credit-panel dd {
  margin: 3px 0 14px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--c-dark-purple);
  word-break: break-word;
}
.photo-credit-panel dd:last-child {
  margin-bottom: 0;
}

@media only screen and (max-width: 991.98px) {
.photo-credit {
    left: 16px;
    bottom: 16px;
  }
}

@media only screen and (max-width: 767.98px) {
.photo-credit-toggle {
    width: 32px;
    height: 32px;
  }
.photo-credit-toggle svg {
    width: 18px;
    height: 18px;
  }
.photo-credit-panel {
    min-width: 0;
    width: calc(100vw - 32px);
    padding: 16px 18px;
  }
.photo-credit-panel dd {
    font-size: 14px;
  }
}
.bar .wrapper-share .like-dropdown .button {
  min-width: 0;
  max-width: none;
  width: 100%;
  height: auto;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  margin-top: 8px;
  white-space: nowrap;
}
.bar .wrapper-share .like-wrapper .like-dropdown {
  width: 240px;
}
.saved {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--c-dark-purple);
  font-size: 14px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -0.16px;
}
.saved img {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.svc-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-bottom: 28px;
}
.svc-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-dark-purple);
}
.svc-flag img {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}
.svc-group + .svc-group {
  margin-top: 24px;
}
.svc-group-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-light-purple);
}
.svc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.svc-tag {
  padding: 7px 14px;
  border-radius: 100px;
  background: var(--c-white);
  color: var(--c-dark-purple);
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.svc-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 32px;
  align-items: start;
}

@media only screen and (max-width: 991.98px) {
.svc-details {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 575.98px) {
.svc-details {
    grid-template-columns: 1fr;
    gap: 20px;
  }
.svc-tag {
    white-space: normal;
  }
.svc-flags {
    gap: 10px 20px;
  }
}
.route-endpoints {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 24px;
  color: var(--c-purple);
}
.route-endpoint {
  color: var(--c-dark-purple);
  font-weight: 600;
}
.section-location .map {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 16px;
}
.section-location .h2 span {
  color: var(--c-purple);
}
.section-location .h2 {
  margin-bottom: 8px;
}

@media only screen and (max-width: 575.98px) {
.route-endpoints {
    gap: 8px;
    font-size: 15px;
  }
.route-endpoints svg {
    width: 16px;
    height: 16px;
  }
}
.section-location .wrapper > .row-col + .row-col {
  margin-top: 16px;
}
.tour-card .info .h4 + .date {
  margin-top: 8px;
}
.filter-dropdown {
  z-index: 20;
}
.list-view .pagination,
.list-view-wrapper ~ .pagination {
  margin-top: 48px;
}

@media only screen and (max-width: 575.98px) {
.list-view .pagination,
  .list-view-wrapper ~ .pagination {
    margin-top: 32px;
    flex-wrap: wrap;
  }
}
.gm-style .gm-style-iw,
.gm-style .gm-style-iw-c {
  padding: 0 !important;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(25, 0, 31, 0.18);
  overflow: hidden;
  max-width: none !important;
  max-height: none !important;
}
.gm-style .gm-style-iw-d {
  padding: 0 !important;
  overflow: hidden !important;
  max-width: none !important;
  max-height: none !important;
}
.gm-style .gm-style-iw-c:has(.like-dropdown.active),
.gm-style .gm-style-iw-c:has(.like-dropdown.active) .gm-style-iw-d {
  overflow: visible !important;
}
.map-card .like-dropdown {
  z-index: 30;
}
.gm-style .gm-style-iw-tc::after {
  background: var(--c-white);
}
.gm-style .gm-style-iw-chr {
  display: none !important;
}
.gm-style .gm-style-iw-c button.gm-ui-hover-effect {
  display: none !important;
}
.map-card .deal-card-top .fixed {
  top: 10px;
  padding: 0 10px;
}
.map-card .fixed .actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.map-card .deal-card-top .fixed .button--like,
.map-card .map-card-close {
  min-width: 30px;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 100px;
  background: var(--c-white);
  color: var(--c-dark-purple);
  cursor: pointer;
  /* Photos behind these are unpredictable — a soft shadow keeps the white circles
     readable against a bright sky as well as a dark one. */
  box-shadow: 0 2px 8px rgba(25, 0, 31, 0.18);
}
.map-card .deal-card-top .fixed .button--like svg,
.map-card .map-card-close svg {
  width: 15px;
  height: 15px;
}
.map-card .deal-card-body .fs-18 {
  font-size: 15px;
  line-height: 1.35;
}
.map-card .deal-card-body .location {
  font-size: 12px;
  gap: 5px;
  margin-bottom: 6px;
}
.map-card .deal-card-body .location img {
  width: 13px;
  height: 13px;
}
.map-card .deal-card-body .text {
  font-size: 12px;
}
.map-card {
  width: 268px;
}
.map-card .deal-card-top {
  height: 165px;
}
.map-card .deal-card-body {
  padding: 12px 14px 14px;
  background: var(--c-white);
}
.map-card .deal-card-body .fs-18 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.list-view {
  /* Bottom padding matches the pagination's 48px top margin, so it sits with
     equal space above and below. */
  padding: 40px 0 48px;
}
.list-view-header-left .tag-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--c-dark-purple);
  border-radius: 100px;
  border: 1px solid var(--c-grey);
  background: var(--c-white);
  padding: 4.5px 16px;
}
.list-view-header-right .select {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
}
.list-view-header-right .select::before {
  content: "";
  position: absolute;
  left: -12px;
  background-color: var(--c-grey);
  width: 1px;
  height: 16px;
}
.list-view-wrapper .wrapper-left {
  width: 50%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
  gap: 40px;
  height: 100%;
  overflow-y: auto;
  padding-right: 8px;
}
.list-view-wrapper .wrapper-left .tour-card {
  height: 450px;
}
.list-view-wrapper.map-hidden {
  height: auto;
}
.list-view-wrapper.map-hidden .wrapper-left {
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  height: auto;
  overflow-y: visible;
  padding-right: 0;
}
.list-view-wrapper.map-hidden .wrapper-right {
  display: none;
}
.list-view-wrapper .wrapper-right #google-map-canvas {
  width: 100%;
  height: 100%;
  border-radius: 16px;
}

@media only screen and (max-width: 1199.98px) {
.list-view {
    padding: 40px 0 48px;
  }
}

@media only screen and (max-width: 991.98px) {
.list-view {
    padding: 40px 0 48px;
  }
}
@media only screen and (max-width: 767.98px) {
  .list-view-wrapper {
    flex-direction: column;
    height: auto;
  }
  .list-view-wrapper .wrapper-left,
  .list-view-wrapper .wrapper-right {
    width: 100%;
  }
  .list-view-wrapper .wrapper-left {
    overflow-y: visible;
    padding-right: 0;
  }
  .list-view-wrapper .wrapper-right {
    height: 500px;
  }
  .list-view-wrapper.map-hidden .wrapper-left {
    grid-template-columns: repeat(1, 1fr);
  }
  .list-view-wrapper .wrapper-left .tour-card {
    height: 430px;
  }
}
@media only screen and (max-width: 1439.98px) {
  .list-view-wrapper.map-hidden .wrapper-left {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (max-width: 1199.98px) {
.list-view-wrapper.map-hidden .wrapper-left {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 575.98px) {
.list-view {
    padding: 40px 0 32px;
  }
}
.section-overview--centred {
  padding: 72px 0;
}
.section-overview--centred .row-col {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

@media only screen and (max-width: 1199.98px) {
.section-overview--centred {
    padding: 64px 0;
  }
}

@media only screen and (max-width: 991.98px) {
.section-overview--centred {
    padding: 56px 0;
  }
}

@media only screen and (max-width: 575.98px) {
.section-overview--centred {
    padding: 40px 0;
  }
.section-overview--centred .row-col {
    padding: 0 16px;
  }
}
.svc-price {
  margin-top: 32px;
  padding: 24px;
  border: 1px solid #e6e0ef;
  border-radius: 16px;
  background: var(--c-white);
}
.svc-price-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.svc-price-figure {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.svc-price-label,
.svc-price-basis {
  font-size: 14px;
  line-height: 1.3;
  color: var(--c-light-purple);
}
.svc-price-amount {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-dark-purple);
}
.svc-price-to {
  font-size: 22px;
  font-weight: 600;
  color: var(--c-light-purple);
}
.svc-price-cta {
  flex: 0 0 auto;
}
.svc-price-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid #f0ecf6;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-light-purple);
}
.svc-price-note svg {
  flex: 0 0 auto;
  margin-top: 1px;
}

@media only screen and (max-width: 575.98px) {
.svc-price {
    padding: 20px;
  }
.svc-price-main {
    align-items: flex-start;
    gap: 16px;
  }
.svc-price-amount {
    font-size: 28px;
  }
.svc-price-to {
    font-size: 18px;
  }
.svc-price-cta {
    width: 100%;
    justify-content: center;
  }
}
.section-more {
  padding: 64px 0;
}
.section-more + .section-more {
  padding-top: 0;
}
.section-more .wrapper .row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  row-gap: 48px;
  column-gap: 100px;
}
.section-more .wrapper .row.tk-1 {
  grid-template-columns: 1fr;
}
.section-more .wrapper .row.tk-2 {
  grid-template-columns: repeat(2, 1fr);
}
.section-more .wrapper .row.tk-3 {
  grid-template-columns: repeat(3, 1fr);
}
.section-more .wrapper .row-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--c-dark-purple);
}

@media only screen and (max-width: 991.98px) {
.section-more .wrapper .row,
  .section-more .wrapper .row.tk-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 575.98px) {
.section-more .wrapper .row,
  .section-more .wrapper .row.tk-2,
  .section-more .wrapper .row.tk-3 {
    grid-template-columns: repeat(1, 1fr);
    gap: 36px;
  }
}

/* Favourite trigger in the detail-page bar.

   `.like-wrapper .button--outline` is written for the "Create new list" button
   inside the dropdown. On listing cards the trigger is `.button--like`, so it
   never matched it. In the bar the trigger is `button button--outline
   btn-favourite`, so it inherits that button's margin-top and sits 8px lower
   than the share button beside it.

   Direct child only, so the dropdown's own button keeps its spacing. */
.bar .wrapper-share .like-wrapper > .button--outline {
  width: auto;
  margin-top: 0;
}

/* Search and nearby group their results into sections, each wrapped in a
   .deals-wrapper four-column grid. Inside the side-by-side column that nests a
   4-col grid in a 2-col grid cell and the cards collapse to ~55px.

   display:contents removes the wrapper from layout so its cards become grid
   items of .wrapper-left itself, which is what the other listing pages do
   structurally. Section headings then span the full width rather than eating a
   card slot. */
.list-view-wrapper .wrapper-left .deals-wrapper {
  display: contents;
}

.list-view-wrapper .wrapper-left .search-section-header {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

/* Region and destination carousel headers on small screens — Trello #141.

   Each header is a flex row of "<title> ... <View All button>" with
   justify-content:space-between and flex-wrap:wrap. On a narrow screen a long
   title — "Highlights in North Coast" is 366px against a 478px row — no longer
   leaves room for the button, so the button wraps onto its own line.

   That is fine in itself, but three separate 24px spacings only become visible
   once it wraps and they stack: the heading's own margin-bottom, the row's
   row-gap, and the button's margin-top. The result is 72px of empty space
   between the title and the button, and the button then adds a 40px
   margin-bottom before the carousel. Shorter headings like "What's on now"
   never wrap, so they never show the problem — which is why this header looked
   out of step with the others.

   Collapsing the duplicates leaves one 16px gap under the title. Desktop is
   untouched: above this breakpoint nothing wraps and the stacking never
   happens. */
@media (max-width: 991.98px) {
  .section-activities .wrapper > .row,
  .section-now .wrapper > .row,
  .section-deal .wrapper > .row,
  .section-towns .wrapper > .row {
    row-gap: 16px;
    margin-bottom: 24px;
  }

  .section-activities .wrapper > .row .h2,
  .section-now .wrapper > .row .h2,
  .section-deal .wrapper > .row .h2,
  .section-towns .wrapper > .row .h2 {
    margin-bottom: 0;
  }

  /* Direct children only: .button--outline is also the favourite trigger in the
     detail bar, which needs to keep its own spacing. */
  .section-activities .wrapper > .row > .button--outline,
  .section-now .wrapper > .row > .button--outline,
  .section-deal .wrapper > .row > .button--outline,
  .section-towns .wrapper > .row > .button--outline {
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* Search section headers now carry a "View All" button — Trello #149/#146.

   The header sits in the results column, which is a grid; the rule further up
   already spans it across every column. Laying it out as a flex row puts the
   button opposite the heading, the same shape as the carousel headers on the
   region pages.

   align-items:center rather than baseline because the button is taller than the
   heading text, and margin-bottom:0 on the h3 so the two sit on one line —
   .mb-3 on the heading would otherwise push the button down. */
.search-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.search-section-header .h3 {
  margin-bottom: 0;
}

.search-section-header > .button--outline {
  margin-top: 0;
  margin-bottom: 0;
  width: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Favourite button: the unliked icon was white on white.

   Listing and geography cards set color:#fff so their title and meta read over
   the background photo. The favourite button sits inside that card and inherits
   it — but the button has a white circle background, and the outline icon draws
   its paths with stroke="currentColor". White on white: the circle rendered as
   an empty disc on every card that was not already liked.

   It looked intermittent because liked cards swap to .icon-filled, which sets
   its own fill and was never affected. Only .icon-add needs the override, so
   the liked state is left exactly as the frontend build defines it. */
.button--like .icon-add {
  color: #19001F;
}