/* The ship page's price line, jump links, sticky bar and Cruises and Prices section. */

/* Price line under the rating: the headline price, then a button down to the cruises. */

.sx-teaser {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: 12px 0 0;
  padding: 8px 8px 8px 16px;
  border: 1px solid #d6e4ef;
  border-radius: 10px;
  background: #f4f8fb;
}

.sx-teaser-price {
  margin: 0;
  color: #3b4a56;
  font-size: 15px;
  line-height: 1.3;
}

.sx-teaser-price strong {
  margin: 0 2px;
  color: #004a83;
  font-size: 22px;
}

.sx-teaser-unit {
  color: #5b6b78;
  font-size: 13px;
}

.sx-teaser-cta {
  padding: 8px 14px;
  border-radius: 6px;
  background: #004a83;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
}

.sx-teaser-cta::after {
  content: "\203A";
  margin-left: 6px;
}

/* Jump links: a full-width bar under the page header, lined up with the content below. */

.jx {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 30px;
  margin: 18px 0 16px;
  padding: 0;
  border-top: 1px solid #e1e8ee;
  border-bottom: 1px solid #e1e8ee;
}

.jx a {
  display: inline-block;
  margin-bottom: -1px;
  padding: 13px 0 11px;
  border-bottom: 3px solid transparent;
  color: #2b3a46;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
}

.jx a .jx-c {
  margin-left: 4px;
  color: #8a98a3;
  font-size: 13px;
  font-weight: normal;
}

.jx-fixed {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 9000;
  border-bottom: 1px solid #e1e8ee;
  background: #fff;
  box-shadow: 0 6px 18px rgb(0 40 80 / 8%);
  transform: translateY(-110%);
  transition: transform 0.2s ease;
}

.jx-fixed.on {
  transform: none;
}

.jx-fixed .jx-in {
  display: flex;
  align-items: center;
  gap: 24px;
  box-sizing: border-box;
  max-width: 1042px;
  margin: 0 auto;
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
}

.jx-fixed .jx {
  flex: 1;
  flex-wrap: nowrap;
  gap: 0 22px;
  min-width: 0;
  margin: 0;
  padding-right: 28px;
  border: 0;
  overflow: auto hidden;
  scrollbar-width: none;
  mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}

.jx-fixed .jx::-webkit-scrollbar {
  display: none;
}

.jx-fixed .jx-name {
  flex-shrink: 0;
  color: #004a83;
  font-size: 15px;
  font-weight: bold;
  white-space: nowrap;
}

.jx-cta {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.jx-cta span {
  color: #5b6b78;
  font-size: 13px;
}

.jx-cta b {
  color: #004a83;
  font-size: 18px;
}

.jx-cta a {
  padding: 8px 14px;
  border-radius: 6px;
  background: #004a83;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
}

/* The section. */

.sx {
  margin: 40px 0 0;
  color: #1f2a33;
  scroll-margin-top: 70px;
}

[id="deals_content_container"],
[id="tabs_section"] {
  scroll-margin-top: 70px;
}

.sx h2 {
  margin: 0 0 8px;
  color: #004a83;
  font-size: 28px;
  line-height: 1.2;
}

.sx-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0 0 14px;
  padding: 0;
  color: #2e5d3a;
  font-size: 14px;
  list-style: none;
}

.sx-trust li::before {
  content: "\2713";
  margin-right: 7px;
  color: #2e7d32;
  font-weight: bold;
}

.sx-lead {
  max-width: 90ch;
  margin: 0 0 22px;
  color: #3b4a56;
  font-size: 16px;
  line-height: 1.6;
}

.sx-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.sx-pills button {
  padding: 8px 15px;
  border: 1px solid #cfdde8;
  border-radius: 999px;
  background: #fff;
  color: #1f2a33;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.sx-pills button b {
  color: #004a83;
}

.sx-pills button span {
  margin-left: 4px;
  color: #8a98a3;
  font-size: 12px;
}

/* Itinerary cards: the trip on the left, the price in its own column on the right. */

.sx-list {
  display: grid;
  gap: 16px;
}

.sx-it {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  border: 1px solid #dfe7ee;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(16 40 64 / 4%);
}

.sx-info {
  padding: 22px 28px 24px;
}

.sx-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 8px;
  color: #5b6b78;
  font-size: 13px;
}

.sx-tag {
  padding: 3px 9px;
  border-radius: 999px;
  background: #e6f1fa;
  color: #0b5a94;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.sx-it h3 {
  margin: 0 0 6px;
  color: #1f2a33;
  font-size: 20px;
  line-height: 1.3;
}

.sx-route {
  margin: 0 0 18px;
  color: #5b6b78;
  font-size: 14px;
  line-height: 1.5;
}

.sx-dep-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 8px;
  font-size: 13px;
}

.sx-dep-label {
  color: #3b4a56;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sx-dep-range {
  color: #7a8994;
}

.sx-dep-date {
  color: #1f2a33;
  font-size: 15px;
  font-weight: bold;
}

.sx-next {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-next a {
  display: block;
  padding: 6px 12px;
  border: 1px solid #dfe7ee;
  border-radius: 6px;
  background: #fff;
  color: #3b4a56;
  font-size: 13px;
  text-decoration: none;
}

.sx-next a b {
  margin-left: 6px;
  color: #004a83;
}

.sx-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 24px;
  border-left: 1px solid #e8eef3;
  border-radius: 0 12px 12px 0;
  background: #fafcfd;
  text-align: center;
}

.sx-from {
  color: #5b6b78;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sx-price strong {
  margin: 2px 0;
  color: #004a83;
  font-size: 32px;
  line-height: 1.1;
}

.sx-price strong.sx-ask {
  font-size: 22px;
}

.sx-ask a {
  color: inherit;
  text-decoration: underline;
}

.sx-pp {
  color: #5b6b78;
  font-size: 12px;
}

.sx-night {
  margin-top: 4px;
  color: #2e7d32;
  font-size: 13px;
}

.sx-btn {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid #004a83;
  border-radius: 6px;
  background: #fff;
  color: #004a83;
  font: inherit;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.sx-dates {
  grid-column: 1 / -1;
  padding: 18px 28px 22px;
  border-top: 1px solid #e8eef3;
}

.sx-dates ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-dates a {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid #e3eaef;
  border-radius: 6px;
  color: #1f2a33;
  font-size: 13px;
  text-decoration: none;
}

.sx-dates a b {
  color: #004a83;
}

/* Card photo (a port the cruise visits) and the route map. */

.sx-it.sx-has-photo {
  grid-template-columns: 220px minmax(0, 1fr) 260px;
}

.sx-photo {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  border-radius: 12px 0 0 12px;
  background: #e6eef4;
}

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

.sx-photo-cap {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 18px 10px 7px;
  background: linear-gradient(to top, rgb(0 0 0 / 55%), transparent);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
}

.sx-dates-map {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.sx-dates[hidden] {
  display: none;
}

.sx-map {
  margin: 0;
}

.sx-map img,
.sx-mapbox img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  border: 1px solid #e3eaef;
  border-radius: 8px;
}

.sx-map figcaption {
  margin-top: 6px;
  color: #7a8994;
  font-size: 12px;
}

.sx-mapbox {
  margin-top: 10px;
}

.sx-mapbox summary {
  color: #1a7dde;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
}

.sx-mapbox img {
  margin-top: 10px;
}

/* Below the list: show the rest, then where to go next, then the fine print. */

.sx-tours {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  margin: 26px 0 0;
  padding: 22px 26px;
  border: 1px solid #ecdcbc;
  border-radius: 12px;
  background: #fdf7ec;
}

.sx-tours-text {
  flex: 1 1 420px;
  min-width: 0;
}

.sx-tours h3 {
  margin: 0 0 6px;
  color: #1f2a33;
  font-size: 19px;
}

.sx-tours p {
  max-width: 75ch;
  margin: 0;
  color: #3b4a56;
  font-size: 15px;
  line-height: 1.55;
}

.sx-tours p strong {
  color: #004a83;
}

.sx-tours-cta {
  flex-shrink: 0;
  padding: 11px 20px;
  border-radius: 6px;
  background: #004a83;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
}

.sx-tours-cta::after {
  content: "\203A";
  margin-left: 6px;
}

.sx-more {
  margin: 18px 0 0;
  text-align: center;
}

.sx-more button {
  padding: 11px 26px;
  border: 1px solid #cfdde8;
  border-radius: 999px;
  background: #fff;
  color: #004a83;
  font: inherit;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}

.sx-more button::after {
  content: "\25BE";
  display: inline-block;
  margin-left: 8px;
}

.sx-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  margin: 26px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid #e1e8ee;
}

.sx-foot-all {
  color: #1a7dde;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
}

.sx-foot-all::after {
  content: "\203A";
  margin-left: 6px;
}



.sx-fine {
  margin: 16px 0 0;
  padding: 0 0 var(--band);
  color: #7a8994;
  font-size: 12px;
  line-height: 1.6;
}

.sx-hide {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .jx-fixed {
    transition: none;
  }
}

/* Sticky bar links, after the other link rules they are more specific than. */

.jx-fixed .jx a {
  padding: 15px 0 12px;
  font-size: 14px;
}

/* States, after the base rules they override. */

.jx a:hover,
.jx a[aria-current="true"] {
  border-bottom-color: #004a83;
  color: #004a83;
}

.jx a:focus-visible {
  outline: 2px solid #1a7dde;
  outline-offset: 2px;
}

.sx-teaser-cta:hover,
.jx-cta a:hover,
.sx-tours-cta:hover {
  background: #003a68;
}

.sx-pills button:hover {
  border-color: #47a3da;
}

.sx-pills button[aria-pressed="true"] {
  border-color: #004a83;
  background: #004a83;
  color: #fff;
}

.sx-pills button[aria-pressed="true"] b,
.sx-pills button[aria-pressed="true"] span {
  color: #fff;
}

.sx-next a:hover,
.sx-dates a:hover {
  border-color: #47a3da;
}

.sx-btn:hover,
.sx-btn[aria-expanded="true"] {
  background: #004a83;
  color: #fff;
}

.sx-more button:hover {
  border-color: #47a3da;
}

.sx-more button[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.sx-foot-all:hover {
  text-decoration: underline;
}

@media (width <= 1100px) {
  .jx-fixed .jx-name {
    display: none;
  }
}

@media (width <= 767px) {
  .sx-teaser {
    display: flex;
    padding: 10px 10px 10px 14px;
  }

  .sx-it,
  .sx-it.sx-has-photo {
    grid-template-columns: 1fr;
  }

  .sx-photo {
    aspect-ratio: 16 / 7;
    border-radius: 12px 12px 0 0;
  }

  .sx-dates-map {
    grid-template-columns: 1fr;
  }

  .sx-info {
    padding: 18px 18px 16px;
  }

  .sx-price {
    flex-flow: row wrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 2px 8px;
    padding: 14px 18px 18px;
    border-top: 1px solid #e8eef3;
    border-left: 0;
    border-radius: 0 0 12px 12px;
    text-align: left;
  }

  .sx-btn {
    margin-top: 10px;
  }

  .sx-dates {
    padding: 14px 18px 18px;
  }

  .sx-foot {
    flex-direction: column;
    align-items: flex-start;
  }

  /* One row that scrolls sideways, with no scroll bars: the right edge fades out to show
     that more links continue, as app tab bars do. */
  .jx {
    flex-wrap: nowrap;
    gap: 0 22px;
    padding-right: 28px;
    overflow: auto hidden;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  }

  .jx::-webkit-scrollbar {
    display: none;
  }

  .jx a {
    margin-bottom: 0;
  }

  .jx-fixed .jx-name,
  .jx-cta span {
    display: none;
  }
}

/* The sticky bar's phone menu (jump-bar-menu.js, adc-api#3360): on phones the bar's links
   become one button naming the part of the page in view, which lists them all, since links
   in a row that has to be swiped sideways get missed. Only a bar that carries the button
   (.jx-has-menu) changes, so a copy of the page without it keeps its row of links. */

.jx-menu,
.jx-list {
  display: none;
}

@media (width <= 767px) {
  .jx-fixed.jx-has-menu .jx-in {
    gap: 12px;
  }

  .jx-fixed.jx-has-menu .jx {
    display: none;
  }

  .jx-fixed.jx-has-menu .jx-menu {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 14px 0 12px;
    border: 0;
    background: none;
    color: #004a83;
    font: bold 15px Arial, "Helvetica Neue", Helvetica, sans-serif;
    text-align: left;
    cursor: pointer;
  }

  .jx-menu-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* A chevron that turns up while the list is open. */
  .jx-fixed.jx-has-menu .jx-menu::after {
    content: "";
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 2px solid currentcolor;
    border-bottom: 2px solid currentcolor;
    transform: rotate(45deg);
  }

  .jx-fixed.jx-has-menu .jx-menu[aria-expanded="true"]::after {
    margin-top: 4px;
    transform: rotate(-135deg);
  }

  .jx-fixed.jx-has-menu .jx-list:not([hidden]) {
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    max-height: calc(100vh - 120px);
    margin: 0;
    padding: 6px 0;
    overflow-y: auto;
    border-bottom: 1px solid #e1e8ee;
    background: #fff;
    box-shadow: 0 12px 24px rgb(0 40 80 / 14%);
    list-style: none;
  }

  .jx-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
    color: #2b3a46;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
  }

  .jx-list a .jx-c {
    margin-right: auto;
    margin-left: 4px;
    color: #8a98a3;
    font-size: 13px;
    font-weight: normal;
  }

  .jx-list a[aria-current="true"] {
    background: #eef5fb;
    color: #004a83;
  }

  .jx-list a[aria-current="true"]::after {
    content: "\2713";
    color: #004a83;
  }
}

/* More lengths (pricing.php, adc-api#3360): styled as a control rather than another length. */

.sx-pills .sx-len-toggle {
  border: 1px dashed #8fb3d1;
  background: #f3f8fc;
  color: #004a83;
  font-weight: bold;
}

.sx-pills .sx-len-toggle::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 2px 3px 8px;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: rotate(45deg);
}

.sx-pills .sx-len-toggle[aria-expanded="true"]::after {
  margin-bottom: -1px;
  transform: rotate(-135deg);
}

/* A Ports tab's departure ports by region, in two balanced columns, on the cruise line page
   (cruiseline/ports.php) and the ship page (ship/ports.php), adc-api#3344. */

.pt-groups {
  margin-top: 4px;
  column-gap: 36px;
  columns: 2 340px;
}

.pt-group {
  margin-bottom: 20px;
  break-inside: avoid;
}

.pt-group h3 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
  padding-bottom: 4px;
  border-bottom: 2px solid #004a83;
  color: #1f2d3a;
  font-size: 15px;
}

.pt-count {
  align-self: flex-end;
  color: #5b6b78;
  font-size: 12px;
  font-weight: normal;
}

.pt-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pt-group li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 10px;
  padding: 5px 0;
  border-bottom: 1px solid #d6e0e8;
  font-size: 13px;
}

.pt-port {
  min-width: 0;
  color: #004a83;
  font-weight: bold;
  text-decoration: none;
}

.pt-port:hover {
  text-decoration: underline;
}

.pt-meta {
  margin-left: auto;
  color: #5b6b78;
  font-size: 12px;
  white-space: nowrap;
}

.pt-price {
  color: #004a83;
  font-size: 13px;
}

.pt-lede {
  margin: 6px 0 14px;
  color: #5b6b78;
  font-size: 13px;
}

/* One region: a single column, no region heading. */
.pt-groups.pt-single {
  max-width: 560px;
  columns: auto;
}

/* The tabs on a band (adc-api#3344): on the ship and cruise line pages the Overview tabs sit
   on the site's light blue, full width, so they read as their own section. The band is drawn
   with border-image rather than a background so it reaches the window's edges from inside the
   page's width without clipping the calendar's tooltips. Every tab is white with a light
   outline; the open one joins its white panel and carries a navy top edge. */
[id="tabs_section"] {
  margin: 0;
  padding: var(--band) 0;
  border-image: linear-gradient(#d0e8ff, #d0e8ff) fill 0 / 0 / 0 100vmax;
}

/* One space for the top and bottom of every band on the ship and cruise line pages, so the
   sections are evenly spaced throughout (adc-api#3344). */
:root {
  --band: 56px;
}

@media (width <= 760px) {
  :root {
    --band: 40px;
  }
}

/* The fine print closes the last blue band, under the tabs, so the promo banner below the
   page sits apart on its own strip with the same space above and below. */
[id="tabs_section"] > .clp-fine,
[id="tabs_section"] > .disclaimer {
  margin: 28px 0 0;
  padding: 0;
  border: 0;
  color: #3a4f61;
  font-size: 12px;
  line-height: 1.5;
}

[id="tabs_section"] > .clp-fine + .disclaimer,
[id="tabs_section"] > .disclaimer + .disclaimer {
  margin-top: 10px;
}

#ads_container {
  margin: 0;
  padding: var(--band) 0;
}

/* The ship page's Deals band (deals-sliders.css) on the same spacing as the others. */
body:has(.sx) #deals_content_container {
  margin: 0;
  padding: var(--band) 0;
}

/* Its heading and its slider's dots open and close the band; their own space would add to the
   band's. */
body:has(.sx) #deals_content_container .page_max_width > .title:first-child {
  padding-top: 0;
}

body:has(.sx) #deals_pagination {
  padding-bottom: 0;
}

/* The links under the page header: 28px from the header above; the band below brings its
   own space, so the cruise line page's links sit directly on its first band, whichever that
   is (Ships when the line has no pricing, so no Destinations). */
.jx-drop > .jx {
  margin: 28px 0;
}

.jx-drop:has(~ .clp-block) > .jx {
  margin-bottom: 0;
}

[id="tabs_section"] .adc_tabs .tabs .tab {
  border-top: 2px solid transparent;
  border-right: 1px solid #b7d3ea;
  border-left: 1px solid #b7d3ea;
  border-radius: 6px 6px 0 0;
  background-color: #fff;
  color: #33536e;
}

[id="tabs_section"] .adc_tabs .tabs .tab:hover {
  border-top-color: #8fb3d1;
  color: #004a83;
}

[id="tabs_section"] .adc_tabs .tabs .tab.active {
  border-top: 3px solid #004a83;
  border-right-color: #b7d3ea;
  border-left-color: #b7d3ea;
  color: #004a83;
}

[id="tabs_section"] .adc_tabs .tabs_content .content {
  border-color: #b7d3ea;
  border-radius: 0 8px 8px;
  background-color: #fff;
}

/* The links under the page header on phones (jump-bar-menu.js, adc-api#3344): a full-width
   "Jump to a section" button that opens them as a list, in place of a row swiped sideways.
   Wider screens keep the row and never show the button, and so does a phone until the script
   has marked the menu ready (.jx-ready). */
.jx-toggle {
  display: none;
}

@media (width <= 767px) {
  .jx-drop {
    position: relative;
    margin: 28px 0;
  }

  .jx-drop:has(~ .clp-block) {
    margin-bottom: 0;
  }

  .jx-drop.jx-ready .jx-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 13px 16px;
    border: 1px solid #c4d3df;
    border-radius: 6px;
    background-color: #fff;
    color: #004a83;
    font: bold 15px Arial, "Helvetica Neue", Helvetica, sans-serif;
    cursor: pointer;
  }

  .jx-drop .jx-toggle::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 2px solid currentcolor;
    border-bottom: 2px solid currentcolor;
    transform: rotate(45deg);
  }

  .jx-drop.jx-open .jx-toggle::after {
    margin-top: 4px;
    transform: rotate(-135deg);
  }

  .jx-drop.jx-ready .jx {
    display: none;
  }

  .jx-drop.jx-open .jx {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;

    /* Over the phone's Search Deals button (z-index 999), under the sticky bar (9000). */
    z-index: 1000;
    display: block;
    margin: 0;
    padding: 6px 0;
    overflow: visible;
    border: 1px solid #c4d3df;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 0 12px 24px rgb(0 40 80 / 14%);
    mask-image: none;
  }

  .jx-drop.jx-open .jx a {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 12px 16px;
    border-bottom: 0;
  }
}