@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root {
  --coral: #ff7043;
  --teal: #01a5a6;
  --ink: #3f3350;
  --yellow: #ffd740;
  --cream: #fff8e1;
  --blush: #fff2ed;
  --white: #fff;
  --muted: #706a78;
  --line: #e9e5ea;
  --shadow: 0 20px 50px rgba(63, 51, 80, .12);
  --radius: 22px
}

.dark {
  background: var(--ink) !important;
  color: white !important
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px
}

body {
  margin: 0;
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  background: #fff
}

body.single-product * {
    font-weight: 400;
}

button,
a {
  font: inherit
}

button {
  color: inherit
}

a {
  text-decoration: none
}

.shell {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto
}

.site-header {
  height: 76px;
  display: flex;
  align-items: center;
  padding: 0 max(24px, calc((100vw - 1180px)/2));
  gap: 44px;
  border-bottom: 1px solid rgba(63, 51, 80, .08);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 30
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: 20px
}

.brand-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--teal);
  color: white;
  transform: rotate(-5deg)
}

.desktop-nav {
  display: flex;
  gap: 30px;
  font-weight: 600;
  font-size: 14px
}

.desktop-nav a:hover {
  color: var(--teal)
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px
}

.icon-button,
.menu-button,
.save-button {
  background: white;
  border: 1px solid var(--line);
  cursor: pointer;
}

.icon-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700
}

.outline-button {
  padding: 10px 17px;
  border: 1px solid var(--ink);
  border-radius: 99px;
  font-weight: 700;
  font-size: 14px
}

.menu-button {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  padding: 10px
}

.menu-button span {
  display: block;
  height: 2px;
  background: var(--ink);
  margin: 4px 0
}

.hero {
  padding-top: 28px
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 13px
}

.breadcrumbs a:hover {
  color: var(--teal)
}

.title-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: end;
  margin: 22px 0
}

.eyebrow {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 600;
  font-size: 13px;
  color: var(--teal)
}

.eyebrow span {
  background: var(--blush);
  color: var(--coral);
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11px;
  letter-spacing: .06em
}

h1,
h2,
h3 {
  font-family: Manrope, sans-serif;
  line-height: 1.18
}

h1 {
  font-size: clamp(2.1rem, 4vw, 3.35rem);
  letter-spacing: -.045em;
  max-width: 920px;
  margin: 12px 0 14px
}

h2 {
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  letter-spacing: -.035em;
  margin: 5px 0 12px
}

h3 {
  font-size: 17px
}

.rating-line {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px
}

.stars {
  color: #f6b91d;
  letter-spacing: 1px
}

.rating-line a {
  text-decoration: underline;
  text-underline-offset: 3px
}
.qlwapp__container.qlwapp__container--bottom-right.qlwapp__container--rounded {
    display: none;
}
.dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #bbb4be
}

.save-button {
  border-radius: 99px;
  padding: 10px 17px;
  font-weight: 700;
  display: flex;
  gap: 7px
}

.save-button.saved {
  background: var(--blush);
  border-color: #ffc9b7;
  color: var(--coral)
}
.save-button.saved:has(svg) {
    gap: 0;
}
.save-button:has(svg) {
    gap: 0;
}
.gallery {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  grid-template-rows: 190px 190px;
  gap: 8px;
  border-radius: var(--radius);
  overflow: hidden
}

.gallery-image {
  border: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #ddd
}

.gallery-main {
  grid-row: span 2
}

.gallery-image:nth-child(2) {
  grid-column: span 2
}

.gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease
}

.gallery-image:hover img {
  transform: scale(1.04)
}

.photo-count {
  position: absolute;
  right: 14px;
  bottom: 14px;
  background: white;
  padding: 8px 12px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 5px 20px #0003
}

.quick-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 16px
}

.quick-facts>div {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 15px
}

.fact-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e9fafa;
  color: var(--teal);
  font-weight: 700
}

.quick-facts p {
  margin: 0;
  line-height: 1.25
}

.quick-facts small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: 3px
}

.quick-facts strong {
  font-size: 13px
}

.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 60px;
  padding-top: 68px;
  padding-bottom: 90px
}

.content-column>section {
  padding: 10px 0 64px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 54px
}

.content-column>section:last-child {
  border: 0
}

.intro {
  padding-top: 0 !important
}

.lead {
  font: 600 clamp(1.35rem, 2.5vw, 1.75rem)/1.45 Manrope, sans-serif;
  letter-spacing: -.02em;
  margin: 0 0 24px
}

.trust-strip {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  background: #effbf8;
  border-radius: 14px;
  padding: 14px 18px;
  color: #177c6a;
  font-size: 13px;
  font-weight: 600
}

.section-kicker {
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em
}

.section-heading {
  margin-bottom: 25px
}

.section-heading p {
  margin: 0;
  color: var(--muted)
}

.highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
  margin-top: 28px
}

.highlight-grid article {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  background: #fff
}

.highlight-grid span {
  color: var(--coral);
  font-weight: 800;
  font-size: 12px
}

.highlight-grid h3 {
  margin: 12px 0 7px
}

.highlight-grid p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  line-height: 1.55
}

.itinerary-list {
  position: relative
}

.itinerary-list:before {
  content: "";
  position: absolute;
  width: 1px;
  background: #d8eeee;
  top: 26px;
  bottom: 26px;
  left: 83px
}

.itinerary-item button {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 55px 44px 1fr 20px;
  align-items: center;
  gap: 7px;
  border: 0;
  background: none;
  text-align: left;
  padding: 10px 4px;
  cursor: pointer
}

.timeline-time {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted)
}

.timeline-icon {
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e4f8f5;
  color: var(--teal);
  font-weight: 700
}

.timeline-title strong,
.timeline-title small {
  display: block
}

.timeline-title small {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px
}

.chevron {
  transition: transform .2s
}

.itinerary-item.open .chevron {
  transform: rotate(180deg)
}

.itinerary-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease
}

.itinerary-detail p {
  overflow: hidden;
  margin: 0 30px 0 110px;
  color: var(--muted);
  font-size: 14px
}

.itinerary-item.open .itinerary-detail {
  grid-template-rows: 1fr
}

.itinerary-item.open .itinerary-detail p {
  margin-block: 5px 18px
}

.detail-tabs {
  display: flex;
  gap: 6px;
  padding: 5px;
  background: #f5f4f5;
  border-radius: 12px;
  margin-bottom: 16px
}

.detail-tabs button {
  flex: 1;
  border: 0;
  background: transparent;
  border-radius: 9px;
  padding: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px
}

.detail-tabs button.active {
  background: white;
  box-shadow: 0 3px 10px #3f335014
}

.tab-panel {
  display: none;
  background: #f1fbf8;
  border: 1px solid #cdf0e5;
  border-radius: 16px;
  padding: 22px
}

.tab-panel.active {
  display: block
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  color: #267763;
  font-size: 13px
}

.check-grid.blue {
  color: #3f5e77
}

.not-included {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid #cde8df
}

.not-included h3 {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--coral)
}

.not-included p {
  margin: 0;
  color: var(--muted);
  font-size: 13px
}

.info-list {
  margin: 0;
  padding-left: 20px
}

.info-list li+li {
  margin-top: 12px
}

.policy {
  display: flex !important;
  gap: 16px !important;
  background: var(--cream);
  border: 1px solid #f6e1a1 !important;
  border-radius: 16px;
  padding: 22px !important;
  margin-top: -20px !important
}

.policy-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: white;
  border-radius: 50%;
  color: var(--teal);
  font-size: 23px
}

.policy h3,
.policy p {
  margin: 0
}

.policy p {
  color: var(--muted);
  font-size: 13px
}

.reviews-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.reviews-grid article {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px
}

.review-top {
  display: flex;
  align-items: center;
  gap: 10px
}

.review-top p,
.review-top strong,
.review-top small {
  display: block;
  margin: 0
}

.review-top small {
  font-size: 11px;
  color: var(--muted)
}

.avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 800;
  font-size: 12px;
  color: white
}

.avatar.coral {
  background: var(--coral)
}

.avatar.teal {
  background: var(--teal)
}

.reviews-grid .stars {
  font-size: 12px;
  margin: 15px 0 6px
}

.reviews-grid article>p {
  font-size: 14px;
  color: var(--muted);
  margin: 0
}

.booking-card {
  position: sticky;
  top: 96px;
  align-self: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  background: white;
  box-shadow: var(--shadow)
}

.booking-badge {
  display: inline-block;
  color: #b94925;
  background: var(--blush);
  padding: 5px 9px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 11px
}

.price-label {
  font-size: 12px;
  color: var(--muted);
  margin: 18px 0 -4px
}

.price {
  display: flex;
  align-items: baseline;
  gap: 8px
}

.price strong {
  font: 800 2.1rem Manrope, sans-serif
}

.price span {
  color: var(--muted);
  font-size: 13px
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 20px
}

.field-grid label>span {
  display: block;
  font-weight: 700;
  font-size: 11px;
  margin-bottom: 5px
}

.select-field {
  width: 100%;
  padding: 12px 10px;
  display: flex;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  font-size: 12px;
  cursor: pointer
}

.primary-button {
  border: 0;
  background: var(--coral);
  color: white;
  border-radius: 12px;
  padding: 14px 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 9px 22px rgba(255, 112, 67, .24);
  transition: transform .2s, background .2s
}

.primary-button:hover {
  background: #ed5d31;
  transform: translateY(-2px)
}

.booking-card>.primary-button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 12px
}

.no-charge {
  text-align: center;
  font-size: 11px;
  color: var(--muted)
}

.booking-benefits {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  display: grid;
  gap: 8px;
  font-size: 12px;
  color: #247967
}

.support {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px
}

.support-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: #e8f8f8;
  color: var(--teal);
  border-radius: 50%;
  font-weight: 800
}

.support p {
  margin: 0;
  line-height: 1.3
}

.support p strong,
.support p small {
  display: block
}

.support p small {
  font-size: 10px;
  color: var(--muted)
}

.support button {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--teal);
  font-weight: 700;
  cursor: pointer
}

footer .shell {
  display: flex;
  align-items: center;
  gap: 30px
}

.footer-brand {
  margin-right: auto
}

footer p,
footer .shell>span {
  font-size: 13px;
  color: #d9d2dd
}

.mobile-booking {
  display: none
}

.modal[hidden],
.lightbox[hidden] {
  display: none
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(32, 25, 39, .65);
  backdrop-filter: blur(5px)
}

.modal-card {
  position: relative;
  width: min(480px, 100%);
  background: white;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 30px 100px #0005
}

.modal-card h2 {
  margin-top: 7px
}

.modal-card>p {
  color: var(--muted)
}

.modal-close {
  position: absolute;
  right: 17px;
  top: 14px;
  border: 0;
  background: none;
  font-size: 28px;
  cursor: pointer
}

.modal-card form {
  display: grid;
  gap: 13px
}

.modal-card label {
  font-size: 12px;
  font-weight: 700
}

.modal-card input,
.modal-card select {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font: inherit
}

.form-note {
  margin: 0 !important;
  color: var(--teal) !important;
  font-weight: 700;
  font-size: 13px
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #17131bcc;
  display: grid;
  place-items: center;
  padding: 5vw
}

.lightbox img {
  max-width: min(1100px, 90vw);
  max-height: 80vh;
  border-radius: 14px
}

.lightbox button {
  position: absolute;
  border: 0;
  background: #fff;
  color: var(--ink);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 28px;
  cursor: pointer
}

.lightbox-close {
  right: 24px;
  top: 24px
}

.lightbox-prev {
  left: 24px
}

.lightbox-next {
  right: 24px
}

.lightbox-counter {
  position: absolute;
  bottom: 22px;
  color: white;
  font-weight: 700
}

.no-scroll {
  overflow: hidden
}

@media(max-width:900px) {

  .desktop-nav,
  .header-actions {
    display: none
  }

  .menu-button {
    display: block;
    margin-left: auto
  }

  .site-header.menu-open {
    height: auto;
    flex-wrap: wrap;
    padding-block: 16px
  }

  .site-header.menu-open .desktop-nav {
    order: 3;
    display: flex;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0
  }

  .site-header.menu-open .desktop-nav a {
    padding: 12px 0;
    border-top: 1px solid var(--line)
  }

  .content-layout {
    grid-template-columns: 1fr;
    gap: 0
  }

  .booking-card {
    position: relative;
    top: auto;
    grid-row: 1;
    margin-bottom: 55px
  }

  .quick-facts {
    grid-template-columns: 1fr 1fr
  }

  .mobile-booking {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 30px #3f33501a
  }

  .mobile-booking small,
  .mobile-booking strong {
    display: block;
    line-height: 1.2
  }

  .mobile-booking strong {
    font-family: Manrope
  }

  .mobile-booking strong span {
    font-size: 11px;
    color: var(--muted);
    font-family: 'DM Sans'
  }

  .mobile-booking .primary-button {
    padding: 12px 15px
  }

}

@media(max-width:650px) {
  .shell {
    width: min(100% - 28px, 1180px)
  }

  .site-header {
    height: 66px;
    padding-inline: 14px
  }

  .hero {
    padding-top: 17px
  }

  .breadcrumbs {
    overflow: hidden;
    white-space: nowrap
  }

  .title-row {
    display: block
  }

  .title-row h1 {
    font-size: 2rem
  }

  .save-button {
    display: none
  }

  .rating-line {
    flex-wrap: wrap
  }

  .gallery {
    grid-template-columns: 1fr;
    grid-template-rows: 290px
  }

  .gallery-main {
    grid-row: auto
  }

  .gallery-image:not(.gallery-main) {
    display: none
  }

  .quick-facts {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px
  }

  .quick-facts>div {
    min-width: 190px;
    scroll-snap-align: start
  }

  .content-layout {
    padding-top: 42px
  }

  .content-column>section {
    padding-bottom: 45px;
    margin-bottom: 38px
  }

  .trust-strip {
    display: grid;
    gap: 8px
  }

  .highlight-grid,
  .reviews-grid {
    grid-template-columns: 1fr
  }

  .highlight-grid article {
    padding: 18px
  }

  .itinerary-item button {
    grid-template-columns: 45px 38px 1fr 15px
  }

  .itinerary-list:before {
    left: 68px
  }

  .itinerary-detail p {
    margin-left: 90px
  }

  .check-grid {
    grid-template-columns: 1fr 1fr
  }

  .detail-tabs {
    overflow-x: auto
  }

  .detail-tabs button {
    min-width: 110px
  }

  .booking-card {
    padding: 20px
  }

  .field-grid {
    grid-template-columns: 1fr
  }

  footer .shell {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px
  }

  .footer-brand {
    margin: 0
  }

  .modal-card {
    padding: 25px 20px
  }

  .lightbox {
    padding: 14px
  }

  .lightbox img {
    max-width: 100%;
    max-height: 75vh
  }

  .lightbox-prev {
    left: 12px
  }

  .lightbox-next {
    right: 12px
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important
  }
}

/* Refined experience, itinerary and trip-detail treatments */
.experience-section>.section-heading {
  max-width: 680px
}

.experience-section>.section-heading p {
  max-width: 620px;
  margin-top: 14px
}

.experience-bento {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px
}

.experience-feature {
  grid-row: span 2;
  position: relative;
  min-height: 500px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--ink);
  color: white
}

.experience-feature:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24, 18, 31, .03) 25%, rgba(38, 29, 47, .92) 100%)
}

.experience-feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0
}

.experience-copy {
  position: absolute;
  z-index: 1;
  left: 30px;
  right: 30px;
  bottom: 28px
}

.experience-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  opacity: .8
}

.experience-copy h3 {
  font-size: clamp(1.75rem, 3vw, 2.45rem);
  letter-spacing: -.04em;
  margin: 8px 0 12px
}

.experience-copy>p {
  max-width: 460px;
  color: #f2edf4;
  font-size: 14px;
  margin: 0
}

.experience-stats {
  display: flex;
  gap: 28px;
  margin-top: 22px
}

.experience-stats span {
  display: grid
}

.experience-stats strong {
  font: 800 1.45rem Manrope, sans-serif;
  color: #fff
}

.experience-stats small {
  font-size: 10px;
  color: #ddd4e1;
  text-transform: uppercase;
  letter-spacing: .07em
}

.experience-card {
  border-radius: 24px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 242px;
  overflow: hidden
}

.experience-card h3 {
  font-size: 1.4rem;
  margin: 8px 0
}

.experience-card p {
  font-size: 14px;
  line-height: 1.55;
  margin: 0
}

.experience-symbol {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff9;
  font-size: 20px
}

.coral-card {
  background: #fff0ea;
  color: #8b3c25;
  border: 1px solid #ffd1c2
}

.teal-card {
  background: var(--teal);
  color: white
}

.teal-card p {
  color: #e5ffff
}

.teal-card .experience-label {
  color: white
}

.itinerary-list {
  display: grid;
  gap: 10px
}

.itinerary-list:before {
  display: none
}

.itinerary-item {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: white;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s
}

.itinerary-item:hover {
  border-color: #c8e8e7
}

.itinerary-item.open {
  border-color: #9ededd;
  box-shadow: 0 10px 28px rgba(1, 165, 166, .09);
  background: #fcffff
}

.itinerary-item button {
  grid-template-columns: 76px 44px 1fr 30px;
  padding: 15px 17px;
  gap: 10px
}

.timeline-time {
  align-self: stretch;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #f5f3f6;
  color: var(--ink);
  font: 800 12px Manrope, sans-serif
}

.itinerary-item.open .timeline-time {
  background: var(--teal);
  color: white
}

.timeline-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px
}

.timeline-title strong {
  font-size: 14px
}

.chevron {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f4f2f5
}

.itinerary-detail p {
  margin: 0;
  padding: 0 55px 18px 164px
}

.itinerary-item.open .itinerary-detail p {
  margin: 0
}

.included-heading,
.excluded-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 18px
}

.included-heading>span,
.excluded-heading>span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  font-weight: 800
}

.included-heading>span {
  background: #d9f5ec;
  color: #177c63
}

.included-heading h3,
.included-heading p,
.excluded-heading h3,
.excluded-heading p {
  margin: 0
}

.included-heading p,
.excluded-heading p {
  font-size: 12px;
  color: var(--muted)
}

.not-included {
  margin: 24px -22px -22px;
  padding: 20px 22px;
  background: #fff2f1;
  border-top: 1px solid #ffd7d5;
  border-radius: 0 0 16px 16px
}

.excluded-heading {
  margin-bottom: 14px
}

.excluded-heading>span {
  background: #fff;
  color: #e0484d
}

.excluded-heading h3 {
  color: #b83338;
  font-size: 15px
}

.excluded-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

.excluded-items>span {
  position: relative;
  padding: 12px 12px 12px 36px;
  background: #fff;
  border: 1px solid #f7d1d2;
  border-radius: 10px;
  color: #74383c;
  font-size: 13px;
  font-weight: 600
}

.excluded-items>span:before {
  content: "×";
  position: absolute;
  left: 13px;
  color: #e0484d;
  font-weight: 800
}

.excluded-items small {
  display: block;
  font-size: 10px;
  color: #9b6d70;
  font-weight: 500
}

.policy {
  position: relative;
  align-items: center;
  background: linear-gradient(135deg, #e6fbf7, #f3fffd) !important;
  border: 1px solid #a9e8db !important;
  padding: 26px !important;
  box-shadow: 0 12px 32px rgba(1, 165, 166, .08)
}

.policy:after {
  content: "";
  position: absolute;
  right: 65px;
  top: -20px;
  width: 90px;
  height: 90px;
  border: 18px solid rgba(1, 165, 166, .06);
  border-radius: 50%
}

.policy-icon {
  position: relative;
  z-index: 1;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  background: var(--teal);
  color: white;
  font-size: 20px;
  box-shadow: 0 8px 20px rgba(1, 165, 166, .25)
}

.policy-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  color: var(--teal)
}

.policy h3 {
  font-size: 19px;
  margin: 3px 0 5px
}

.policy p {
  max-width: 510px
}

.policy-pill {
  position: relative;
  z-index: 1;
  margin-left: auto;
  white-space: nowrap;
  padding: 7px 11px;
  background: white;
  border: 1px solid #bde9df;
  border-radius: 99px;
  color: #16816d;
  font-size: 11px;
  font-weight: 800
}

@media(max-width:650px) {
  .quick-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: visible;
    gap: 8px
  }

  .quick-facts>div {
    min-width: 0;
    padding: 12px 10px;
    gap: 8px
  }

  .fact-icon {
    flex-basis: 32px;
    width: 32px;
    height: 32px
  }

  .quick-facts strong {
    font-size: 11px
  }

  .quick-facts small {
    font-size: 8px
  }

  .experience-bento {
    grid-template-columns: 1fr;
    grid-template-rows: auto
  }

  .experience-feature {
    grid-row: auto;
    min-height: 440px
  }

  .experience-card {
    min-height: 215px
  }

  .experience-copy {
    left: 22px;
    right: 22px;
    bottom: 22px
  }

  .experience-copy h3 {
    font-size: 1.75rem
  }

  .experience-stats {
    gap: 20px
  }

  .itinerary-list {
    gap: 9px
  }

  .itinerary-item button {
    grid-template-columns: 58px 1fr 28px;
    padding: 13px;
    gap: 10px
  }

  .timeline-icon {
    display: none
  }

  .timeline-title strong {
    font-size: 13px
  }

  .timeline-title small {
    font-size: 11px;
    line-height: 1.35
  }

  .itinerary-detail p {
    padding: 0 14px 16px 81px;
    font-size: 12px;
    line-height: 1.55
  }

  .excluded-items {
    grid-template-columns: 1fr
  }

  .policy {
    align-items: flex-start !important;
    padding: 20px !important
  }

  .policy-icon {
    flex-basis: 42px;
    width: 42px;
    height: 42px
  }

  .policy-pill {
    display: none
  }

  .policy h3 {
    font-size: 16px
  }

  .policy p {
    line-height: 1.5
  }
}

/* Flexible, backend-friendly tour components */
.tour-gallery {
  display: grid;
  gap: 10px
}

.gallery-stage {
  position: relative;
  height: 440px;
  padding: 0;
  border: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #dbe4e5;
  cursor: zoom-in;
  text-align: left
}

.gallery-stage:after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgba(21, 16, 28, .68))
}

.gallery-stage>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .2s, transform .45s
}

.gallery-stage:hover>img {
  transform: scale(1.015)
}

.stage-caption {
  position: absolute;
  z-index: 1;
  left: 22px;
  bottom: 19px;
  color: white;
  display: grid;
  line-height: 1.35
}

.stage-caption strong {
  font: 700 16px Manrope, sans-serif
}

.stage-caption small {
  font-size: 11px;
  opacity: .85
}

.view-gallery {
  position: absolute;
  z-index: 1;
  right: 18px;
  bottom: 18px;
  padding: 9px 14px;
  background: white;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 800
}

.gallery-rail {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 9px
}

.gallery-thumb {
  height: 86px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 13px;
  overflow: hidden;
  background: #eee;
  cursor: pointer;
  opacity: .72;
  transition: opacity .2s, border-color .2s, transform .2s
}

.gallery-thumb:hover {
  opacity: 1;
  transform: translateY(-2px)
}

.gallery-thumb.active {
  opacity: 1;
  border-color: var(--teal)
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.quick-facts>div {
  padding-left: 20px;
  border-left: 3px solid #dff5f3
}

.quick-facts>div:nth-child(2n) {
  border-left-color: #ffe1d7
}

.highlights-heading,
.itinerary-heading,
.faq-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .7fr);
  gap: 40px;
  align-items: end
}

.highlights-heading>p,
.itinerary-heading>p,
.faq-heading>p {
  font-size: 14px
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 11px
}

.highlights-grid article {
  min-height: 180px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  transition: transform .2s, border-color .2s, box-shadow .2s
}

.highlights-grid article:hover {
  transform: translateY(-3px);
  border-color: #b7e3e1;
  box-shadow: 0 12px 26px rgba(63, 51, 80, .07)
}

.highlight-index {
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 99px;
  background: #eaf9f8;
  color: var(--teal);
  font: 800 10px Manrope, sans-serif;
  letter-spacing: .05em
}

.highlights-grid article:nth-child(3n+2) .highlight-index {
  background: #fff0ea;
  color: var(--coral)
}

.highlights-grid h3 {
  font-size: 16px;
  margin: auto 0 7px
}

.highlights-grid p {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0
}

.highlights-grid:after {
  content: "";
  display: none
}

.route-list {
  position: relative
}

.route-stop {
  display: grid;
  grid-template-columns: 84px 42px 1fr;
  gap: 18px;
  position: relative;
  padding-bottom: 14px
}

.route-time {
  text-align: right;
  padding-top: 21px;
  line-height: 1.2
}

.route-time strong,
.route-time small {
  display: block
}

.route-time strong {
  font: 800 13px Manrope, sans-serif
}

.route-time small {
  font-size: 8px;
  letter-spacing: .1em;
  color: var(--muted);
  margin-top: 4px
}

.route-marker {
  position: relative;
  display: flex;
  justify-content: center
}

.route-marker:after {
  content: "";
  position: absolute;
  top: 53px;
  bottom: -17px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, #b5dcda 0, #b5dcda 5px, transparent 5px, transparent 10px)
}

.route-end .route-marker:after {
  display: none
}

.route-marker span {
  position: relative;
  z-index: 1;
  margin-top: 17px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--teal);
  border: 5px solid #e4f7f5;
  color: white;
  font: 800 10px Manrope, sans-serif
}

.route-content {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff
}

.route-stop:nth-child(even) .route-content {
  background: #fcfafc
}

.route-type {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--teal)
}

.route-content h3 {
  font-size: 16px;
  margin: 5px 0 7px
}

.route-content p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 11px
}

.route-duration {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  background: #f4f2f5;
  color: #6e6674;
  font-size: 9px;
  font-weight: 700
}

.route-end .route-marker span {
  background: var(--ink);
  border-color: #ece8ee
}

.included-heading,
.excluded-heading {
  padding-left: 0
}

.included-heading>div,
.excluded-heading>div {
  padding-left: 13px;
  border-left: 3px solid var(--teal)
}

.excluded-heading>div {
  border-left-color: var(--coral)
}

.check-grid>span {
  position: relative;
  padding-left: 16px
}

.check-grid>span:before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal)
}

.check-grid.blue>span:before {
  background: #627889
}

.excluded-items>span {
  padding-left: 17px
}

.excluded-items>span:before {
  content: none
}

.excluded-items>span {
  border-left: 3px solid #f4a5a7
}

.faq-list {
  border-top: 1px solid var(--line)
}

.faq-item {
  border-bottom: 1px solid var(--line)
}

.faq-item button {
  width: 100%;
  padding: 20px 3px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-align: left;
  font-weight: 700;
  cursor: pointer
}

.faq-item button b {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f2fafa;
  color: var(--teal);
  font-size: 18px
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease
}

.faq-answer p {
  overflow: hidden;
  margin: 0;
  max-width: 680px;
  color: var(--muted);
  font-size: 14px
}

.faq-item.open .faq-answer {
  grid-template-rows: 1fr
}

.faq-item.open .faq-answer p {
  margin: 0 50px 20px 3px
}

@media(max-width:650px) {
  .gallery-stage {
    height: 300px;
    border-radius: 18px
  }

  .stage-caption {
    left: 15px;
    bottom: 14px
  }

  .view-gallery {
    right: 12px;
    bottom: 12px;
    padding: 7px 10px;
    font-size: 10px
  }

  .gallery-rail {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 8px;
    padding: 2px 14px 8px;
    margin-inline: -14px;
    scrollbar-width: none
  }

  .gallery-rail::-webkit-scrollbar {
    display: none
  }

  .gallery-thumb {
    flex: 0 0 33%;
    height: 78px;
    scroll-snap-align: start
  }

  .quick-facts>div {
    padding-left: 12px
  }

  .highlights-heading,
  .itinerary-heading,
  .faq-heading {
    grid-template-columns: 1fr;
    gap: 9px
  }

  .highlights-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px
  }

  .highlights-grid article {
    min-height: 160px;
    padding: 15px
  }

  .highlights-grid h3 {
    font-size: 14px
  }

  .highlights-grid p {
    font-size: 11px
  }

  .route-stop {
    grid-template-columns: 57px 28px 1fr;
    gap: 9px;
    padding-bottom: 10px
  }

  .route-time {
    padding-top: 16px
  }

  .route-time strong {
    font-size: 11px
  }

  .route-marker span {
    width: 27px;
    height: 27px;
    border-width: 4px;
    margin-top: 15px
  }

  .route-marker:after {
    top: 43px
  }

  .route-content {
    padding: 15px;
    border-radius: 13px
  }

  .route-content h3 {
    font-size: 14px
  }

  .route-content p {
    font-size: 11px
  }

  .faq-item button {
    padding: 17px 1px;
    font-size: 14px
  }

  .faq-item.open .faq-answer p {
    margin-right: 35px;
    font-size: 12px
  }
}

/* Backend-aligned final layout */
ul,
ol {
  list-style: none
}

.content-layout {
  display: block;
  max-width: 980px
}

.content-column {
  width: 100%
}

.tour-summary {
  max-width: 840px;
  margin: 28px 0 18px
}

.tour-summary p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 0;
  background: #f0faf8;
  border: 1px solid #d9f0eb;
  overflow: hidden
}

.trust-strip span {
  padding: 13px 18px;
  text-align: center
}

.trust-strip span+span {
  border-left: 1px solid #cce9e3
}

.quick-facts>div,
.quick-facts>div:nth-child(2n) {
  border-left: 0;
  background: #fff
}

.tour-gallery {
  grid-template-columns: minmax(0, 1.65fr) minmax(250px, .85fr);
  grid-template-rows: 430px
}

.gallery-stage {
  height: 430px
}

.gallery-rail {
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: calc((430px - 2 * 9px) / 3);
  gap: 9px;
  height: 430px;
  max-height: 430px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--teal, #01a5a6) #eef4f3;
  padding-right: 3px;
  align-content: start;
  min-width: 0
}

@media(min-width:651px) {
  .gallery-thumb {
    width: 100% !important;
    height: 100% !important;
    border-radius: 12px !important;
    overflow: hidden !important
  }

  .gallery-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block
  }
}

.highlights-grid {
  grid-template-columns: repeat(3, 1fr)
}

.highlights-grid article {
  padding: 0;
  min-height: 0;
  overflow: hidden
}

.highlights-grid article>img {
  width: 100%;
  height: 132px;
  display: block;
  object-fit: cover
}

.highlights-grid article>div {
  padding: 16px;
  min-height: 120px;
  display: flex;
  flex-direction: column
}

.highlights-grid h3 {
  margin: 0 0 7px
}

.highlights-grid p {
  margin: 0
}

.highlight-index {
  display: none
}

.route-list {
  display: grid;
  gap: 10px
}

.route-stop {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: stretch;
  gap: 12px;
  padding: 0
}

.route-icon {
  width: 76px;
  height: 100%;
  min-height: 118px;
  object-fit: cover;
  border-radius: 15px
}

.route-content,
.route-stop:nth-child(even) .route-content {
  padding: 17px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px
}

.route-label {
  display: inline-block;
  padding: 4px 9px;
  background: #edf9f8;
  color: var(--teal);
  border-radius: 99px;
  font-size: 10px;
  font-weight: 800
}

.route-content h3 {
  margin: 7px 0 5px;
  font-size: 15px
}

.route-content p {
  margin: 0
}

.route-time,
.route-marker,
.route-type,
.route-duration {
  display: none
}

.tab-panel {
  background: #fff;
  border-color: var(--line)
}

.included-heading,
.excluded-heading {
  padding: 0;
  margin-bottom: 15px
}

.included-heading>div,
.excluded-heading>div {
  padding-left: 0;
  border-left: 0
}

.included-heading h3,
.excluded-heading h3 {
  color: var(--ink);
  font-size: 15px
}

.check-grid {
  gap: 8px
}

.check-grid>span,
.excluded-items>span {
  padding: 11px 13px;
  background: #faf9fa;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600
}

.check-grid>span:before,
.excluded-items>span:before {
  content: none
}

.not-included {
  margin: 24px 0 0;
  padding: 20px 0 0;
  background: transparent;
  border-top: 1px solid var(--line);
  border-radius: 0
}

.excluded-items {
  gap: 8px
}

.excluded-items>span {
  border-left: 1px solid var(--line)
}

.excluded-items small {
  color: var(--muted)
}

.info-list {
  padding-left: 0
}

.info-list li {
  padding: 13px 15px;
  background: #faf9fa;
  border: 1px solid var(--line);
  border-radius: 10px
}

.info-list li+li {
  margin-top: 8px
}

@media(max-width:650px) {
  .tour-gallery {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto
  }

  .gallery-stage {
    height: 285px
  }

  .gallery-rail {
    display: flex;
    margin: 0;
    padding: 2px 0 8px;
    overflow-x: auto
  }

  .gallery-thumb {
    flex: 0 0 34%;
    height: 78px
  }

  .trust-strip {
    grid-template-columns: 1fr
  }

  .trust-strip span {
    padding: 11px 14px
  }

  .trust-strip span+span {
    border-left: 0;
    border-top: 1px solid #cce9e3
  }

  .tour-summary {
    margin-top: 20px
  }

  .highlights-grid {
    grid-template-columns: 1fr 1fr
  }

  .highlights-grid article>img {
    height: 105px
  }

  .highlights-grid article>div {
    padding: 12px;
    min-height: 116px
  }

  .route-stop {
    grid-template-columns: 62px 1fr;
    gap: 8px
  }

  .route-icon {
    width: 62px;
    min-height: 112px;
    border-radius: 12px
  }

  .route-content {
    padding: 13px
  }

  .check-grid {
    grid-template-columns: 1fr
  }

  .excluded-items {
    grid-template-columns: 1fr
  }

}


/* 2026 tour component system */
svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.8
}

.header-cart {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: var(--coral);
  color: white;
  padding: 10px 16px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer
}

.header-cart svg {
  width: 16px;
  height: 16px
}

.tour-gallery {
  position: relative
}

.video-trigger {
  position: absolute;
  z-index: 3;
  left: 18px;
  top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 99px;
  padding: 8px 13px 8px 8px;
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  box-shadow: 0 8px 28px #0002;
  cursor: pointer
}

.video-trigger>svg {
  width: 30px;
  height: 30px;
  padding: 8px;
  border-radius: 50%;
  background: var(--coral);
  color: white;
  fill: white
}

.video-trigger span {
  display: grid;
  text-align: left;
  line-height: 1.2
}

.video-trigger strong {
  font-size: 11px
}

.video-trigger small {
  font-size: 9px;
  color: var(--muted);
  margin-top: 2px
}

.quick-facts {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 20px
}

.quick-facts>.fact-card,
.quick-facts>.fact-card:nth-child(2n) {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 17px;
  border: 1px solid #e7e4e8;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff, #fcfbfc);
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(63, 51, 80, .045)
}

.quick-facts>.fact-card:after {
  content: "";
  position: absolute;
  right: -17px;
  top: -20px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(1, 165, 166, .055)
}

.fact-symbol {
  position: relative;
  z-index: 1;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #e5f7f5;
  color: var(--teal)
}

.fact-symbol.coral {
  background: #fff0ea;
  color: var(--coral)
}

.fact-symbol.purple {
  background: #f0edf4;
  color: var(--ink)
}

.fact-symbol.yellow {
  background: #fff8dd;
  color: #b68100
}

.fact-symbol svg {
  width: 18px;
  height: 18px
}

.fact-card p {
  margin: 0;
  min-width: 0
}

.fact-card p small {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  color: #8a8390;
  margin-bottom: 5px
}

.fact-card p strong {
  display: block;
  font: 700 13px/1.35 Manrope, sans-serif
}

.pickup-card {
  grid-column: span 2
}

.fact-detail {
  display: block;
  margin-top: 8px;
  color: #8c5960;
  font-size: 10px;
  line-height: 1.45
}

.fact-tag {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 99px;
  background: #fff0ea;
  color: #b64b29;
  font-size: 9px;
  font-weight: 800
}

.operator-logo {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  object-fit: cover
}

.verified-operator {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 7px;
  color: var(--teal);
  font-size: 9px;
  font-weight: 700
}

.verified-operator svg {
  width: 12px;
  height: 12px
}

.trust-strip {
  display: inline-grid;
  width: auto;
  max-width: 100%;
  grid-template-columns: repeat(3, auto);
  border-radius: 99px;
  background: #f5fbfa;
  border: 1px solid #dfefec;
  margin-top: 2px
}

.trust-strip span {
  padding: 8px 14px;
  font-size: 11px;
  white-space: nowrap
}

.trust-strip span+span {
  border-left: 1px solid #d8e9e5
}

.route-list {
  position: relative;
  display: grid;
  gap: 0;
  padding-left: 4px
}

.route-list:before {
  content: "";
  position: absolute;
  left: 25px;
  top: 28px;
  bottom: 31px;
  width: 2px;
  background: linear-gradient(var(--teal), #cfe8e5)
}

.route-stop {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding: 0 0 30px
}

.route-stop:last-child {
  padding-bottom: 0
}

.route-icon {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  min-height: 0;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: white;
  border: 2px solid #bce5df;
  color: var(--teal);
  box-shadow: 0 5px 15px rgba(1, 165, 166, .12)
}

.route-stop:nth-child(2n) .route-icon {
  border-color: #ffcbbb;
  color: var(--coral)
}

.route-icon svg {
  width: 19px;
  height: 19px
}

.route-content,
.route-stop:nth-child(even) .route-content {
  padding: 0 0 25px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0
}

.route-stop:last-child .route-content {
  border-bottom: 0;
  padding-bottom: 0
}

.route-label {
  padding: 4px 9px;
  background: #eaf8f6;
  color: var(--teal);
  font-size: 9px
}

.route-content h3 {
  font-size: 17px;
  margin: 8px 0 6px
}

.route-content p {
  font-size: 13px;
  max-width: 690px
}

.route-stop:nth-child(2n) .route-label {
  background: #fff0ea;
  color: var(--coral)
}

.details-section {
  position: relative
}

.details-section>.section-heading p {
  color: var(--muted);
  margin: 0
}

.detail-tabs {
  gap: 8px;
  padding: 7px;
  background: #f3f2f4;
  border-radius: 16px
}

.detail-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: 11px;
  color: #77707d
}

.detail-tabs button svg {
  width: 17px;
  height: 17px
}

.detail-tabs button.active {
  color: var(--ink);
  box-shadow: 0 5px 18px #3f335017
}

.detail-tabs button:first-child.active {
  color: #16836c
}

.detail-tabs button:nth-child(2).active {
  color: #b64c2a
}

.detail-tabs button:nth-child(3).active {
  color: #7b5c17
}

.tab-panel {
  padding: 26px;
  border-radius: 20px
}

.included-panel {
  background: #f1fbf8;
  border-color: #c9ecdf
}

.bring-panel {
  background: #fff7f2;
  border-color: #f7d6c8
}

.info-panel {
  background: #fffaf0;
  border-color: #f3dfae
}

.panel-intro {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px
}

.panel-intro>span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: white;
  color: var(--teal);
  box-shadow: 0 5px 14px #287c6812
}

.panel-intro h3,
.panel-intro p {
  margin: 0
}

.panel-intro h3 {
  font-size: 16px
}

.panel-intro p {
  font-size: 11px;
  color: var(--muted)
}

.modern-item-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px
}

.modern-item-grid>span {
  padding: 11px 13px;
  border: 1px solid #cfe8e1;
  border-radius: 11px;
  background: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-weight: 600
}

.not-included {
  margin: 24px -26px -26px;
  padding: 22px 26px 26px;
  background: #fff1ee;
  border-top: 1px solid #f5d1c8;
  border-radius: 0 0 20px 20px
}

.not-included .panel-intro>span {
  color: var(--coral)
}

.modern-item-grid.excluded>span {
  border-color: #f2cec5;
  color: #824738
}

.bring-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px
}

.bring-grid>span {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px;
  border: 1px solid #f3d4c6;
  background: #fffdfa;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600
}

.bring-grid svg {
  width: 17px;
  height: 17px;
  color: var(--coral)
}

.important-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px;
  background: #fff0c9;
  border-radius: 14px;
  margin-bottom: 12px
}

.important-hero>span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #ffd740;
  color: #6d5312
}

.important-hero h3,
.important-hero p {
  margin: 0
}

.important-hero h3 {
  font-size: 16px
}

.important-hero p {
  font-size: 11px;
  color: #7f6c40
}

.important-grid {
  display: grid;
  gap: 8px
}

.important-grid article {
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #f0dfb9;
  border-radius: 12px
}

.important-grid strong {
  font-size: 12px
}

.important-grid p {
  font-size: 11px;
  color: var(--muted);
  margin: 3px 0 0
}

.suitability-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px
}

.suitability-grid>span {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border: 1px solid #eadfe6;
  background: #fcfafc;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600
}

.suitability-grid svg {
  width: 16px;
  height: 16px;
  color: #9b5770
}

.weather-notice {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: linear-gradient(135deg, #eff9ff, #f8fcff);
  border: 1px solid #cfe6f2;
  border-radius: 20px;
  padding: 25px !important
}

.weather-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #dff2fb;
  color: #287797
}

.weather-notice h3 {
  font-size: 18px;
  margin: 4px 0 7px
}

.weather-notice p {
  font-size: 13px;
  color: #586f7a;
  margin: 0;
  max-width: 730px
}

.transport-variants,
.policy-variants {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.transport-card {
  display: flex;
  gap: 15px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff
}

.transport-card.included {
  background: #f1fbf8;
  border-color: #c5eadf
}

.transport-card.excluded {
  background: #faf9fb
}

.transport-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: white;
  color: var(--teal)
}

.transport-card.excluded .transport-icon {
  color: var(--ink)
}

.state-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--teal)
}

.transport-card.excluded .state-label {
  color: #7c7282
}

.transport-card h3 {
  font-size: 15px;
  margin: 5px 0 6px
}

.transport-card p {
  font-size: 12px;
  color: var(--muted);
  margin: 0
}

.area-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 13px
}

.area-tags span {
  padding: 4px 8px;
  border-radius: 99px;
  background: white;
  border: 1px solid #cae8e0;
  font-size: 9px;
  font-weight: 700
}

.transport-card a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--teal);
  font-size: 11px;
  font-weight: 800;
  margin-top: 13px
}

.transport-card a svg {
  width: 13px;
  height: 13px
}

.policy-card {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 22px;
  border-radius: 18px
}

.policy-card>span {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: white
}

.policy-card.refundable {
  background: #f0fbf8;
  border: 1px solid #bee8de
}

.policy-card.refundable>span {
  color: #249575
}

.policy-card.nonrefundable {
  background: #faf5f6;
  border: 1px solid #ead6dc
}

.policy-card.nonrefundable>span {
  color: #875568
}

.policy-card h3,
.policy-card p {
  margin: 0
}

.policy-card h3 {
  font-size: 16px
}

.policy-card p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 5px
}

.fa-solid {
  font-family: "Font Awesome 5 Free", sans-serif;
  font-weight: 900;
  font-style: normal
}

.fa-van-shuttle:before {
  content: "\f5b6"
}

.mobile-cart {
  display: none
}

.video-modal[hidden],
.cart-toast[hidden] {
  display: none
}

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px
}

.video-backdrop {
  position: absolute;
  inset: 0;
  background: #17131bd9;
  backdrop-filter: blur(5px)
}

.video-card {
  position: relative;
  z-index: 1;
  width: min(900px, 95vw)
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #000
}

.video-wrapper iframe,
.video-wrapper video {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 18px;
  object-fit: contain
}

.video-close {
  position: absolute;
  z-index: 9999;
  right: -12px;
  top: -12px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: white;
  font-size: 24px;
  cursor: pointer
}

.cart-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 110;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  background: var(--ink);
  color: white;
  border-radius: 15px;
  box-shadow: 0 20px 50px #231b2d55
}

.cart-toast>svg {
  color: #67d9bc
}

.cart-toast span {
  display: grid;
  line-height: 1.25
}

.cart-toast strong {
  font-size: 12px
}

.cart-toast small {
  font-size: 9px;
  color: #d9d0df
}

.cart-toast button {
  margin-left: 10px;
  border: 0;
  background: transparent;
  color: white;
  font-size: 20px;
  cursor: pointer
}

@media(max-width:900px) {
  .quick-facts {
    grid-template-columns: repeat(2, 1fr)
  }

  .pickup-card {
    grid-column: span 2
  }

  .modern-item-grid,
  .bring-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:650px) {
  .header-cart {
    display: none
  }

  .quick-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: visible
  }

  .quick-facts>.fact-card,
  .quick-facts>.fact-card:nth-child(2n) {
    min-width: 0;
    padding: 13px;
    display: block
  }

  .fact-symbol {
    margin-bottom: 10px
  }

  .pickup-card {
    grid-column: span 2
  }

  .operator-card {
    display: flex !important
  }

  .fact-detail {
    font-size: 9px
  }

  .trust-strip {
    display: flex;
    width: 100%;
    overflow-x: auto;
    border-radius: 12px;
    scrollbar-width: none
  }

  .trust-strip span {
    flex: 0 0 auto;
    padding: 9px 12px
  }

  .trust-strip span+span {
    border-top: 0
  }

  .video-trigger {
    left: 10px;
    top: 10px
  }

  .video-trigger small {
    display: none
  }

  .route-list:before {
    left: 21px
  }

  .route-stop {
    grid-template-columns: 38px 1fr;
    gap: 13px
  }

  .route-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px
  }

  .route-content h3 {
    font-size: 15px
  }

  .detail-tabs button {
    display: grid;
    gap: 4px;
    padding: 9px 5px;
    font-size: 10px
  }

  .tab-panel {
    padding: 18px
  }

  .modern-item-grid,
  .bring-grid {
    grid-template-columns: 1fr 1fr
  }

  .modern-item-grid>span,
  .bring-grid>span {
    font-size: 10px;
    padding: 10px
  }

  .not-included {
    margin: 20px -18px -18px;
    padding: 18px
  }

  .transport-variants,
  .policy-variants {
    grid-template-columns: 1fr
  }

  .transport-card {
    padding: 18px
  }

  .suitability-grid>span {
    font-size: 10px;
    padding: 9px 11px
  }

  .weather-notice {
    padding: 18px !important
  }

  .weather-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px
  }

  .mobile-cart {
    position: fixed;
    z-index: 9999;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(10px)
  }

  .mobile-cart button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 12px;
    background: var(--coral);
    color: white;
    padding: 13px;
    font-weight: 800
  }

  .mobile-cart svg {
    width: 17px;
    height: 17px
  }

  .cart-toast {
    left: 14px;
    right: 14px;
    bottom: 76px
  }

}

/* Requested cleanup: content-first, no decorative icons */
.video-trigger {
  left: 14px;
  top: 14px;
  gap: 6px;
  padding: 7px 10px 7px 7px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 5px 16px #0002;
  backdrop-filter: blur(8px)
}

.video-trigger>svg {
  width: 25px;
  height: 25px;
  padding: 7px
}

.video-trigger>span {
  font-size: 10px;
  font-weight: 800
}

.quick-facts>.fact-card,
.quick-facts>.fact-card:nth-child(2n) {
  align-items: stretch;
  padding: 18px
}

.quick-facts>.fact-card p {
  width: 100%
}

.pickup-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px
}

.fact-tag {
  margin: 0;
  padding: 5px 8px;
  line-height: 1.4
}

.fact-tag.estimate {
  max-width: 360px;
  background: #eaf8f6;
  color: #247d6d
}

.fact-tag.lobby {
  background: #fff0ea;
  color: #b64b29
}

.operator-card {
  display: block !important
}

.operator-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 7px
}

.operator-mark {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--teal), #44c7bf);
  color: white;
  font: 800 13px Manrope, sans-serif;
  transform: rotate(-5deg)
}

.operator-wordmark {
  font: 800 12px Manrope, sans-serif;
  letter-spacing: .11em;
  color: var(--teal)
}

.operator-card p>strong {
  font-size: 11px;
  color: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 600
}

.trust-strip {
  display: grid;
  width: min(620px, 100%);
  grid-template-columns: repeat(3, 1fr);
  border-radius: 13px;
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 6px 18px rgba(63, 51, 80, .035)
}

.trust-strip span {
  display: grid;
  place-items: center;
  min-height: 40px;
  padding: 8px 12px;
  color: #34796e;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  white-space: normal
}

.trust-strip span+span {
  border-color: var(--line)
}

.panel-intro {
  gap: 0
}

.panel-intro>div {
  padding: 0
}

.bring-grid>span {
  justify-content: flex-start
}

.important-hero {
  padding-left: 18px
}

.suitability-grid>span {
  padding: 10px 14px;
  background: #fff;
  border-color: #e5e1e6
}

.transport-card.excluded>div {
  align-self: center
}

@media(max-width:650px) {
  .video-trigger {
    left: 9px;
    top: 9px;
    padding: 6px 9px 6px 6px
  }

  .video-trigger>svg {
    width: 23px;
    height: 23px
  }

  .quick-facts>.fact-card,
  .quick-facts>.fact-card:nth-child(2n) {
    padding: 14px
  }

  .operator-card {
    display: block !important
  }

  .pickup-tags {
    display: grid
  }

  .trust-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible
  }

  .trust-strip span {
    padding: 7px 5px;
    font-size: 8px
  }

  .trust-strip span+span {
    border-left: 1px solid var(--line)
  }
}

/* Clear information deck and desktop cart rail */
.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 278px;
  gap: 44px;
  max-width: 1180px
}

.quick-facts>.fact-card,
.quick-facts>.fact-card:nth-child(2n) {
  min-height: 112px;
  background: #fff;
  border: 1px solid #e8e4e9;
  box-shadow: 0 10px 25px rgba(63, 51, 80, .055)
}

.quick-facts>.fact-card:before {
  content: "";
  position: absolute;
  left: 18px;
  top: 17px;
  width: 26px;
  height: 3px;
  border-radius: 4px;
  background: var(--teal)
}

.quick-facts>.fact-card:nth-child(2n):before {
  background: var(--coral)
}

.quick-facts>.fact-card:nth-child(3n):before {
  background: var(--yellow)
}

.fact-card p {
  padding-top: 13px
}

.fact-card p small {
  margin-bottom: 8px
}

.fact-card p strong {
  font-size: 15px
}

.pickup-card {
  min-height: 152px !important
}

.pickup-meta {
  display: grid;
  grid-template-columns: 1.65fr .75fr;
  gap: 8px;
  margin-top: 12px
}

.pickup-meta>span {
  display: block;
  padding: 10px 11px;
  border-radius: 11px;
  background: #eef9f7
}

.pickup-meta>span:last-child {
  background: #fff1ec
}

.pickup-meta small {
  margin: 0 0 3px !important;
  color: #3a8b7c !important;
  font-size: 7px !important
}

.pickup-meta>span:last-child small {
  color: #be5e3f !important
}

.pickup-meta b {
  display: block;
  font-size: 9px;
  line-height: 1.45;
  font-weight: 600;
  color: #37665f
}

.pickup-meta>span:last-child b {
  color: #8b4b38
}

.operator-brand {
  height: 35px;
  display: inline-flex;
  margin: 0 0 6px;
  padding: 0 1px;
  border-bottom: 2px solid var(--teal)
}

.operator-wordmark {
  font-size: 14px;
  letter-spacing: .16em
}

.operator-card p>strong {
  font-size: 11px
}

.trust-strip {
  display: flex;
  width: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  margin-top: 5px
}

.trust-strip span {
  min-height: auto;
  padding: 0 15px;
  color: #33766d;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap
}

.trust-strip span:first-child {
  padding-left: 0
}

.trust-strip span+span {
  border-left: 1px solid #c9d9d6
}

.desktop-cart-card {
  position: sticky;
  top: 96px;
  align-self: start;
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(63, 51, 80, .11)
}

.cart-card-kicker {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  color: var(--teal)
}

.desktop-cart-card h3 {
  font-size: 20px;
  margin: 8px 0
}

.desktop-cart-card p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55
}

.desktop-cart-card button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 9px;
  padding: 13px;
  border: 0;
  border-radius: 12px;
  background: var(--coral);
  color: white;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(255, 112, 67, .23)
}

.desktop-cart-card button svg {
  width: 17px;
  height: 17px
}

.desktop-cart-card>small {
  display: block;
  text-align: center;
  font-size: 9px;
  color: var(--muted)
}

@media(max-width:900px) {
  .content-layout {
    display: block;
    max-width: 980px
  }

  .desktop-cart-card {
    display: none
  }
}

@media(max-width:650px) {

  .quick-facts>.fact-card,
  .quick-facts>.fact-card:nth-child(2n) {
    min-height: 112px
  }

  .pickup-card {
    min-height: 0 !important
  }

  .pickup-meta {
    grid-template-columns: 1fr
  }

  .trust-strip {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 4px
  }

  .trust-strip span {
    display: grid;
    place-items: center;
    padding: 0 6px;
    white-space: normal;
    text-align: center;
    line-height: 1.35
  }

  .trust-strip span:first-child {
    padding-left: 6px
  }
}

/* Exact pickup, operator, suitability and cart requirements */
.content-layout {
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 38px
}

.pickup-lines {
  display: grid;
  gap: 7px;
  margin-top: 12px
}

.pickup-lines>span {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45
}

.pickup-estimate {
  background: #e9f8f6;
  color: #236f64
}

.pickup-lobby {
  width: max-content;
  background: #fff0ea;
  color: #a94628
}

.operator-card {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: center
}

.operator-card:before,
.operator-card:after {
  display: none
}

.operator-card img {
  display: block;
  width: 110px;
  height: 42px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 7px
}

.operator-card>strong {
  font: 700 13px Manrope, sans-serif;
  color: var(--ink)
}

.not-suitable-warning {
  margin-top: 16px;
  padding: 18px;
  background: #fff0ef;
  border: 1px solid #f3c5c3;
  border-radius: 14px
}

.not-suitable-warning>span {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  color: #bd393e
}

.not-suitable-warning h3 {
  font-size: 16px;
  color: #7b3034;
  margin: 4px 0 12px
}

.not-suitable-warning>div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px
}

.not-suitable-warning strong {
  padding: 9px 11px;
  border: 1px solid #efcdcb;
  border-radius: 9px;
  background: #fff;
  color: #7c4547;
  font-size: 10px
}

.desktop-cart-card {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none
}

.cart-section {
  padding: 20px;
  margin-bottom: 12px;
  border: 1px solid #dedade;
  border-radius: 12px;
  background: #fff
}

.cart-section>label:first-child {
  display: block;
  margin-bottom: 13px;
  font: 700 15px Manrope, sans-serif
}

.cart-field {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #ddd8dc;
  padding: 2px 0 10px
}

.cart-field svg {
  color: var(--coral);
  width: 19px;
  height: 19px
}

.cart-field input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit
}

.cart-section select {
  width: 100%;
  padding: 13px 38px 13px 13px;
  border: 2px solid var(--coral);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-weight: 700
}

.service-option {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px;
  background: #f8f7f8;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700 !important
}

.service-option b {
  color: var(--coral);
  font-weight: 600
}

.service-option input {
  width: 19px;
  height: 19px;
  accent-color: var(--coral)
}

.cart-price {
  padding-bottom: 16px
}

.traveller-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.traveller-row>span {
  display: grid
}

.traveller-row>span strong {
  font-size: 13px
}

.traveller-row>span b {
  font-size: 12px;
  color: var(--coral);
  margin-top: 5px
}

.quantity {
  display: flex;
  align-items: center;
  gap: 13px
}

.quantity button {
  width: 36px;
  height: 36px;
  border: 1px solid #d4d0d5;
  border-radius: 50%;
  background: #fff;
  font-size: 19px;
  cursor: pointer
}

.total-row {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  padding: 13px;
  background: #f7f6f7;
  border-radius: 9px;
  font-size: 15px
}

.cart-submit {
  width: 100%;
  padding: 15px;
  border: 0;
  border-radius: 13px;
  background: var(--coral);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(255, 112, 67, .22)
}

@media(max-width:900px) {
  .content-layout {
    display: block
  }

  .desktop-cart-card {
    display: none
  }
}

@media(max-width:650px) {
  .pickup-lines>span {
    font-size: 10px
  }

  .pickup-lobby {
    width: auto
  }

  .operator-card img {
    width: 90px;
    height: 35px
  }

  .not-suitable-warning>div {
    grid-template-columns: 1fr
  }
}

/* Equal information cards and My Tour supporting copy */
.quick-facts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch
}

.quick-facts>.fact-card,
.quick-facts>.fact-card:nth-child(2n),
.quick-facts>.pickup-card,
.quick-facts>.operator-card {
  grid-column: auto !important;
  width: 100%;
  height: 210px;
  min-height: 210px !important
}

.pickup-lines>span {
  font-size: 10px
}

.operator-card {
  justify-content: center !important
}

.highlights-heading>p,
.itinerary-heading>p,
.faq-heading>p {
  color: var(--coral) !important;
  font-weight: 700
}

@media(max-width:900px) {
  .quick-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:650px) {

  .quick-facts>.fact-card,
  .quick-facts>.fact-card:nth-child(2n),
  .quick-facts>.pickup-card,
  .quick-facts>.operator-card {
    height: 190px;
    min-height: 190px !important
  }

  .pickup-lines>span {
    padding: 8px 9px;
    font-size: 9px
  }
}

/* Unified information panel — intentionally not a card grid */
.quick-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 10px;
  margin-top: 20px;
  border-radius: 24px;
  background: linear-gradient(135deg, #3f3350 0%, #31283d 100%);
  box-shadow: 0 22px 50px rgba(63, 51, 80, .16);
  overflow: hidden
}

.quick-facts>.fact-card,
.quick-facts>.fact-card:nth-child(2n),
.quick-facts>.pickup-card,
.quick-facts>.operator-card {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto;
  height: auto;
  min-height: 108px !important;
  padding: 18px 20px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: white;
  overflow: visible
}

.quick-facts>.fact-card:before,
.quick-facts>.fact-card:after {
  display: none
}

.quick-facts>.fact-card:nth-child(-n+4) {
  border-bottom: 1px solid rgba(255, 255, 255, .13)
}

.quick-facts>.fact-card:not(:nth-child(4)):not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, .13)
}

.quick-facts>.pickup-card {
  grid-column: span 2 !important;
  min-height: 130px !important
}

.quick-facts .fact-card p {
  padding: 0;
  margin: 0
}

.quick-facts .fact-card p>small {
  color: #c9c0ce;
  font-size: 8px;
  letter-spacing: .13em
}

.quick-facts .fact-card p>strong {
  color: #fff;
  font-size: 15px
}

.pickup-lines {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px
}

.pickup-lines>span {
  padding: 7px 9px;
  font-size: 9px;
  line-height: 1.4
}

.pickup-estimate {
  flex: 1;
  background: rgba(57, 199, 185, .14);
  color: #c9fff7
}

.pickup-lobby {
  flex: 0 0 auto;
  width: auto;
  background: rgba(255, 112, 67, .16);
  color: #ffc1ad
}

.operator-card {
  flex-direction: column !important;
  align-items: flex-start !important
}

.operator-card img {
  width: 100px;
  height: 40px;
  margin: 0 0 6px;
  filter: drop-shadow(0 2px 6px #0002)
}

.operator-card>strong {
  color: #fff;
  font-size: 11px
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px
}

.highlights-grid article {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible
}

.highlights-grid article:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none
}

.highlights-grid article>img {
  width: 100%;
  height: 86px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 7px 16px rgba(63, 51, 80, .09)
}

.highlights-grid article>h3 {
  margin: 8px 2px 0;
  font-size: 11px;
  line-height: 1.35
}

.highlights-grid article>p {
  display: none
}

@media(max-width:900px) {
  .quick-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .quick-facts>.fact-card:nth-child(-n+4) {
    border-bottom: 1px solid rgba(255, 255, 255, .13)
  }

  .quick-facts>.fact-card:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, .13)
  }

  .quick-facts>.fact-card:nth-child(even) {
    border-right: 0
  }

  .quick-facts>.pickup-card {
    grid-column: span 2 !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .13)
  }

  .quick-facts>.operator-card {
    border-right: 1px solid rgba(255, 255, 255, .13) !important
  }

  .highlights-grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media(max-width:650px) {
  .quick-facts {
    padding: 6px;
    border-radius: 18px
  }

  .quick-facts>.fact-card,
  .quick-facts>.fact-card:nth-child(2n),
  .quick-facts>.pickup-card,
  .quick-facts>.operator-card {
    height: auto;
    min-height: 94px !important;
    padding: 14px
  }

  .quick-facts>.pickup-card {
    min-height: 130px !important
  }

  .pickup-lines {
    display: grid
  }

  .highlights-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 9px
  }

  .highlights-grid article>img {
    height: 76px
  }

  .highlights-grid article>h3 {
    font-size: 10px
  }
}

/* Light tour facts, selectable packages, and responsive traveller cart */
.package-selector {
  margin: 18px 0 16px;
  padding: 18px;
  border: 1px solid #e5e1e6;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 9px 24px rgba(63, 51, 80, .05)
}

.package-selector legend {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 6px
}

.package-selector legend span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--coral)
}

.package-selector legend strong {
  font: 700 15px Manrope, sans-serif
}

.package-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 10px;
  max-width: none !important;
}

.package-choice {
  position: relative;
  padding: 13px 15px;
  border: 1px solid #e3dfe4;
  border-radius: 12px;
  background: #faf9fa;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s
}

.package-choice span,
.package-choice small {
  display: block
}

.package-choice span {
  font-weight: 500;
  font-size: 12px
}

.package-choice small {
  font-size: 9px;
  color: var(--muted);
  margin-top: 3px
}

.package-choice.active {
  border: 2px solid var(--coral);
  padding: 12px 14px;
  background: #fff7f3;
  box-shadow: 0 7px 18px rgba(255, 112, 67, .09)
}

.package-choice.active:after {
  content: "✓";
  position: absolute;
  right: 10px;
  top: 10px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--coral);
  color: white;
  font-size: 10px;
  font-weight: 800
}

.quick-facts {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  padding: 10px;
  background: linear-gradient(135deg, #e9f8f7, #f3fbfa);
  box-shadow: 0 18px 42px rgba(1, 165, 166, .09)
}

.quick-facts>.fact-card,
.quick-facts>.fact-card:nth-child(2n),
.quick-facts>.pickup-card,
.quick-facts>.operator-card {
  grid-column: span 3 !important;
  min-height: 96px !important;
  padding: 17px 19px;
  color: var(--ink);
  border-color: #cae6e3 !important
}

.quick-facts>.fact-card:nth-child(-n+3) {
  grid-column: span 4 !important;
  min-height: 142px !important;
  border-bottom: 1px solid #cae6e3
}

.quick-facts>.pickup-card {
  grid-column: span 4 !important
}

.quick-facts>.fact-card:not(:nth-child(3)):not(:last-child) {
  border-right: 1px solid #cae6e3
}

.quick-facts .fact-card p>small,
.operator-card>small {
  display: block;
  color: #47877e;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .13em;
  margin-bottom: 7px
}

.quick-facts .fact-card p>strong,
.operator-card>strong {
  color: var(--ink);
  font-size: 15px
}

.pickup-lines {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
  margin-top: 10px
}

.pickup-lines>span {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid;
  border-radius: 10px;
  font-size: 9px;
  line-height: 1.4
}

.pickup-estimate {
  background: #fff;
  border-color: #9fd8d2;
  color: #39756c
}

.pickup-lobby {
  background: #fff7f3;
  border-color: #f4b9a5;
  color: #ad4b2e
}

.operator-card {
  align-items: flex-start !important;
  justify-content: center !important
}

.operator-card>small {
  margin-bottom: 5px
}

.operator-card img {
  width: 96px;
  height: 36px
}

.operator-card>strong {
  font-size: 11px
}

.tour-summary {
  max-width: none;
  margin: 18px 0 0;
  padding: 19px 21px;
  border: 1px solid #f0ddd5;
  border-radius: 16px;
  background: #fff9f5
}

.tour-summary .section-kicker {
  color: var(--coral)
}

.tour-summary p {
  margin-top: 7px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.7
}

.traveller-row+.traveller-row {
  margin-top: 17px;
  padding-top: 17px;
  border-top: 1px solid var(--line)
}

.mobile-prices {
  display: flex;
  gap: 14px
}

.mobile-prices span {
  line-height: 1.2
}

.mobile-prices small {
  font-size: 8px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em
}

.mobile-prices strong {
  font-size: 11px;
  margin-top: 3px
}

.mobile-cart .mobile-cart-trigger {
  flex: 0 0 auto;
  width: auto;
  padding: 12px 16px
}

@media(max-width:900px) {
  .quick-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .quick-facts>.fact-card,
  .quick-facts>.fact-card:nth-child(2n),
  .quick-facts>.pickup-card,
  .quick-facts>.operator-card,
  .quick-facts>.fact-card:nth-child(-n+3) {
    grid-column: span 1 !important;
    min-height: 112px !important
  }

  .quick-facts>.pickup-card {
    grid-column: span 2 !important;
    min-height: 130px !important
  }

  .quick-facts>.fact-card {
    border-bottom: 1px solid #cae6e3
  }

  .quick-facts>.fact-card:nth-child(odd) {
    border-right: 1px solid #cae6e3 !important
  }

  .quick-facts>.fact-card:nth-child(even) {
    border-right: 0 !important
  }

  .quick-facts>.pickup-card {
    border-right: 0 !important
  }

  .content-layout {
    display: flex;
    flex-direction: column
  }

  .content-column {
    order: 1
  }

  .desktop-cart-card {
    display: block;
    order: 0;
    position: relative;
    top: auto;
    margin-bottom: 42px
  }

  .package-options {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media(max-width:650px) {
  .package-selector {
    padding: 14px
  }

  .package-selector legend {
    display: grid;
    gap: 1px
  }

  .package-options {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none
  }

  .package-choice {
    flex: 0 0 74%;
    scroll-snap-align: start
  }

  .quick-facts>.fact-card,
  .quick-facts>.fact-card:nth-child(2n),
  .quick-facts>.pickup-card,
  .quick-facts>.operator-card,
  .quick-facts>.fact-card:nth-child(-n+3) {
    min-height: 104px !important
  }

  .quick-facts>.pickup-card {
    min-height: 150px !important
  }

  .pickup-lines {
    grid-template-columns: 1fr
  }

  .tour-summary {
    padding: 16px
  }

  .tour-summary p {
    font-size: 14px
  }

  .mobile-cart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
  }

  .mobile-prices {
    min-width: 0;
    gap: 10px
  }

  .mobile-cart .mobile-cart-trigger {
    width: auto;
    padding: 12px 14px;
    white-space: nowrap
  }
}

/* Precise two-row facts, compact packages, and bottom-sheet booking */
.quick-facts>.fact-card,
.quick-facts>.fact-card:nth-child(2n),
.quick-facts>.pickup-card,
.quick-facts>.operator-card {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  border: 0 !important
}

.quick-facts>.fact-card:nth-child(-n+3) {
  height: 164px;
  min-height: 164px !important;
  border-bottom: 1px solid #cae6e3 !important
}

.quick-facts>.fact-card:nth-child(1),
.quick-facts>.fact-card:nth-child(2),
.quick-facts>.fact-card:nth-child(4),
.quick-facts>.fact-card:nth-child(5),
.quick-facts>.fact-card:nth-child(6) {
  border-right: 1px solid #cae6e3 !important
}

.quick-facts>.fact-card:nth-child(n+4) {
  height: 100px;
  min-height: 100px !important
}

.operator-card>small {
  margin-bottom: 12px
}

.operator-card img {
  width: 90px;
  height: 34px;
  margin-bottom: 8px
}

.pickup-lines {
  grid-template-columns: minmax(0, 1fr) auto
}

.pickup-lines>span {
  border-radius: 11px
}

.package-selector {
  display: block;
  padding: 15px 17px
}

.package-selector legend {
  padding: 0 7px
}

.package-selector legend strong {
  display: none
}

.package-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 220px));
  gap: 8px;
  margin-top: 7px
}

.package-choice {
  height: 48px;
  padding: 0 14px;
  display: flex;
  align-items: center
}

.package-choice.active {
  padding: 0 13px
}

.package-choice small {
  display: none
}

.package-choice span {
  font-size: 12px
}

.experience-description-section>p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75
}

.desktop-cart-card {
  display: block;
  padding: 22px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(63, 51, 80, .1)
}

.desktop-cart-card h3 {
  font-size: 17px;
  margin: 8px 0
}

.desktop-cart-card p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55
}

.desktop-cart-card .cart-open {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 17px;
  padding: 13px;
  border: 0;
  border-radius: 12px;
  background: var(--coral);
  color: white;
  font-weight: 800;
  cursor: pointer
}

.desktop-cart-card .cart-open svg {
  width: 16px;
  height: 16px
}

.cart-sheet[hidden] {
  display: none
}

.cart-sheet {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.cart-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(32, 25, 39, .6);
  backdrop-filter: blur(4px)
}

.cart-sheet-panel {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(820px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px 30px 30px;
  background: #fff;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -25px 70px #0003
}

.sheet-handle {
  width: 48px;
  height: 4px;
  border-radius: 5px;
  background: #d6d0d8;
  margin: -12px auto 18px
}

.sheet-close {
  position: absolute;
  right: 22px;
  top: 18px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #f4f2f5;
  font-size: 22px;
  cursor: pointer
}

.cart-sheet-panel h2 {
  font-size: 24px;
  margin: 5px 0 20px
}

.sheet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.sheet-grid .cart-section {
  margin: 0
}

.sheet-grid .cart-price {
  grid-column: span 2
}

.cart-sheet .cart-submit {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 16px auto 0
}

.mobile-cart {
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom))
}

.mobile-prices {
  display: flex;
  gap: 7px
}

.mobile-prices>span {
  min-width: 74px;
  padding: 7px 9px;
  border-radius: 10px
}

.mobile-prices .adult-price {
  background: #e9f8f6
}

.mobile-prices .child-price {
  background: #fff0ea
}

.mobile-prices small {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em
}

.mobile-prices strong {
  font-size: 11px
}

.mobile-cart .cart-open {
  flex: 0 0 auto;
  width: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 15px;
  border: 0;
  border-radius: 11px;
  background: var(--coral);
  color: white;
  font-weight: 800;
  white-space: nowrap
}

.mobile-cart .cart-open svg {
  width: 16px;
  height: 16px
}

@media(max-width:900px) {
  .content-layout {
    display: block
  }

  .content-column {
    display: block
  }

  .desktop-cart-card {
    display: none !important
  }

  .quick-facts>.fact-card,
  .quick-facts>.fact-card:nth-child(2n),
  .quick-facts>.pickup-card,
  .quick-facts>.operator-card,
  .quick-facts>.fact-card:nth-child(-n+3) {
    height: auto;
    min-height: 112px !important
  }

  .quick-facts>.pickup-card {
    grid-column: span 2 !important;
    min-height: 142px !important
  }

  .quick-facts>.fact-card {
    border-bottom: 1px solid #cae6e3 !important
  }

  .quick-facts>.fact-card:nth-child(odd) {
    border-right: 1px solid #cae6e3 !important
  }

  .quick-facts>.fact-card:nth-child(even) {
    border-right: 0 !important
  }

  .quick-facts>.pickup-card {
    border-right: 0 !important
  }

  .package-options {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:650px) {
  .package-selector {
    padding: 13px
  }

  .package-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: visible
  }

  .package-choice {
    min-width: 0;
    width: 100%;
    height: 44px;
    padding-inline: 10px
  }

  .package-choice.active {
    padding-inline: 9px
  }

  .package-choice.active:after {
    right: 7px;
    top: 12px
  }

  .package-choice span {
    font-size: 11px
  }

  .sheet-grid {
    grid-template-columns: 1fr
  }

  .sheet-grid .cart-price {
    grid-column: auto
  }

  .cart-sheet-panel {
    padding: 24px 16px 20px
  }

  .cart-sheet-panel h2 {
    font-size: 20px
  }

  .mobile-cart {
    display: flex
  }

  .mobile-prices>span {
    min-width: 68px;
    padding: 6px 8px
  }

  .mobile-cart .cart-open {
    padding: 11px 12px;
    font-size: 12px
  }
}

@media(max-width:900px) {

  .quick-facts>.fact-card:nth-child(2),
  .quick-facts>.fact-card:nth-child(4),
  .quick-facts>.fact-card:nth-child(6) {
    border-right: 1px solid #cae6e3 !important
  }

  .quick-facts>.fact-card:nth-child(3),
  .quick-facts>.fact-card:nth-child(5),
  .quick-facts>.fact-card:nth-child(7) {
    border-right: 0 !important
  }
}

/* Six-option example and consistent readable typography */
body {
  font-size: 16px
}

.breadcrumbs {
  font-size: 13px
}

.eyebrow,
.rating-line {
  font-size: 14px
}

.section-kicker {
  font-size: 11px
}

.section-heading p {
  font-size: 14px;
  line-height: 1.6
}

.package-selector legend span {
  font-size: 11px
}

.package-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 720px
}

.package-choice span {
  font-size: 13px
}

.quick-facts .fact-card p>small,
.operator-card>small {
  font-size: 11px;
  line-height: 1.3
}

.quick-facts .fact-card p>strong,
.operator-card>strong {
  font-size: 16px
}

.pickup-lines>span {
  font-size: 12px;
  line-height: 1.5
}

.experience-description-section>p {
  font-size: 16px
}

.highlights-grid article>h3 {
  font-size: 13px
}

.route-label {
  font-size: 11px
}

.route-content h3 {
  font-size: 17px
}

.route-content p {
  font-size: 14px
}

.detail-tabs button {
  font-size: 13px
}

.panel-intro h3 {
  font-size: 16px
}

.panel-intro p {
  font-size: 13px
}

.modern-item-grid>span,
.bring-grid>span {
  font-size: 13px
}

.important-hero p {
  font-size: 13px
}

.important-grid strong {
  font-size: 13px
}

.important-grid p {
  font-size: 13px
}

.not-suitable-warning>span {
  font-size: 10px
}

.not-suitable-warning strong {
  font-size: 12px
}

.weather-notice p {
  font-size: 14px
}

.transport-card p {
  font-size: 13px
}

.area-tags span {
  font-size: 11px
}

.policy-card p {
  font-size: 13px
}

.desktop-cart-card p {
  font-size: 13px
}

.cart-section>label:first-child {
  font-size: 15px
}

.service-option {
  font-size: 12px
}

.faq-item button {
  font-size: 15px
}

.faq-answer p {
  font-size: 14px
}

@media(max-width:650px) {
  body {
    font-size: 16px
  }

  .package-options {
    grid-template-columns: 1fr 1fr;
    max-width: none
  }

  .package-choice span {
    font-size: 12px
  }

  .quick-facts .fact-card p>small,
  .operator-card>small {
    font-size: 10px
  }

  .quick-facts .fact-card p>strong,
  .operator-card>strong {
    font-size: 15px
  }

  .pickup-lines>span {
    font-size: 11px
  }

  .section-heading p {
    font-size: 14px
  }

  .highlights-grid article>h3 {
    font-size: 12px
  }

  .route-content p {
    font-size: 13px
  }

  .modern-item-grid>span,
  .bring-grid>span {
    font-size: 12px
  }

  .faq-item button {
    font-size: 14px
  }

  .faq-answer p {
    font-size: 13px
  }
}

.state-label {
  font-size: 10px
}

.cart-card-kicker {
  font-size: 11px
}

.video-trigger>span {
  font-size: 11px
}

.mobile-prices small {
  font-size: 9px
}

.mobile-prices strong {
  font-size: 13px
}

/* Tour information board — independent replacement component */
.tour-info-board {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
  padding: 10px;
  border-radius: 24px;
  background: #f0faf9;
  box-shadow: 0 18px 42px rgba(1, 165, 166, .08)
}

.tour-info-board.no-boat,
.tour-info-board:has(#dyn-boat-overview[style*="display: none"]),
.tour-info-board:has(#dyn-boat-overview[style*="display:none"]) {
  grid-template-columns: 2fr 1fr
}

.tour-info-board.no-operator,
.tour-info-board:has(#dyn-operator-overview[style*="display: none"]),
.tour-info-board:has(#dyn-operator-overview[style*="display:none"]) {
  grid-template-columns: 2fr 1fr
}

.tour-info-board.no-boat.no-operator,
.tour-info-board:has(#dyn-boat-overview[style*="display: none"]):has(#dyn-operator-overview[style*="display: none"]),
.tour-info-board:has(#dyn-boat-overview[style*="display:none"]):has(#dyn-operator-overview[style*="display:none"]) {
  grid-template-columns: 1fr
}

.tour-info-board article,
.trip-stats {
  border-radius: 16px;
  background: #fff
}

.pickup-overview {
  padding: 20px 22px
}

.info-label {
  display: block;
  color: #43847c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.3
}

.pickup-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 9px
}

.pickup-title>strong {
  font: 800 21px Manrope, sans-serif
}

.pickup-title>span {
  padding: 6px 10px;
  border-radius: 99px;
  background: #fff0ea;
  color: #ad4b2e;
  font-size: 12px;
  font-weight: 700
}

.pickup-overview>p {
  max-width: 560px;
  margin: 12px 0 0;
  padding: 11px 13px;
  border-radius: 11px;
  background: #e9f7f5;
  color: #346b64;
  font-size: 13px;
  line-height: 1.55
}

.operator-overview,
.boat-overview {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 20px
}

.operator-overview {
  background: #fff8f4 !important
}

.operator-overview img {
  display: block;
  width: 96px;
  height: 38px;
  object-fit: contain;
  object-position: left center;
  margin: 13px 0 7px
}

.operator-overview>strong,
.boat-overview>strong {
  font: 700 15px Manrope, sans-serif
}

.boat-overview {
  background: #f7f5f9 !important
}

.boat-overview>strong {
  margin-top: 13px;
  font-size: 17px
}

.trip-stats {
  grid-column: 1/-1;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden
}

.trip-stats>div {
  flex: 1 1 0px;
  min-width: 130px;
  padding: 17px 20px;
  border-inline-start: 1px solid #d8ebe8;
}

.trip-stats>div:first-child,
.trip-stats>div:first-of-type {
  border-inline-start: 0 !important;
}

.trip-stats>div[style*="display: none"],
.trip-stats>div[style*="display:none"],
.trip-stats>div.hidden-row {
  display: none !important;
}

.trip-stats strong {
  display: block;
  margin-top: 7px;
  font: 700 15px/1.4 Manrope, sans-serif;
  color: var(--ink)
}

@media(max-width:900px) {
  .tour-info-board {
    grid-template-columns: 1fr 1fr
  }

  .pickup-overview {
    grid-column: 1/-1
  }

  .operator-overview,
  .boat-overview {
    min-height: 132px
  }

  .trip-stats {
    grid-column: 1/-1
  }
}

@media(max-width:650px) {
  .tour-info-board {
    gap: 7px;
    padding: 7px;
    border-radius: 18px
  }

  .pickup-overview {
    padding: 17px
  }

  .pickup-title>strong {
    font-size: 19px
  }

  .pickup-title>span {
    font-size: 11px
  }

  .pickup-overview>p {
    font-size: 13px;
    padding: 10px 11px
  }

  .operator-overview,
  .boat-overview {
    min-height: 126px;
    padding: 15px
  }

  .operator-overview img {
    width: 82px;
    height: 40px;
    margin-top: 11px
  }

  .operator-overview>strong {
    font-size: 14px
  }

  .boat-overview>strong {
    font-size: 15px
  }

  .info-label {
    font-size: 10px
  }

  .trip-stats>div {
    padding: 15px
  }

  .trip-stats strong {
    font-size: 14px
  }
}

/* Shared top baseline for the three primary tour facts */
.operator-overview,
.boat-overview {
  justify-content: flex-start
}

/* Booking panel consistency fixes */
.operator-overview,
.boat-overview {
  background: #fff !important
}

.cart-section>.cart-section-label {
  display: block;
  margin-bottom: 13px;
  font: 700 15px Manrope, sans-serif
}

.cart-package-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px
}

.cart-package-choice,
.custom-dropdown-choice {
  position: relative;
  min-height: 48px;
  padding: 9px 38px 9px 10px;
  border: 1px solid #dedade;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s
}

.cart-package-choice:hover,
.custom-dropdown-choice:hover {
  border-color: #ffad91;
  background: #fffaf8
}

.cart-package-choice.active,
.custom-dropdown-choice.active {
  border: 2px solid var(--coral);
  padding: 8px 37px 8px 9px;
  background: #fff7f3;
  box-shadow: 0 5px 14px rgba(255, 112, 67, .1)
}

.cart-package-choice.active:after,
.custom-dropdown-choice.active:after {
  content: "✓";
  position: absolute;
  right: 7px;
  top: 7px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: var(--coral);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1
}

.cart-package-choice:focus-visible,
.custom-dropdown-choice:focus-visible {
  outline: 3px solid rgba(1, 165, 166, .24);
  outline-offset: 2px
}

.cart-field input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer
}

.cart-field input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0
}

.service-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 2px solid var(--coral);
  border-radius: 4px;
  background: #fff;
  cursor: pointer
}

.service-option input[type="checkbox"]:checked {
  background: var(--coral);
  border-color: var(--coral)
}

.service-option input[type="checkbox"]:checked:after {
  content: "✓";
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1
}

.service-option input[type="checkbox"]:focus-visible {
  outline: 3px solid rgba(1, 165, 166, .24);
  outline-offset: 2px
}

@media(max-width:650px) {
  .cart-package-options {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .cart-package-choice {
    min-height: 46px;
    font-size: 11px
  }
}

@media(min-width:651px) {
  .sheet-grid .cart-package-section {
    grid-row: span 2;
    display: flex;
    flex-direction: column
  }

  .cart-package-section .cart-package-options {
    flex: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(58px, 1fr))
  }

  .cart-package-section .cart-package-choice {
    min-height: 58px;
    font-size: 13px
  }
}

.traveller-row>span {
  grid-template-columns: auto auto;
  align-items: baseline;
  justify-content: start;
  column-gap: 7px
}

.traveller-row>span>b {
  grid-column: 1/-1
}

.traveller-row>span .age-range {
  display: inline;
  margin: 0;
  color: #00a6a6;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap
}

.age-policy-note {
  margin: 12px 0 0;
  padding: 10px 13px;
  border: 1px solid rgba(251, 93, 96, .16);
  border-radius: 10px;
  background: #fff8e1;
  color: #fb5d60;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center
}

.checkout-step-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 520px;
  margin: 10px auto 0;
  color: #008889;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center
}

.checkout-step-note:before,
.checkout-step-note:after {
  content: "";
  flex: 1;
  height: 1px;
  background: #c9e9e7
}

@media(max-width:650px) {
  .traveller-row>span .age-range {
    font-size: 8px
  }

  .checkout-step-note {
    font-size: 11px
  }

  .checkout-step-note:before,
  .checkout-step-note:after {
    display: none
  }
}

/* Package selections use the orange selected state without a checkmark. */
.package-choice.active:after,
.cart-package-choice.active:after {
  display: none !important
}

.cart-package-choice {
  padding: 9px 12px
}

.cart-package-choice.active {
  padding: 8px 11px
}

.icon-button {
  display: grid;
  place-items: center
}

/* Readability improvements for labels and supporting content */
.section-kicker {
  font-size: 17px
}

.info-label {
  font-size: 15px
}

.package-selector legend span {
  font-size: 13px
}

.section-heading p,
.experience-description-section>p {
  font-size: 16px;
  line-height: 1.7
}

.highlights-grid article>h3 {
  font-size: 16px;
  line-height: 1.45
}

.route-label {
  font-size: 16px
}

.route-content h3 {
  font-size: 18px
}

.route-content p {
  font-size: 16px;
  line-height: 1.65
}

.detail-tabs button {
  font-size: 15px
}

.panel-intro h3 {
  font-size: 18px
}

.panel-intro p,
.important-hero p {
  font-size: 16px;
  line-height: 1.6
}

.modern-item-grid>span,
.bring-grid>span {
  font-size: 15px
}

.important-grid strong {
  font-size: 15px
}

.important-grid p {
  font-size: 15px;
  line-height: 1.6
}

.not-included h3 {
  font-size: 16px
}

.not-included p {
  font-size: 15px;
  line-height: 1.6
}

.not-suitable-warning>span {
  font-size: 13px
}

.not-suitable-warning h3 {
  font-size: 18px
}

.not-suitable-warning strong,
.suitability-grid>span {
  font-size: 14px
}

.weather-notice h3 {
  font-size: 18px
}

.weather-notice p {
  font-size: 16px;
  line-height: 1.65
}

.state-label {
  font-size: 14px
}

.transport-card h3 {
  font-size: 18px
}

.transport-card p {
  font-size: 16px;
  line-height: 1.6
}

.transport-card a,
.area-tags span {
  font-size: 14px
}

.policy-card h3 {
  font-size: 18px
}

.policy-card p {
  font-size: 16px;
  line-height: 1.6
}

.reviews-grid article>p {
  font-size: 16px;
  line-height: 1.65
}

.review-top small {
  font-size: 14px
}

.faq-item button {
  font-size: 17px
}

.faq-answer p {
  font-size: 16px;
  line-height: 1.65
}

.pickup-overview>p {
  font-size: 15px;
  line-height: 1.65
}

.operator-overview>strong,
.boat-overview>strong,
.trip-stats strong {
  font-size: 16px
}

.service-option {
  font-size: 14px
}

.age-policy-note,
.checkout-step-note {
  font-size: 14px
}

@media(max-width:650px) {
  .section-kicker {
    font-size: 14px
  }

  .info-label {
    font-size: 12px
  }

  .package-selector legend span {
    font-size: 12px
  }

  .section-heading p,
  .experience-description-section>p {
    font-size: 16px
  }

  .highlights-grid article>h3 {
    font-size: 14px
  }

  .route-label {
    font-size: 15px
  }

  .route-content h3 {
    font-size: 17px
  }

  .route-content p {
    font-size: 15px
  }

  .detail-tabs button {
    font-size: 14px
  }

  .modern-item-grid>span,
  .bring-grid>span {
    font-size: 14px
  }

  .transport-card h3,
  .policy-card h3 {
    font-size: 17px
  }

  .transport-card p,
  .policy-card p,
  .weather-notice p,
  .faq-answer p,
  .reviews-grid article>p {
    font-size: 15px
  }

  .faq-item button {
    font-size: 16px
  }

  .age-policy-note,
  .checkout-step-note {
    font-size: 14px
  }
}

/* Transportation states share one consistent icon and content alignment */
.transport-card {
  align-items: flex-start
}

.transport-icon .fa-solid {
  font-size: 20px;
  line-height: 1
}

.transport-card.excluded {
  align-items: flex-start;
  align-self: start;
  padding: 16px 18px;
  background: #fff7f7;
  border-color: #fb5d60
}

.transport-card.excluded>div {
  align-self: auto
}

.transport-card.excluded .transport-icon {
  display: grid;
  place-items: center;
  background: #fb5d60;
  color: #fff;
  box-shadow: 0 8px 18px rgba(251, 93, 96, .2)
}

.transport-card.excluded .state-label {
  color: #fb5d60
}

.transport-card.excluded h3 {
  color: #3f3350
}

.transport-card.paid {
  background: #f1fbf8;
  border-color: #c5eadf
}

.transport-card.paid .state-label {
  color: #329184
}

.transport-card.private {
  align-self: start;
  padding: 16px 18px;
  background: linear-gradient(135deg, #fff8dc 0%, #f1f2f4 52%, #fff0b8 100%);
  border-color: #d6bd74
}

.transport-card.private .transport-icon {
  background: linear-gradient(135deg, #d4af37 0%, #eef0f2 52%, #b99023 100%);
  color: #473919;
  box-shadow: 0 8px 20px rgba(168, 133, 35, .2)
}

.transport-card.private h3 {
  margin-bottom: 4px
}

.transport-card.private p {
  font-size: 14px;
  line-height: 1.5
}

/* Clearer rounded mobile booking bar */
@media(max-width:650px) {
  .mobile-cart {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px calc(14px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
    border: 1px solid #dce9e7;
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 -12px 32px rgba(63, 51, 80, .14)
  }

  .mobile-prices {
    flex: 1;
    gap: 0;
    padding-inline: 2px
  }

  .mobile-prices>span {
    flex: 1;
    min-width: 0;
    padding: 3px 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none
  }

  .mobile-prices>span+span {
    border-inline-start: 1px solid #d8e5e3
  }

  .mobile-prices .adult-price,
  .mobile-prices .child-price {
    background: transparent;
    border-color: transparent
  }

  .mobile-prices .adult-price small {
    color: #018f90
  }

  .mobile-prices .child-price small {
    color: #dc5b36
  }

  .mobile-prices small {
    font-size: 9px;
    line-height: 1.1
  }

  .mobile-prices strong {
    font-size: 14px;
    line-height: 1.2
  }

  .mobile-prices .adult-price strong {
    color: #017f80
  }

  .mobile-prices .child-price strong {
    color: #d95734
  }

  .mobile-cart .cart-open {
    padding: 14px 18px;
    border-radius: 15px;
    font-size: 14px;
    box-shadow: 0 8px 20px rgba(255, 112, 67, .25)
  }

}

/* Booking panel — clear four-step flow */
.booking-panel {
  background: #fffaf7
}

.booking-sheet-header {
  padding: 0 4px
}

.booking-sheet-header h2 {
  margin: 3px 0 14px;
  font-size: 29px
}

.booking-flow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start
}

.booking-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px
}

.step-date,
.step-package,
.step-extras,
.step-guests {
  grid-area: auto
}

.booking-column-guests {
  align-self: start
}

.booking-flow .booking-step {
  margin: 0;
  padding: 15px;
  border: 1px solid #e6e1e6;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(63, 51, 80, .045)
}

.booking-step-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px
}

.step-number {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e5f7f5;
  color: #018f90;
  font-size: 15px;
  font-weight: 900
}

.booking-step-heading small {
  display: block;
  margin-bottom: 2px;
  color: #01a5a6;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase
}

.booking-step-heading h3 {
  margin: 0;
  color: #3f3350;
  font: 750 19px/1.25 Manrope, sans-serif
}

.booking-step .cart-field {
  min-height: 47px;
  padding: 0 13px;
  border: 1px solid #e2dde2;
  border-radius: 12px;
  background: #faf9fa
}

.booking-step .cart-field input {
  font-size: 17px
}

.booking-flow .cart-package-section {
  display: block
}

.step-package .cart-package-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: none;
  gap: 7px
}

.step-package .cart-package-choice {
  min-height: 47px;
  padding: 8px 10px;
  font-size: 12px;
  text-align: start
}

.step-package .cart-package-choice.active {
  padding: 7px 9px
}

.step-extras .service-option {
  min-height: 50px;
  padding: 11px 13px;
  font-size: 15px
}

.step-guests {
  padding-bottom: 13px !important
}

.step-guests .traveller-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px;
  border: 0;
  background: transparent;
}

.step-guests .traveller-row+.traveller-row {
  margin: 0;
  padding: 10px 2px;
  border: 0;
  border-top: 1px solid #ece8ec;
}

.step-guests .traveller-row>span {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Reference Design Alignment for Guests Step & Traveller Rows */
.step-guests {
  padding-bottom: 13px !important;
}

.step-guests .traveller-row {
  display: flex;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 7px 1px !important;
  border: 0 !important;
  background: transparent !important;
}

.step-guests .traveller-row[style*="display: none"],
.step-guests .traveller-row[style*="display:none"],
.step-guests .traveller-row.hidden-row {
  display: none !important;
}

.step-guests .traveller-row+.traveller-row {
  margin: 0 !important;
  padding: 7px 1px !important;
  border: 0 !important;
  border-top: 1px solid #ece8ec !important;
}

.step-guests .traveller-row>span {
  display: grid !important;
  grid-template-columns: auto auto !important;
  align-items: baseline !important;
  justify-content: start !important;
  column-gap: 7px !important;
}

.step-guests .traveller-row>span strong {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #3f3350 !important;
}

.step-guests .traveller-row>span .age-range {
  display: inline !important;
  margin: 0 !important;
  color: #00a6a6 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

.step-guests .traveller-row>span b {
  grid-column: 1 / -1 !important;
  margin-top: 2px !important;
  font-size: 12px !important;
  color: #ff7043 !important;
  font-weight: 700 !important;
}

/* Reference Design Quantity Selector Controls */
.step-guests .quantity,
.quantity-buttons,
.cart-sheet .quantity {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex-shrink: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.step-guests .quantity button,
.quantity-buttons button,
.cart-sheet .quantity button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 31px !important;
  height: 31px !important;
  min-width: 31px !important;
  min-height: 31px !important;
  border: 1px solid #d4d0d5 !important;
  border-radius: 50% !important;
  background-color: #ffffff !important;
  color: #3f3350 !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  visibility: visible !important;
  opacity: 1 !important;
  box-shadow: none !important;
  transition: all 0.15s ease-in-out !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.step-guests .quantity button:hover,
.quantity-buttons button:hover,
.cart-sheet .quantity button:hover {
  background-color: #f4f2f5 !important;
  border-color: #3f3350 !important;
  color: #3f3350 !important;
}

.step-guests .quantity button:active,
.quantity-buttons button:active,
.cart-sheet .quantity button:active {
  transform: scale(0.92) !important;
}

.step-guests .quantity strong,
.quantity-buttons strong,
.cart-sheet .quantity strong {
  display: inline-block !important;
  min-width: 18px !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #3f3350 !important;
}

/* Datepicker positioning attached directly under date field */
.cart-sheet-panel,
.booking-flow,
.booking-column,
.step-date,
.cart-field,
.select_datepicker {
  overflow: visible !important;
}

.cart-field,
.select_datepicker {
  position: relative !important;
}

.cart-field #ui-datepicker-div,
.select_datepicker #ui-datepicker-div {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  right: auto !important;
  z-index: 9999999 !important;
  margin: 0 !important;
  transform: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

html[dir="rtl"] .cart-field #ui-datepicker-div,
html[dir="rtl"] .select_datepicker #ui-datepicker-div,
body.rtl .cart-field #ui-datepicker-div,
body.rtl .select_datepicker #ui-datepicker-div {
  left: auto !important;
  right: 0 !important;
}

.step-guests .traveller-row>span b {
  margin-top: 2px;
}

.step-guests .total-row {
  margin: 7px 0 0;
  padding: 10px 12px;
  border: 1px solid #cde9e5;
  background: #f1faf8;
  color: #3f3350;
  box-shadow: inset 4px 0 0 #f1faf8
}

.step-guests .age-policy-note {
  margin: 7px 0 0;
  padding: 7px 10px;
  font-size: 14px
}

.booking-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 12px
}

.booking-actions .cart-submit {
  width: min(420px, 100%);
  margin: 0;
  padding: 15px
}

.booking-actions .checkout-step-note {
  width: min(520px, 100%);
  margin: 6px 0 0;
  font-size: 14px
}

@media(min-width:901px) {
  .booking-panel {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(1120px, calc(100% - 32px));
    max-height: calc(100vh - 24px);
    padding: 20px 22px 15px;
    border-radius: 26px;
    overflow-y: auto
  }

  .booking-panel .sheet-handle {
    display: none
  }

  .booking-panel .sheet-close {
    top: 18px
  }
}

@media(max-width:900px) {
  .booking-panel {
    top: auto;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    max-height: 92vh;
    padding: 24px 20px 18px;
    border-radius: 24px 24px 0 0;
    overflow-y: auto
  }

  .booking-panel .sheet-handle {
    display: block
  }

  .booking-flow {
    grid-template-columns: 1fr
  }

  .booking-column {
    gap: 11px
  }
}

@media(max-width:650px) {
  .booking-panel {
    padding: 22px 14px 16px
  }

  .booking-sheet-header h2 {
    font-size: 22px;
    margin-bottom: 12px
  }

  .booking-flow .booking-step {
    padding: 13px;
    border-radius: 15px
  }

  .booking-step-heading {
    margin-bottom: 9px
  }

  .step-number {
    flex-basis: 31px;
    width: 31px;
    height: 31px
  }

  .booking-step-heading h3 {
    font-size: 15px
  }

  .step-package .cart-package-options {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .step-package .cart-package-choice {
    min-height: 45px;
    font-size: 12px
  }

  .step-guests .traveller-row {
    padding: 9px 1px
  }

  .booking-actions {
    position: sticky;
    bottom: -16px;
    margin: 12px -14px -16px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 250, 247, .97);
    backdrop-filter: blur(10px)
  }
}

/* Cohesive tour facts, balanced transport states, and booking summary */
.tour-info-board {
  grid-template-columns: 2fr 1fr 1fr;
  gap: 10px;
  padding: 10px;
  overflow: visible;
  border: 0;
  border-radius: 24px;
  background: #f0faf9;
  box-shadow: 0 18px 42px rgba(1, 165, 166, .08)
}

.tour-info-board article,
.trip-stats {
  border-radius: 16px;
  background: #fff !important
}

.pickup-overview {
  padding: 16px 18px
}

.pickup-title {
  margin-top: 9px
}

.pickup-title>strong {
  font-size: 21px
}

.pickup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px
}

.pickup-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25
}

.pickup-chip-lobby {
  border-color: #ffd1c2;
  background: #fff2ed;
  color: #a94628
}

.pickup-estimate-details {
  position: relative;
  display: inline-block
}

.pickup-estimate-details summary {
  list-style: none;
  cursor: pointer;
  user-select: none
}

.pickup-estimate-details summary::-webkit-details-marker {
  display: none
}

.pickup-chip-estimate {
  gap: 7px;
  border-color: #bfe7e2;
  background: #eaf8f6;
  color: #21756a
}

.pickup-info-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #01a5a6;
  color: #fff;
  font: 800 11px/1 Manrope, sans-serif
}

.pickup-estimate-details summary:hover,
.pickup-estimate-details summary:focus-visible {
  border-color: #01a5a6;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(1, 165, 166, .12)
}

.pickup-estimate-details[open] .pickup-info-icon {
  background: #ff7043
}

.pickup-time-note {
  position: absolute;
  z-index: 8;
  inset-inline-start: 0;
  top: calc(100% + 8px);
  width: min(320px, calc(100vw - 64px));
  padding: 11px 13px;
  border: 1px solid #bfe7e2;
  border-radius: 12px;
  background: #fff;
  color: #346b64;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
  box-shadow: 0 14px 30px rgba(63, 51, 80, .14)
}

.operator-overview,
.boat-overview {
  min-height: 0;
  padding: 16px 18px;
  justify-content: flex-start
}

.operator-overview img {
  width: 88px;
  height: 40px;
  margin: 9px 0 4px
}

.operator-overview>strong {
  font-size: 16px
}

.boat-overview>strong {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.4
}

.trip-stats>div {
  padding: 17px 20px
}

.trip-stats strong {
  margin-top: 7px;
  font-size: 16px
}

.transport-variants {
  display: block;
  width: 100%
}
.transport-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 14px;
  width: 100%
}

.transport-cards-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: 100%
}

.transport-cards-row.has-paid,
.transport-cards-row:has(.paid) {
  grid-template-columns: 1fr 1fr
}

.transport-card {
  width: 100%;
  min-width: 0;
  padding: 20px;
  gap: 14px
}

.transport-card.excluded,
.transport-card.private {
  align-self: stretch
}

.transport-card h3 {
  font-size: 17px;
  line-height: 1.35
}

.transport-card h3 strong {
  font-weight: 800;
  color: var(--ink)
}
.transport-card p {
  font-size: 15px;
  line-height: 1.55
}

.area-tags span {
  font-size: 12px
}

.step-guests .total-row {
  border: 1px solid #cde9e5;
  background: #f1faf8;
  color: #3f3350;
  box-shadow: inset 4px 0 0 #f1faf8
}

.step-guests .total-row strong:last-child {
  color: #e95f35
}

@media(min-width:901px) {
  h1 {
    font-size: clamp(34px, 3vw, 38px)
  }

  h2 {
    font-size: clamp(29px, 2.5vw, 34px)
  }

  .content-layout {
    padding-top: 56px;
    padding-bottom: 76px
  }

  .content-column>section {
    padding-bottom: 54px;
    margin-bottom: 44px
  }

  .section-heading {
    margin-bottom: 21px
  }
}

@media(max-width:900px) {
  .tour-info-board {
    grid-template-columns: 1fr 1fr
  }

  .pickup-overview {
    grid-column: 1/-1
  }

  .operator-overview,
  .boat-overview {
    min-height: 132px
  }

  .trip-stats {
    grid-column: 1/-1
  }

  .transport-variants {
    grid-template-columns: 1fr
  }
  .transport-cards-row.has-paid,
  .transport-cards-row:has(.paid) {
    grid-template-columns: 1fr
  }
}

@media(max-width:650px) {
  .tour-info-board {
    gap: 7px;
    padding: 7px;
    border-radius: 18px
  }

  .pickup-overview {
    padding: 15px
  }

  .pickup-chips {
    gap: 6px
  }

  .pickup-chip {
    font-size: 11px
  }

  .pickup-time-note {
    width: min(286px, calc(100vw - 64px));
    font-size: 12px
  }

  .operator-overview,
  .boat-overview {
    min-height: 112px;
    padding: 14px
  }

  .operator-overview img {
    width: 78px;
    height: 28px
  }

  .boat-overview>strong {
    font-size: 15px
  }

  .trip-stats>div {
    padding: 15px
  }

  .transport-card {
    padding: 17px
  }
}

/* Compact package choices; current prices live in the booking rail. */
.package-choice {
  height: 48px;
  min-height: 48px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 14px
}

.package-choice.active {
  padding: 0 13px
}

.package-choice>span {
  font-size: 13px;
  line-height: 1.3
}

.package-choice>small {
  display: none !important
}

.cart-package-choice {
  display: flex;
  min-height: 50px !important;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start
}

.cart-package-choice>span {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3
}

.cart-package-choice>small {
  display: none !important
}

@media(min-width:901px) {
  .package-options {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

@media(max-width:650px) {
  .package-choice {
    height: 46px;
    min-height: 46px;
    padding-inline: 10px
  }

  .package-choice.active {
    padding-inline: 9px
  }

  .cart-package-choice {
    min-height: 46px !important
  }
}

/* Screen-safe pickup information: hover on desktop, tap/focus on touch. */
.pickup-overview {
  position: relative
}

.pickup-estimate-details {
  position: static;
  display: inline-block
}

.pickup-estimate-details>.pickup-chip {
  cursor: help
}

.pickup-time-note {
  display: none;
  position: absolute;
  z-index: 12;
  inset-inline-start: 12px;
  inset-inline-end: 12px;
  top: calc(100% - 4px);
  width: auto;
  max-width: none
}

@media(min-width:651px) and (hover:hover) {

  .pickup-estimate-details:hover .pickup-time-note,
  .pickup-estimate-details>.pickup-chip:focus-visible+.pickup-time-note {
    display: block
  }
}

@media(max-width:650px), (hover:none) {
  .pickup-estimate-details:focus-within .pickup-time-note {
    display: block
  }
}

/* Persistent desktop booking rail with the selected package prices. */
.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 24px;
  align-items: start
}

.page-main {
  min-width: 0
}

.page-main>.content-column {
  padding-top: 56px;
  padding-bottom: 76px
}

.desktop-cart-card {
  position: sticky;
  top: 96px;
  padding: 22px;
  border: 1px solid #dfe9e7;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(63, 51, 80, .12)
}

.desktop-selected-package {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 13px 14px;
  border-radius: 12px;
  background: #f1faf8
}

.desktop-selected-package small {
  color: #43847c;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .1em
}

.desktop-selected-package strong {
  font: 500 16px/1.35 Manrope, sans-serif;
  color: #3f3350
}

.desktop-live-prices {
  display: flex;
  gap: 8px;
  margin-top: 10px
}

.desktop-live-prices>div {
  flex: 1 1 0;
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid #e6e1e6;
  border-radius: 11px;
  background: #fff
}

.desktop-live-prices>div[style*="display: none"],
.desktop-live-prices>div.hidden-row {
  display: none !important;
}

.desktop-live-prices > div > span {
  color: #706a78;
  font-size: 11px;
  font-weight: 700
}

.desktop-live-prices strong {
  color: #3f3350;
  font: 800 15px/1.25 Manrope, sans-serif
}

.desktop-live-prices>div:first-child strong {
  color: #018f90
}

.desktop-live-prices>div:last-child strong {
  color: #d95734
}

.desktop-cart-card .cart-open {
  margin-top: 14px
}

@media(min-width:651px) and (max-width:999px) {
  .page-layout {
    display: block
  }

  .desktop-cart-card {
    display: none !important
  }

  .mobile-cart {
    position: fixed;
    z-index: 45;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 20px calc(11px + env(safe-area-inset-bottom));
    border-top: 1px solid #dce9e7;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 -10px 28px rgba(63, 51, 80, .12);
    backdrop-filter: blur(10px)
  }

  .mobile-cart .cart-open {
    width: auto;
    padding: 13px 20px
  }

}

@media(max-width:650px) {
  .page-layout {
    display: block
  }

  .page-main>.content-column {
    padding-top: 42px;
    padding-bottom: 56px
  }
}

/* Specific WooCommerce form adjustments for tour pages */
.single-tour-new-design form.cart {
  margin-bottom: 0;
}

.single-tour-new-design .cart-sheet input[type="date"] {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 15px;
}

.single-tour-new-design .cart-sheet .cart-submit {
  border: 0;
  border-radius: 13px;
  background: var(--coral);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(255, 112, 67, .22);
}

.single-tour-new-design .cart-sheet .cart-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* =====================================================
   GALLERY RAIL – VERTICAL SCROLL (desktop, 2-col × N-row)
   DevTools confirmed values:
     - Stage height = 430px
     - Gap = 9px
     - 3 visible rows: row height = (430 - 2×9) / 3 ≈ 137.33px
     - Container height fixed at 430px → 3 rows visible, rest scrollable
   ===================================================== */

/* Desktop: scrollable 2-column vertical rail */
@media(min-width:1000px) {
  .gallery-rail--scrollable {
    /* Force 2-column layout (matches line-32 block baseline) */
    grid-template-columns: 1fr 1fr !important;
    /* Remove the fixed 3-row limit so more rows can be added */
    grid-template-rows: unset !important;
    /* Every row (visible + scrolled) is the same calculated height */
    grid-auto-rows: calc((430px - 2 * 9px) / 3) !important;
    /* ≈ 137.33px */
    /* Exact stage height → shows 3 rows, hides the rest behind scroll */
    height: 430px !important;
    max-height: 430px !important;
    /* Enable vertical scroll; hide horizontal */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* Thin teal scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--teal, #01a5a6) #eef4f3;
    padding-right: 3px;
    /* gap for scrollbar track */
    align-content: start;
  }

  .gallery-rail--scrollable .gallery-thumb {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  .gallery-rail--scrollable .gallery-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }

  .gallery-rail--scrollable::-webkit-scrollbar {
    width: 5px;
  }

  .gallery-rail--scrollable::-webkit-scrollbar-thumb {
    background: var(--teal, #01a5a6);
    border-radius: 99px;
  }

  .gallery-rail--scrollable::-webkit-scrollbar-track {
    background: #eef4f3;
    border-radius: 99px;
  }
}

/* Tablet / mobile: the rail is a horizontal flex → disable scrollable overrides */
@media(max-width:999px) {
  .gallery-rail--scrollable {
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
    grid-auto-rows: unset !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: auto !important;
  }
}

/* Mobile gallery rail & thumbnail refinement */
@media(max-width:650px) {

  .gallery-rail,
  .gallery-rail--scrollable {
    display: flex !important;
    flex-direction: row !important;
    margin: 0 !important;
    padding: 4px 0 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    height: auto !important;
    max-height: none !important;
    grid-auto-rows: unset !important;
    gap: 8px !important;
    scrollbar-width: none !important;
  }

  .gallery-rail::-webkit-scrollbar,
  .gallery-rail--scrollable::-webkit-scrollbar {
    display: none !important;
  }

  .gallery-thumb {
    flex: 0 0 76px !important;
    width: 76px !important;
    height: 76px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    scroll-snap-align: start !important;
  }

  .gallery-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
}

/* Transportation icons FontAwesome 5 & 6 fallback definitions */
.transport-icon i,
.fa-solid,
.fa-van-shuttle,
.fa-shuttle-van,
.fa-baht-sign,
.fa-coins,
.fa-gem {
  font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif !important;
  font-weight: 900 !important;
  font-style: normal !important;
  display: inline-block !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

.fa-van-shuttle:before,
.fa-shuttle-van:before {
  content: "\f5b6" !important;
}

.fa-baht-sign:before,
.fa-coins:before {
  content: "\f51e" !important;
}

.fa-gem:before {
  content: "\f3a5" !important;
}

/* Video trigger positioning inside gallery-stage */
.gallery-stage {
  position: relative !important;
}

.gallery-stage .video-trigger {
  position: absolute !important;
  z-index: 5 !important;
  top: 18px !important;
  left: 18px !important;
}

html[dir="rtl"] .gallery-stage .video-trigger,
body.rtl .gallery-stage .video-trigger {
  left: auto !important;
  right: 18px !important;
}

@media(max-width:650px) {
  .gallery-stage .video-trigger {
    top: 12px !important;
    left: 12px !important;
  }

  html[dir="rtl"] .gallery-stage .video-trigger,
  body.rtl .gallery-stage .video-trigger {
    left: auto !important;
    right: 12px !important;
  }
}

/* RTL Layout Support for Package Options and Information Sections */
html[dir="rtl"] .package-selector,
body.rtl .package-selector,
html[lang="ar"] .package-selector {
  direction: rtl !important;
  text-align: right !important;
}

html[dir="rtl"] .package-selector legend,
body.rtl .package-selector legend {
  direction: rtl !important;
  text-align: right !important;
}

html[dir="rtl"] .package-options,
body.rtl .package-options {
  direction: rtl !important;
}

html[dir="rtl"] .package-choice,
body.rtl .package-choice {
  direction: rtl !important;
  text-align: right !important;
  justify-content: flex-start !important;
}

html[dir="rtl"] .package-choice span,
body.rtl .package-choice span {
  text-align: right !important;
}

html[dir="rtl"] .transport-section,
body.rtl .transport-section,
html[dir="rtl"] .transport-card,
body.rtl .transport-card {
  direction: rtl !important;
  text-align: right !important;
}

html[dir="rtl"] .transport-card,
body.rtl .transport-card {
  flex-direction: row !important;
}

html[dir="rtl"] .transport-card h3,
body.rtl .transport-card h3,
html[dir="rtl"] .transport-card p,
body.rtl .transport-card p {
  text-align: right !important;
}

/* RTL Video Trigger button positioning */
html[dir="rtl"] .video-trigger,
body.rtl .video-trigger,
html[lang="ar"] .video-trigger,
.rtl .video-trigger {
  left: auto !important;
  right: 18px !important;
}

@media(max-width:650px) {

  html[dir="rtl"] .video-trigger,
  body.rtl .video-trigger,
  html[lang="ar"] .video-trigger,
  .rtl .video-trigger {
    left: auto !important;
    right: 12px !important;
  }
}

/* RTL Day Plan (Itinerary Timeline Line & Stop Alignment) */
html[dir="rtl"] .route-list,
body.rtl .route-list,
html[lang="ar"] .route-list,
.rtl .route-list {
  direction: rtl !important;
  padding-left: 0 !important;
  padding-right: 4px !important;
}

html[dir="rtl"] .route-list:before,
body.rtl .route-list:before,
html[lang="ar"] .route-list:before,
.rtl .route-list:before {
  left: auto !important;
  right: 25px !important;
}

html[dir="rtl"] .itinerary-list:before,
body.rtl .itinerary-list:before,
html[lang="ar"] .itinerary-list:before,
.rtl .itinerary-list:before {
  left: auto !important;
  right: 83px !important;
}

html[dir="rtl"] .route-stop,
body.rtl .route-stop,
html[lang="ar"] .route-stop,
.rtl .route-stop {
  direction: rtl !important;
  text-align: right !important;
}

html[dir="rtl"] .route-content,
body.rtl .route-content,
html[lang="ar"] .route-content,
.rtl .route-content {
  text-align: right !important;
}

html[dir="rtl"] .route-content h3,
body.rtl .route-content h3,
html[dir="rtl"] .route-content p,
body.rtl .route-content p,
html[lang="ar"] .route-content h3,
html[lang="ar"] .route-content p,
.rtl .route-content h3,
.rtl .route-content p {
  text-align: right !important;
}

@media(max-width:650px) {

  html[dir="rtl"] .route-list:before,
  body.rtl .route-list:before,
  html[lang="ar"] .route-list:before,
  .rtl .route-list:before {
    left: auto !important;
    right: 21px !important;
  }
}

/* RTL FAQ Answer Margin Fix */
html[dir="rtl"] .faq-item.open .faq-answer p,
body.rtl .faq-item.open .faq-answer p,
html[lang="ar"] .faq-item.open .faq-answer p,
.rtl .faq-item.open .faq-answer p {
  margin-right: 3px !important;
  margin-left: 50px !important;
}

@media(max-width:650px) {

  html[dir="rtl"] .faq-item.open .faq-answer p,
  body.rtl .faq-item.open .faq-answer p,
  html[lang="ar"] .faq-item.open .faq-answer p,
  .rtl .faq-item.open .faq-answer p {
    margin-right: 3px !important;
    margin-left: 35px !important;
  }
}
/* Disabled quantity buttons for fixed capacity categories like Airport Pick Up / Drop */
.quantity-buttons button.disabled-qty,
button.disabled-qty {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
/* Standardize currency symbol display on the left across all components */
[data-live-price],
.woocommerce-Price-amount,
.woocommerce-Price-currencySymbol,
#total-price,
#total_price,
#sub_total_price,
#total_group_discount_price,
#adultPrice,
#childPrice,
#adultRegularPrice,
#childRegularPrice,
.desktop-live-prices strong,
.mobile-prices strong,
.traveller-row b,
.addon-item-row b,
.addon-item-row span b {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  display: inline-block;
}
.woocommerce-Price-currencySymbol,
.currency-symbol {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

#adult_actual_price_data,
#adultRegularPrice,
#child_actual_price_data,
#childRegularPrice {
  color: #01a5a6 !important;
  text-decoration: line-through !important;
}
@media (max-width: 767px) {

    .cart-sheet-panel.booking-panel {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 100%;
        max-height: 100vh !important;
        overflow-y: auto !important;
        padding-top: 50px !important; /* Space for the close icon */
    }

    .booking-sheet-header {
        padding-inline-end: 45px !important;
        margin-bottom: 20px !important;
    }

    .cart.single-tour-cart-form {
        height: auto !important;
        display: block !important;
    }

    .booking-actions {
        padding-bottom: 40px !important;
        margin-top: 20px !important;
    }

}

/* Datepicker Validation Error Styles */
.custom-date-error, .custom-count-error {
  color: #dc2626 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  animation: dateErrorShake 0.4s ease-in-out !important;
}

.jetski-checkout-note {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #dc2626 !important;
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  padding: 5px 10px !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  margin-left: 8px !important;
  vertical-align: middle !important;
  line-height: 1.3 !important;
}

html[dir="rtl"] .jetski-checkout-note,
body.rtl .jetski-checkout-note {
  margin-left: 0 !important;
  margin-right: 8px !important;
}

.mytravel-datepicker.is-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
  background-color: #fff5f5 !important;
  animation: dateErrorShake 0.4s ease-in-out !important;
}

.step-date.is-invalid {
  border: 1.5px solid #f87171 !important;
  border-radius: 14px !important;
  padding: 12px !important;
  background: #fff8f8 !important;
}

@keyframes dateErrorShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}