/* Trip page: parts rebuilt one at a time on the design system. Each part has its own block.
   Author: Pravash Karki - pravashkarki.com
   Colours name a token, with the value beside it for a page that has not loaded the token file yet.
   A file of its own, so a change here never meets another branch's change in the theme's stylesheet. */

/* "View all photos" on the photographs: a small white control with the gallery icon, not a main button.
   White with dark words reads on any photograph, and leaves the one main button to the price box. */
.package-banner .trip-photos-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  position: relative;
  min-height: 36px;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border: 0;
  /* The same corner as the main button. This control is shorter, so its radius is a step smaller to look alike. */
  border-radius: var(--radius-lg, 12px);
  corner-shape: squircle;
  background: var(--color-base, #fff);
  color: var(--color-contrast, #0b1f2e);
  font-size: var(--text-body-md, 0.875rem);
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(11, 31, 46, 0.25);
  cursor: pointer;
}
/* It looks small and is still easy to press: the area that takes a press reaches the touch minimum. */
.package-banner .trip-photos-link::after { content: ""; position: absolute; top: -4px; right: 0; bottom: -4px; left: 0; }
.package-banner .trip-photos-link svg { width: 16px; height: 16px; }
.package-banner .trip-photos-link:hover { background: var(--night-100, #e4e9ec); }
.package-banner .trip-photos-link:focus-visible { outline: 2px solid var(--color-base, #fff); outline-offset: 2px; box-shadow: 0 0 0 4px var(--color-dark, #0b1f2e); }

/* The photographs, on a wide screen: one block the width of the page, with white seams and one rounded outline.
   The large photograph takes half, the four small ones a quarter each. The corner is the site's squircle, on the block and not on each tile. */
@media screen and (min-width: 992px) {
  .package-detail-banner-wrapper { background: var(--color-base, #fff); }
  .page-banner.package-banner.package-banner-collage {
    width: calc(100% - 30px);
    max-width: 1242px;
    height: auto !important;
    margin: var(--space-4, 16px) auto 0;
    padding-top: 0;
    aspect-ratio: 2.25 / 1;
    border-radius: var(--radius-2xl, 24px);
    corner-shape: squircle;
    background: var(--color-base, #fff);
  }
  .page-banner.package-banner.package-banner-collage::after { display: none; }
  .package-banner-collage .package-banner-collage-inner { top: 0; right: 0; bottom: 0; left: 0; gap: var(--space-2, 8px); }
  .package-banner-collage .package-banner-collage-item,
  .package-banner-collage .package-banner-collage-item img { border-radius: 0; }
  .package-banner-collage.banner-count-4 .package-banner-collage-inner,
  .package-banner-collage.banner-count-5 .package-banner-collage-inner { grid-template-columns: 2fr 1fr 1fr; }

  /* The photos control sits in the bottom right corner of the block, on the last photograph, clear of the booking box above. */
  .package-banner-collage .package-banner-view-all-wrap {
    top: auto; left: auto;
    bottom: var(--space-4, 16px);
    right: var(--space-4, 16px);
  }
}

/* The page's opening: its name and its reviews, above the photographs. */
.trip-opening { padding: var(--space-5, 24px) 0 0; }
.trip-opening .package-title-wrapper { margin-bottom: var(--space-4, 16px); }
/* The opening words begin the reading column, a clear step under the photographs. */
.package-page .short-detail { margin-top: var(--space-2, 8px); }
/* No bar under the name and no line under the reviews: the photographs that follow close the block.
   Space does the separating, a small step inside the block and a larger one after it. */
.trip-opening .page-title::before { display: none; }
.trip-opening .page-title { padding-bottom: 0; margin-bottom: var(--space-2, 8px); }
.trip-opening .page-title h1 { margin-bottom: 0; padding-bottom: 0; }
.trip-opening .package-review-summary { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

/* The trip's name is the largest thing on the page. A condensed face looks smaller than its number,
   so the size is a step above what the theme gave the old typeface. */
.trip-opening .page-title h1 { font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); line-height: 1.1; }

/* "Read reviews on" is a label for the two logos, not a heading: small, in capitals and small letters, quiet. */
.trip-opening .package-review-summary__label {
  color: var(--color-muted, #51606b);
  font-size: var(--text-body-md, 0.875rem);
  font-weight: var(--weight-450, 450);
  letter-spacing: 0;
  text-transform: none;
}
.trip-opening .package-review-summary__platforms { gap: var(--space-3, 12px); }
.trip-opening .package-review-summary__platforms img { height: 18px; width: auto; }

/* The trip's name and reviews on the left; on a wide screen, the price and the way to book on the right. */
.trip-opening .container { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4, 16px) var(--space-8, 48px); }
.trip-opening .package-title-wrapper { flex: 1 1 520px; min-width: 0; }

/* What the company gives back: one line between the photographs and the sections, with room above and below, a pause before the reading starts. */
.trip-promise { padding: var(--space-6, 32px) 0 var(--space-2, 8px); }
.trip-promise__line { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--space-1, 4px) var(--space-3, 12px); margin: 0; color: var(--color-muted, #51606b); font-size: var(--text-body-lg, 1rem); line-height: var(--leading-body); text-align: left; }
/* A heart on a round light green ground: the one place on the page an icon has a ground of its own. */
.trip-promise__icon, .package-page .trip-care__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary-light, #ebf8e7); color: var(--color-primary-dark, #295e1d); }
/* The heart: one file, at the set's 20 pixels, in the colour of its ground's pairing. */
.trip-promise__icon::before, .package-page .trip-care__icon::before { content: ""; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: url("../images/icons/heart.svg") center / contain no-repeat; mask: url("../images/icons/heart.svg") center / contain no-repeat; }
.trip-promise__title { color: var(--color-contrast, #0b1f2e); font-weight: 700; }
.trip-promise__text strong { color: var(--color-contrast, #0b1f2e); font-weight: 800; }
@media (max-width: 767.98px) {
  .trip-promise { padding: var(--space-5, 24px) 0 0; }
  .trip-promise__line { font-size: var(--text-body-md, 0.875rem); }
  .trip-promise__title { flex: 1 1 0; }
  .trip-promise__text { flex-basis: 100%; padding-left: calc(40px + var(--space-3, 12px)); }
}

/* The two review sites are named, not linked: the top of the page keeps the reader on the trip. */
.trip-opening .package-review-summary__platform { display: inline-flex; align-items: center; }

/* The rating, its count and the sites the reviews came from, as one line and one link to the page's reviews. */
.trip-opening .package-review-summary__rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px) var(--space-2, 8px); text-decoration: none; }
.trip-opening .package-review-summary__rating:hover .package-review-summary__count { text-decoration: underline; text-underline-offset: 3px; }
.trip-opening .package-review-summary__platform img { height: 18px; width: auto; }

/* The review statement is one fact, so it takes the tag's shape: a pill on the pale mist ground. */
.trip-opening .package-review-summary__rating {
  padding: var(--space-2, 8px) var(--space-4, 16px);
  border-radius: var(--radius-pill, 999px);
  background: var(--color-surface, #f4f7f3);
}
.trip-opening .package-review-summary__rating:hover { background: var(--night-100, #e4e9ec); }

/* Even space round the page's opening: the same step between the band and the name, between the reviews and
   the photographs, and between the photographs and the reading column. Equal space either side places a thing. */
.trip-opening { padding-top: var(--space-5, 24px); }
.trip-opening .container { align-items: flex-start; }
.trip-opening .package-title-wrapper,
.trip-opening .trip-opening__book { margin-bottom: var(--space-5, 24px); }
@media screen and (min-width: 992px) {
  .page-banner.package-banner.package-banner-collage { margin-top: 0; }
  .package-page .common-box.package-detail { padding-top: var(--space-5, 24px); }
  .package-page .short-detail { margin-top: 0; }
}


/* ── The opening words and the quick facts ─────────────────────────────── */

/* The opening words are a lead paragraph: a step larger than body text, regular weight, at a reading width. */
.package-page .short-detail,
.package-page .short-detail p {
  max-width: 68ch;
  color: var(--color-contrast, #0b1f2e);
  font-size: var(--text-body-xl, 1.125rem);
  font-weight: var(--weight-450, 450);
  line-height: var(--leading-loose, 1.7);
}
.package-page .short-detail { padding-bottom: var(--space-5, 24px) !important; }

/* The facts sit in one pale panel, so fourteen small things read as one group. Three even columns on a wide
   screen, two on a tablet, one on a phone. Each fact is a quiet label over a firm value, with one icon from
   the site's set in one colour and one size. */
.package-page .key-wrapper { margin-bottom: var(--space-6, 32px); }
.package-page .key-wrapper span.trip_title {
  padding-bottom: var(--space-3, 12px);
  color: var(--color-contrast, #0b1f2e);
  font-family: "omnes-variable", var(--font-body, "Mulish", sans-serif);
  font-variation-settings: "wdth" 53, "wght" 600;
  font-size: var(--text-heading-lg, 1.875rem);
  font-weight: 600;
  line-height: var(--leading-heading, 1.2);
  text-transform: none;
}
.package-page .key-wrapper ul.trip-fact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5, 24px) var(--space-6, 32px);
  padding: var(--space-5, 24px);
  border-radius: var(--radius-2xl, 24px);
  corner-shape: squircle;
  background: var(--color-surface, #f4f7f3);
}
@media (max-width: 991.98px) { .package-page .key-wrapper ul.trip-fact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .package-page .key-wrapper ul.trip-fact { grid-template-columns: minmax(0, 1fr); gap: var(--space-4, 16px); padding: var(--space-4, 16px); } }
.package-page .key-wrapper ul.trip-fact > li.item {
  flex: none;
  max-width: none;
  padding: 0 0 0 var(--space-8, 48px);
  min-height: var(--space-6, 32px);
  color: var(--color-muted, #51606b);
  font-size: var(--text-body-md, 0.875rem);
  font-weight: var(--weight-450, 450);
  line-height: 1.4;
}
.package-page .key-wrapper ul.trip-fact > li.item b {
  margin-top: 2px;
  color: var(--color-contrast, #0b1f2e);
  font-size: var(--text-body-lg, 1rem);
  font-weight: 700;
  line-height: 1.35;
}
.package-page .key-wrapper ul.trip-fact > li.item::before {
  content: "" !important;
  top: 0;
  left: 0;
  width: var(--space-6, 32px);
  height: var(--space-6, 32px);
  background: var(--color-contrast, #0b1f2e);
  -webkit-mask: var(--fact-icon) center / contain no-repeat;
  mask: var(--fact-icon) center / contain no-repeat;
}
.package-page .key-wrapper ul.trip-fact > li.item i.fa { margin-left: var(--space-1, 4px); color: var(--color-muted, #51606b) !important; }
.package-page .key-wrapper ul.trip-fact > li.item.trip-duration { --fact-icon: url("../images/icons/duration.svg"); }
.package-page .key-wrapper ul.trip-fact > li.item.trip-destination { --fact-icon: url("../images/icons/region-or-destination.svg"); }
.package-page .key-wrapper ul.trip-fact > li.item.difficulty { --fact-icon: url("../images/icons/difficulty-or-grade.svg"); }
.package-page .key-wrapper ul.trip-fact > li.item.altitude { --fact-icon: url("../images/icons/max-altitude.svg"); }
.package-page .key-wrapper ul.trip-fact > li.item.activity { --fact-icon: url("../images/icons/activity.svg"); }
.package-page .key-wrapper ul.trip-fact > li.item.start { --fact-icon: url("../images/icons/start-and-end-point.svg"); }
.package-page .key-wrapper ul.trip-fact > li.item.end { --fact-icon: url("../images/icons/start-and-end-point.svg"); }
.package-page .key-wrapper ul.trip-fact > li.item.group-size { --fact-icon: url("../images/icons/group-size.svg"); }
.package-page .key-wrapper ul.trip-fact > li.item.trip-transport { --fact-icon: url("../images/icons/transportation.svg"); }
.package-page .key-wrapper ul.trip-fact > li.item.best-time { --fact-icon: url("../images/icons/best-season.svg"); }
.package-page .key-wrapper ul.trip-fact > li.item.accommodation { --fact-icon: url("../images/icons/accommodation.svg"); }
.package-page .key-wrapper ul.trip-fact > li.item.trip-accomodation { --fact-icon: url("../images/icons/accommodation.svg"); }
.package-page .key-wrapper ul.trip-fact > li.item.avg-hours { --fact-icon: url("../images/icons/trek-distance.svg"); }
.package-page .key-wrapper ul.trip-fact > li.item.recommended-for { --fact-icon: url("../images/icons/team.svg"); }
.package-page .key-wrapper ul.trip-fact > li.item.comfort { --fact-icon: url("../images/icons/protection.svg"); }
.package-page .key-wrapper ul.trip-fact > li.item.interest-option { --fact-icon: url("../images/icons/idea.svg"); }
.package-page .key-wrapper ul.trip-fact > li.item.trip-type { --fact-icon: url("../images/icons/overview.svg"); }
.package-page .key-wrapper ul.trip-fact > li.item.area { --fact-icon: url("../images/icons/region-or-destination.svg"); }

/* The reading column and the price box stand a clear step apart on a wide screen: step 8 of the spacing scale,
   48 pixels, where the theme's own gutter gave 30. The grid's gutter stays; the column gives up the difference. */
@media (min-width: 992px) {
  .package-page .package-detail > .row > .col-lg-9 { padding-right: calc(var(--space-8, 48px) - (var(--bs-gutter-x, 30px) * 0.5)); }
}

/* One pale panel with no lines between the facts: spacing alone keeps each icon with its fact, and the cells no longer read
   as a form. A row with a fact short of three ends in space, not an empty box. */
.package-page .key-wrapper ul.trip-fact {
  gap: 0;
  padding: var(--space-2, 8px);
  overflow: hidden;
}
.package-page .key-wrapper ul.trip-fact > li.item {
  padding: var(--space-4, 16px) var(--space-4, 16px) var(--space-4, 16px) calc(var(--space-4, 16px) + var(--space-6, 32px) + var(--space-3, 12px));
}
.package-page .key-wrapper ul.trip-fact > li.item::before { top: var(--space-4, 16px); left: var(--space-4, 16px); }
@media (max-width: 575.98px) { .package-page .key-wrapper ul.trip-fact { gap: 0; padding: var(--space-1, 4px) 0; } }

/* The icon sits back so the words lead: the muted tone, smaller, on a round white ground.
   The round is the mark's place-holder in every cell, so the column of icons still lines up. */
.package-page .key-wrapper ul.trip-fact > li.item {
  padding-left: calc(var(--space-4, 16px) + var(--space-7, 40px) + var(--space-3, 12px));
  min-height: calc(var(--space-7, 40px) + var(--space-4, 16px) * 2);
}
.package-page .key-wrapper ul.trip-fact > li.item::after {
  content: "";
  position: absolute;
  top: var(--space-4, 16px);
  left: var(--space-4, 16px);
  width: var(--space-7, 40px);
  height: var(--space-7, 40px);
  border-radius: 50%;
  background: var(--color-base, #fff);
}
.package-page .key-wrapper ul.trip-fact > li.item::before {
  z-index: 1;
  top: calc(var(--space-4, 16px) + 10px);
  left: calc(var(--space-4, 16px) + 10px);
  width: 20px;
  height: 20px;
  background: var(--color-muted, #51606b);
}

/* The small panels that open from a question mark: beside a fact, and beside the price.
   White with the site's squircle corner and a soft shadow in place of a grey frame, dark words at a reading size,
   and room round them. They sit above the page, so the shadow is what sets them apart. */
.qf-popover.popover,
.price-tooltip-popover.popover {
  border: 0;
  border-radius: var(--radius-xl, 16px);
  corner-shape: squircle;
  background: var(--color-base, #fff);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-dark, #0b1f2e) 18%, transparent), 0 0 0 1px var(--night-100, #e4e9ec);
}
.qf-popover.popover .popover-body,
.price-tooltip-popover.popover .popover-body {
  padding: var(--space-4, 16px);
  color: var(--color-contrast, #0b1f2e);
  font-family: var(--font-body, "Mulish", sans-serif);
  font-size: var(--text-body-md, 0.875rem);
  font-weight: var(--weight-450, 450);
  line-height: 1.55;
}
.qf-popover.popover .popover-body *,
.price-tooltip-popover.popover .popover-body * { color: inherit; font-size: inherit; line-height: inherit; }
.price-tooltip-popover.popover .popover-body ul { margin: var(--space-2, 8px) 0 0; padding-left: var(--space-4, 16px); }
.price-tooltip-popover.popover .popover-body li + li { margin-top: var(--space-1, 4px); }
.qf-popover.popover .popover-arrow::before,
.price-tooltip-popover.popover .popover-arrow::before { border-color: transparent; }
.qf-popover.popover .popover-arrow::after,
.price-tooltip-popover.popover .popover-arrow::after { border-bottom-color: var(--color-base, #fff); border-top-color: var(--color-base, #fff); }

/* The quick facts in a reader's order: how long, how hard, how high, how far each day; then when and how to get there;
   then who with and how comfortable; then the rest. The list's own order in the page is the admin's. */
.package-page .key-wrapper ul.trip-fact > li.item { order: 20; }
.package-page .key-wrapper ul.trip-fact > li.item.trip-duration { order: 1; }
.package-page .key-wrapper ul.trip-fact > li.item.difficulty { order: 2; }
.package-page .key-wrapper ul.trip-fact > li.item.altitude { order: 3; }
/* The short facts first, the three that run long on every trip last (best season, recommended for and transport,
   a median of 31 to 53 letters across the 59 trips), so a row of one-line facts is never broken by a three-line one. */
.package-page .key-wrapper ul.trip-fact > li.item.avg-hours { order: 4; }
.package-page .key-wrapper ul.trip-fact > li.item.group-size { order: 5; }
.package-page .key-wrapper ul.trip-fact > li.item.start { order: 6; }
.package-page .key-wrapper ul.trip-fact > li.item.accommodation { order: 7; }
.package-page .key-wrapper ul.trip-fact > li.item.comfort { order: 8; }
.package-page .key-wrapper ul.trip-fact > li.item.trip-transport { order: 21; }
.package-page .key-wrapper ul.trip-fact > li.item.best-time { order: 22; }
.package-page .key-wrapper ul.trip-fact > li.item.recommended-for { order: 23; }
@media (min-width: 992px) { .package-page .key-wrapper ul.trip-fact > li.item.trip-transport { grid-column-start: 1; } }

/* What the price covers: a card of its own in the reading column, on the light green ground of a note.
   The heading names the price. What is covered sits beside what is not: a tick, and a plain dash.
   The company's own sentences are unchanged. The price box and the line at the foot both lead onward. */
.package-page .trip-covers {
  margin: 0 0 var(--space-6, 32px);
  padding: var(--space-5, 24px);
  border-radius: var(--radius-2xl, 24px);
  corner-shape: squircle;
  background: var(--color-primary-light, #ebf8e7);
  color: var(--color-on-primary-light, #0b1f2e);
  scroll-margin-top: var(--space-10, 80px);
}
.package-page #inclusions { scroll-margin-top: var(--space-10, 80px); }
.package-page .trip-covers__title { margin: 0 0 var(--space-5, 24px); font-size: var(--text-heading-lg, 1.875rem); line-height: var(--leading-heading, 1.2); }
.package-page .trip-covers__yes,
.package-page .trip-covers__yes p,
.package-page .trip-covers__yes div,
.package-page .trip-covers__no,
.package-page .trip-covers__no p,
.package-page .trip-covers__no div { color: inherit; font-size: var(--text-body-lg, 1rem); line-height: var(--leading-body, 1.5); }
.package-page .trip-covers__yes > :first-child { margin-top: 0; }
.package-page .trip-covers__split--both {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5, 24px) var(--space-6, 32px);
  align-items: start;
}
@media (max-width: 767.98px) { .package-page .trip-covers__split--both { grid-template-columns: minmax(0, 1fr); } }
.package-page .trip-covers__label { margin: 0; color: inherit; font-family: var(--font-body, "Mulish", sans-serif); font-size: var(--text-body-lg, 1rem); font-weight: 800; line-height: 1.4; }
.package-page .trip-covers__yes ul,
.package-page .trip-covers__no ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3, 12px) var(--space-6, 32px); margin: var(--space-4, 16px) 0 0; padding: 0; list-style: none; }
.package-page .trip-covers__split--both .trip-covers__yes ul,
.package-page .trip-covers__no ul { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 767.98px) { .package-page .trip-covers__yes ul { grid-template-columns: minmax(0, 1fr); } }
/* Each item's mark sits on a white round, as the facts' icons do: a tick for what is covered, a dash for what is not. */
.package-page .trip-covers li { position: relative; min-height: 24px; padding-left: calc(24px + var(--space-3, 12px)); color: inherit; }
.package-page .trip-covers li::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-base, #fff);
}
.package-page .trip-covers li::before { z-index: 1; }
.package-page .trip-covers__yes li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 7px;
  width: 10px;
  height: 5px;
  border: solid var(--color-primary-dark, #295e1d);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}
.package-page .trip-covers__no li::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 7px;
  width: 10px;
  height: 0;
  border: 0;
  border-bottom: 2px solid var(--color-muted, #51606b);
}
.package-page .trip-covers__more { margin: var(--space-5, 24px) 0 0; }
.package-page .trip-covers__more a { color: var(--color-link, #295e1d); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.package-page .trip-covers__more a:focus-visible { outline: 2px solid var(--color-focus, #295e1d); outline-offset: 2px; }
.booking-module .package-price .package-price__covers { color: var(--color-on-dark-link, #fff) !important; text-decoration: underline; text-decoration-color: var(--night-400, #8699a7); text-underline-offset: var(--space-1, 4px); }

/* Three facts say nothing a reader does not know on a Nepal trek's own page: the country, that it is a trek,
   and a list of interests. They are left out of the panel. The admin's data is untouched. */
.package-page .key-wrapper ul.trip-fact > li.item.trip-destination,
.package-page .key-wrapper ul.trip-fact > li.item.activity,
.package-page .key-wrapper ul.trip-fact > li.item.interest-option { display: none; }

/* Sticky section bar. Each section carries a small icon in its own colour.
   The inquiry control is the system's second button: white, a near-black line, sentence case, the site's squircle.
   The booking box beside the page keeps the one dark main button. */
/* Where the reader is: the section under the bar is a white tab the bar's full height, its words in the link colour,
   with a leaf green line along its foot. Hover shows the same white tab without the line. */
.package-nav .package-nav-wrap .nav-tabs.package-tab .nav-item > .nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  height: 100%;
  padding: 0 var(--space-4, 16px);
  border-radius: 0;
  background: transparent;
  color: var(--color-contrast, #0b1f2e);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.package-nav .package-nav-wrap .nav-tabs.package-tab .nav-item > .nav-link:hover {
  background: var(--color-base, #fff);
  color: var(--color-link, #295e1d);
}
.package-nav .package-nav-wrap .nav-tabs.package-tab .nav-item > .nav-link.active {
  background: var(--color-base, #fff);
  color: var(--color-link, #295e1d) !important;
  box-shadow: inset 0 -3px 0 var(--color-primary, #5dbb46);
}
/* The active words are bold. Each label already holds the width of its bold self, so the tabs never shift. */
.package-nav .package-nav-wrap .nav-tabs.package-tab .nav-item > .nav-link.active { font-weight: 700; }
.package-nav .package-tab__label::after {
  content: attr(data-label);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 700;
}
.package-nav .package-nav-wrap .nav-tabs.package-tab .nav-item > .nav-link:focus-visible {
  outline: 2px solid var(--color-focus, #295e1d);
  outline-offset: -2px;
}
@media (min-width: 992px) {
  /* Send inquiry never drops under the bar: on a trip with nine sections the tabs close up, and if they still run out of room
     they scroll inside the bar. */
  .package-nav .package-nav-wrap { align-items: stretch; flex-wrap: nowrap; gap: var(--space-3, 12px); }
  .package-nav .package-nav-wrap .nav-tabs.package-tab { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .package-nav .package-nav-wrap .nav-tabs.package-tab::-webkit-scrollbar { display: none; }
  .package-nav .package-nav-wrap .nav-tabs.package-tab .nav-item { flex: none; }
  .package-nav .package-nav-wrap .btn-top { flex: none; }
}
@media (min-width: 992px) and (max-width: 1399.98px) {
  .package-nav .package-nav-wrap .nav-tabs.package-tab .nav-item > .nav-link { padding: 0 var(--space-3, 12px); }
}
@media (min-width: 992px) {
  .package-nav .package-nav-wrap .nav-tabs.package-tab { height: 100%; gap: 0; }
  .package-nav .package-nav-wrap .nav-tabs.package-tab .nav-item { display: flex; }
  .package-nav .package-nav-wrap .btn-top { align-self: center; }
}
@media (max-width: 991.98px) {
  .package-nav .package-nav-wrap .nav-tabs.package-tab { padding: 0; gap: 0; }
  .package-nav .package-nav-wrap .nav-tabs.package-tab .nav-item > .nav-link { height: 48px; width: 100%; justify-content: center; }
}
.package-nav .package-nav-wrap .nav-tabs.package-tab .nav-link::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--nav-icon) center / contain no-repeat;
  mask: var(--nav-icon) center / contain no-repeat;
}
#overview-tab { --nav-icon: url("../images/icons/overview.svg"); }
#itinerary-tab { --nav-icon: url("../images/icons/nav-itinerary.svg"); }
#trip-map-tab { --nav-icon: url("../images/icons/region-or-destination.svg"); }
#inclusions-tab { --nav-icon: url("../images/icons/price-per-person.svg"); }
#package-video-tab { --nav-icon: url("../images/icons/nav-video.svg"); }
#depature-dates-tab { --nav-icon: url("../images/icons/nav-dates.svg"); }
#reviews-tab { --nav-icon: url("../images/icons/reviews-and-rating.svg"); }
#useful-info-tab { --nav-icon: url("../images/icons/idea.svg"); }
#equipments-tab { --nav-icon: url("../images/icons/equipment.svg"); }
#faqs-tab { --nav-icon: url("../images/icons/faqs.svg"); }

.package-nav .package-nav-wrap .btn-top > li .btn.package-nav__inquiry {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  height: var(--touch-min, 44px);
  padding: 0 var(--space-4, 16px);
  border: 2px solid var(--color-dark, #0b1f2e) !important;
  border-radius: 24px !important;
  corner-shape: squircle;
  background: var(--color-base, #fff) !important;
  color: var(--color-contrast, #0b1f2e) !important;
  font-size: var(--text-body-md, 0.875rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none !important;
  white-space: nowrap;
}
.package-nav .package-nav-wrap .btn-top > li .btn.package-nav__inquiry:hover,
.package-nav .package-nav-wrap .btn-top > li .btn.package-nav__inquiry:focus {
  background: var(--color-surface, #f4f7f3) !important;
  color: var(--color-contrast, #0b1f2e) !important;
}
.package-nav .package-nav-wrap .btn-top > li .btn.package-nav__inquiry:active {
  background: var(--color-primary-light, #ebf8e7) !important;
}
.package-nav .package-nav-wrap .btn-top > li .btn.package-nav__inquiry:focus-visible {
  outline: 2px solid var(--color-focus, #295e1d);
  outline-offset: 2px;
}
.package-nav .package-nav-wrap .btn-top > li .btn.package-nav__inquiry svg { flex: none; }

/* Headings under the trip's name, on the design system's scale. Section titles are Omnes, the size of an H2.
   Headings inside the writing step down from there. Day titles and questions are items in a list, so they sit a step above the body. */
.package-page h2,
.package-page .content-title h2.package-inner-title,
.package-page .common-module h2,
.package-page #package-video .content-title .package-inner-title { font-size: var(--text-heading-lg, 1.875rem); line-height: var(--leading-heading, 1.2); }
.package-page h3,
.package-page .common-module h3,
.package-page .useful-content h3 { font-size: var(--text-heading-md, 1.5rem); line-height: var(--leading-heading, 1.2); }
.package-page h4,
.package-page .useful-content h4 { font-size: var(--text-heading-sm, 1.125rem); line-height: var(--leading-heading, 1.2); }
.package-page .itinerary-content .accordion-button h3,
.package-page .faqs .accordion-header h3 { font-size: var(--text-body-xl, 1.125rem); line-height: 1.35; }
.package-page .trip-covers__label { font-size: var(--text-body-lg, 1rem); line-height: 1.4; }

/* What the company does for the trails: one statement in a small pale panel at the end of the overview, in the story page's own words. */
.package-page .trip-care {
  max-width: var(--container-prose, 40rem);
  margin: var(--space-6, 32px) 0 var(--space-8, 48px);
  padding: var(--space-5, 24px);
  border-radius: var(--radius-2xl, 24px);
  corner-shape: squircle;
  background: var(--color-surface, #f4f7f3);
}
.package-page .trip-care__title { display: flex; align-items: center; gap: var(--space-3, 12px); margin: 0 0 var(--space-3, 12px); }
.package-page .trip-care__text { margin: 0; color: var(--color-contrast, #0b1f2e); font-size: var(--text-body-lg, 1rem); line-height: var(--leading-body, 1.5); }

/* The trip's own writing is set a step larger on a wide screen, and no line runs past about 75 letters.
   The column is wide enough for about 96 at 18 pixels, too long to read with ease, so the writing stops short of its edge.
   --container-prose, not 75ch: a ch is the width of a zero, wider than Mulish's average letter, and 75ch still gave 96.
   Headings and most panels keep the column's full width; the statement panel takes the reading width. A phone's column is already short, so it keeps 16.
   Facts, prices, cost lists and reviews keep their size. */
@media (min-width: 992px) {
  .package-page #overview article.common-module p,
  .package-page #overview article.common-module li,
  .package-page .highlights li,
  .package-page .trip-care__text,
  .package-page .trial-psychology li,
  .package-page .itinerary-content .accordion-body > p,
  .package-page .useful-content p,
  .package-page .useful-content li,
  .package-page .faqs .accordion-body p,
  .package-page .faqs .accordion-body li,
  .package-page .itinerary-brief p,
  .package-page .package-note-content--overview-note p { font-size: var(--text-body-xl, 1.125rem); line-height: var(--leading-loose, 1.7); }
  .package-page #overview article.common-module > p,
  .package-page #overview article.common-module > ul,
  .package-page #overview article.common-module > ol,
  .package-page .highlights > ul,
  .package-page .trial-psychology ul,
  .package-page .itinerary-content .accordion-body > p,
  .package-page .useful-content > p,
  .package-page .useful-content > ul,
  .package-page .useful-content > ol,
  .package-page .faqs .accordion-body p,
  .package-page .faqs .accordion-body ul { max-width: var(--container-prose, 40rem); }
}

/* One corner across the page: the main button's. Buttons, panels, photographs and the video take 24 pixels, squircle.
   A panel inside a panel takes 16, so the two curves stay parallel. Tags stay pills and icons stay round.
   The facts are cells of one panel, so they have no corners of their own. */
.package-page #overview blockquote,
.package-page .trial-psychology,
.package-page .ratio,
.package-page .itinerary-brief,
.package-page .itinerary-content .accordion-item,
.package-page .review-list li.item,
.package-page #package-video .video-wrapper,
.package-page .btn.btn-md,
.package-page .btn.review-btn {
  border-radius: var(--radius-2xl, 24px) !important;
  corner-shape: squircle;
}
.package-page #package-video .video-wrapper,
.package-page .ratio { overflow: hidden; }
/* The quote's dark bar stood outside its box, and with a rounded box it hung apart. The pale panel carries the quote on its own. */
.package-page #overview blockquote::before { display: none; }
.package-page .itinerary-meta {
  border-radius: var(--radius-xl, 16px);
  corner-shape: squircle;
}
.package-page .key-wrapper ul.trip-fact > li.item { border-radius: 0; }

/* One rhythm under headings. A section's title stands a step clear of what it opens; a heading inside the writing sits closer
   to its own paragraph. The quote keeps the same step above and below, and starts on the text's own edge. */
.package-page .content-title,
.package-page .trial-psychology h2 { margin-bottom: var(--space-5, 24px); }
.package-page .content-title h2.package-inner-title { margin-bottom: 0; }
.package-page #overview article.common-module h2,
.package-page .useful-content h2,
.package-page .highlights-title { margin-bottom: var(--space-4, 16px); }
.package-page #overview blockquote { margin: var(--space-5, 24px) 0; }


/* Write a review: under the heading, in the system's second kind of button, with a pen. */
.package-page #reviews .content-title { flex-wrap: wrap; gap: var(--space-4, 16px); }
.package-page #reviews .content-title .write-btn { flex-basis: 100%; }
.package-page #reviews .content-title .btn.review-btn {
  display: inline-flex; align-items: center; gap: var(--space-2, 8px);
  min-height: var(--touch-min, 44px); margin: 0; padding: 0 var(--space-4, 16px);
  border: var(--border-strong, 2px) solid var(--color-dark, #0b1f2e) !important;
  background: var(--color-base, #fff); color: var(--color-contrast, #0b1f2e);
  font-size: var(--text-body-md, 0.875rem); font-weight: var(--weight-bold, 700); text-transform: none; letter-spacing: 0;
}
.package-page #reviews .content-title .btn.review-btn:hover,
.package-page #reviews .content-title .btn.review-btn:focus-visible { background: var(--color-surface, #f4f7f3); color: var(--color-contrast, #0b1f2e); }
.package-page #reviews .content-title .btn.review-btn:focus-visible { outline: var(--focus-width, 2px) solid var(--color-focus, #295e1d); outline-offset: var(--focus-offset, 2px); }

/* The choice of where to write it, and a word about sending a friend. */
.review-choice { width: min(32rem, 100%); padding: var(--space-6, 32px) !important; border-radius: var(--radius-2xl, 24px); corner-shape: squircle; background: var(--color-base, #fff); color: var(--color-contrast, #0b1f2e); }
.review-choice__title { margin: 0 0 var(--space-2, 8px); font-size: var(--text-heading-md, 1.5rem); line-height: var(--leading-heading, 1.2); }
.review-choice__subtitle { margin: 0 0 var(--space-2, 8px); font-family: var(--font-body, "Mulish", sans-serif); font-size: var(--text-body-lg, 1rem); font-weight: var(--weight-extrabold, 800); }
.review-choice__text { margin: 0 0 var(--space-4, 16px); color: var(--color-contrast, #0b1f2e); font-size: var(--text-body-lg, 1rem); line-height: var(--leading-body, 1.5); }
.review-choice__list { display: grid; gap: var(--space-3, 12px); margin: 0 0 var(--space-6, 32px); padding: 0; list-style: none; }
.review-choice__option {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1, 4px);
  padding: var(--space-4, 16px); border: var(--border-hairline, 1px) solid var(--color-outline, #c9d1d6);
  border-radius: var(--radius-xl, 16px); corner-shape: squircle; color: var(--color-contrast, #0b1f2e); text-decoration: none;
}
.review-choice__option:hover, .review-choice__option:focus-visible { border-color: var(--color-dark, #0b1f2e); background: var(--color-surface, #f4f7f3); color: var(--color-contrast, #0b1f2e); text-decoration: none; }
.review-choice__option img { height: 24px; width: auto; }
.review-choice__name { font-weight: var(--weight-bold, 700); line-height: 24px; }
.review-choice__hint { color: var(--color-muted, #51606b); font-size: var(--text-body-md, 0.875rem); }
.review-choice__refer { padding-top: var(--space-5, 24px); border-top: var(--border-hairline, 1px) solid var(--color-outline, #c9d1d6); }
.review-choice__share {
  min-height: var(--touch-min, 44px); padding: 0 var(--space-4, 16px);
  border: var(--border-strong, 2px) solid var(--color-dark, #0b1f2e) !important; border-radius: var(--radius-2xl, 24px) !important; corner-shape: squircle;
  background: var(--color-base, #fff); color: var(--color-contrast, #0b1f2e); font-size: var(--text-body-md, 0.875rem); font-weight: var(--weight-bold, 700); text-transform: none;
}
.review-choice__share:hover, .review-choice__share:focus-visible { background: var(--color-surface, #f4f7f3); color: var(--color-contrast, #0b1f2e); }
.review-choice__status { display: block; margin-top: var(--space-2, 8px); color: var(--color-muted, #51606b); font-size: var(--text-body-md, 0.875rem); word-break: break-all; }


.review-choice__score { display: inline-flex; align-items: center; gap: var(--space-2, 8px); color: var(--color-contrast, #0b1f2e); font-size: var(--text-body-md, 0.875rem); font-weight: var(--weight-bold, 700); }
.package-page #reviews .review-invite { margin: 0 0 var(--space-3, 12px); color: var(--color-contrast, #0b1f2e); font-size: var(--text-body-lg, 1rem); line-height: var(--leading-body, 1.5); }

/* How many have reviewed this trek, and the way to all of them. */
.package-page #reviews .review-summary { flex-basis: 100%; margin: 0; color: var(--color-contrast, #0b1f2e); font-size: var(--text-body-lg, 1rem); line-height: var(--leading-body, 1.5); }
.package-page #reviews .review-summary__link { color: var(--color-link, #295e1d); font-weight: var(--weight-bold, 700); text-decoration: underline; text-underline-offset: var(--space-1, 4px); white-space: nowrap; }
.package-page #reviews .review-summary__link:hover { color: var(--color-contrast, #0b1f2e); }
.package-page #reviews .write-btn { margin-top: var(--space-2, 8px); }

/* All this trek's reviews, over the page, ending with the two ways to act. */
.all-reviews { width: min(48rem, 100%); padding: var(--space-6, 32px) !important; border-radius: var(--radius-2xl, 24px); corner-shape: squircle; background: var(--color-surface, #f4f7f3); color: var(--color-contrast, #0b1f2e); }
.all-reviews__title { margin: 0 0 var(--space-2, 8px); font-size: var(--text-heading-md, 1.5rem); line-height: var(--leading-heading, 1.2); }
.all-reviews__count { margin: 0 0 var(--space-5, 24px); color: var(--color-muted, #51606b); font-size: var(--text-body-md, 0.875rem); }
.all-reviews__list { display: grid; gap: var(--space-4, 16px); margin: 0; padding: 0; list-style: none; }
.all-reviews .review-list li.item { position: relative; margin: 0; padding: var(--space-5, 24px); border-radius: var(--radius-xl, 16px); corner-shape: squircle; background: var(--color-base, #fff); }
.all-reviews__more {
  display: inline-flex; align-items: center; min-height: var(--touch-min, 44px); margin-top: var(--space-5, 24px); padding: 0 var(--space-5, 24px);
  border: var(--border-strong, 2px) solid var(--color-dark, #0b1f2e); border-radius: var(--radius-2xl, 24px); corner-shape: squircle;
  background: var(--color-base, #fff); color: var(--color-contrast, #0b1f2e); font-size: var(--text-body-md, 0.875rem); font-weight: var(--weight-bold, 700); cursor: pointer;
}
.all-reviews__more:hover, .all-reviews__more:focus-visible { background: var(--color-surface, #f4f7f3); }
.all-reviews__more[hidden] { display: none; }
.all-reviews__actions { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3, 12px); margin: var(--space-6, 32px) calc(var(--space-6, 32px) * -1) calc(var(--space-6, 32px) * -1); padding: var(--space-4, 16px) var(--space-6, 32px); border-top: var(--border-hairline, 1px) solid var(--color-outline, #c9d1d6); background: var(--color-base, #fff); }
.all-reviews__ask { flex: 1 1 100%; margin: 0; font-weight: var(--weight-bold, 700); }
.all-reviews__primary, .all-reviews__second { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 var(--space-5, 24px); border-radius: var(--radius-2xl, 24px) !important; corner-shape: squircle; font-size: var(--text-body-lg, 1rem); font-weight: var(--weight-bold, 700); text-transform: none; text-decoration: none; }
.all-reviews__primary { border: var(--border-strong, 2px) solid var(--color-dark, #0b1f2e); background: var(--color-dark, #0b1f2e); color: var(--color-on-dark, #fff) !important; }
.all-reviews__primary:hover, .all-reviews__primary:focus-visible { background: var(--night-800, #1f3342); color: var(--color-on-dark, #fff) !important; }
.all-reviews__second { border: var(--border-strong, 2px) solid var(--color-dark, #0b1f2e); background: var(--color-base, #fff); color: var(--color-contrast, #0b1f2e); }
.all-reviews__second:hover, .all-reviews__second:focus-visible { background: var(--color-surface, #f4f7f3); }
/* WhatsApp at the bar's right. The green dot shows only in office hours, so "online" is true when it shows. */
.all-reviews__whatsapp { display: inline-flex; align-items: center; gap: var(--space-2, 8px); min-height: 44px; margin-left: auto; color: var(--color-contrast, #0b1f2e); font-size: var(--text-body-md, 0.875rem); font-weight: var(--weight-bold, 700); text-decoration: none; }
.all-reviews__whatsapp:hover .all-reviews__whatsapp-label { text-decoration: underline; text-underline-offset: 3px; }
.all-reviews__whatsapp:focus-visible { outline: var(--focus-width, 2px) solid var(--color-focus, #295e1d); outline-offset: var(--focus-offset, 2px); border-radius: var(--radius-md, 8px); }
.all-reviews__whatsapp-icon { position: relative; display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #25d366; color: #fff; font-size: 1.375rem; line-height: 1; }
.all-reviews__online { display: none; position: absolute; right: 0; bottom: 1px; width: 12px; height: 12px; border: var(--border-strong, 2px) solid var(--color-base, #fff); border-radius: 50%; background: var(--leaf-500, #5dbb46); }
.all-reviews__online-text { display: none; }
.all-reviews__whatsapp.is-online .all-reviews__online { display: block; }
.all-reviews__whatsapp.is-online .all-reviews__online-text { display: inline; }
@media (max-width: 575.98px) {
  .all-reviews__actions:has(.all-reviews__whatsapp) { display: grid; grid-template-columns: 1fr 1fr; }
  .all-reviews__actions:has(.all-reviews__whatsapp) .all-reviews__ask { grid-column: 1 / 3; grid-row: 1; padding-right: calc(44px + var(--space-3, 12px)); }
  .all-reviews__whatsapp { grid-column: 2; grid-row: 1; justify-self: end; margin: 0; }
  .all-reviews__whatsapp-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .all-reviews__actions:has(.all-reviews__whatsapp) .all-reviews__primary { grid-column: 1; grid-row: 2; }
  .all-reviews__actions:has(.all-reviews__whatsapp) .all-reviews__second { grid-column: 2; grid-row: 2; }
  .all-reviews__primary, .all-reviews__second { padding: 0 var(--space-3, 12px); white-space: nowrap; }
}
.package-page .tab-pane[id] { scroll-margin-top: var(--space-10, 80px); }
/* Fancybox makes its box a scroller of its own, which stops the actions from sticking to the bottom of the screen. */
.all-reviews.fancybox-content { overflow: visible; }
/* The actions stick to the scroller's padding edge, so the slide's own padding would leave a strip of review under them. */
.fancybox-slide:has(> .all-reviews) { padding-bottom: 0; }
.all-reviews.fancybox-content { margin-bottom: var(--space-2, 8px); }

/* Temperatures by season: one bar per season from the coldest to the warmest, on a scale every chart on the page shares. */
.package-page .temp-chart__key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px); margin: 0 0 var(--space-4, 16px); color: var(--color-muted, #51606b); font-size: var(--text-body-md, 0.875rem); }
.package-page .temp-chart__key-bar { display: inline-block; width: var(--space-6, 32px); height: var(--space-2, 8px); border-radius: var(--radius-pill, 9999px); background: var(--color-primary-dark, #295e1d); }
.package-page .temp-chart__key-zero { display: inline-block; width: 0; height: var(--space-4, 16px); margin-left: var(--space-3, 12px); border-left: var(--border-strong, 2px) dashed var(--color-muted, #51606b); }
.package-page .temp-chart { --temp-label: 11rem; --temp-value: 7.5rem; max-width: var(--container-prose, 40rem); margin: 0 0 var(--space-6, 32px); padding: var(--space-4, 16px) var(--space-5, 24px); border-radius: var(--radius-xl, 16px); corner-shape: squircle; background: var(--color-surface, #f4f7f3); }
.package-page .temp-chart__axis { position: relative; height: var(--space-5, 24px); margin: 0 var(--temp-value) 0 var(--temp-label); color: var(--color-muted, #51606b); font-size: var(--text-body-sm, 0.75rem); }
.package-page .temp-chart__tick { position: absolute; top: 0; transform: translateX(-50%); }
.package-page .temp-chart__rows { margin: 0; padding: 0; list-style: none; }
.package-page .useful-content .temp-chart__rows li.temp-chart__row { display: grid; grid-template-columns: var(--temp-label) 1fr var(--temp-value); align-items: center; gap: 0; min-height: var(--space-8, 48px); margin: 0; padding: 0; font-size: var(--text-body-md, 0.875rem); line-height: var(--leading-heading, 1.2); }
.package-page .useful-content .temp-chart__rows li.temp-chart__row::before { display: none; }
.package-page .temp-chart__season span { display: block; color: var(--color-muted, #51606b); }
.package-page .temp-chart__track { position: relative; height: var(--space-3, 12px); border-radius: var(--radius-pill, 9999px); background: var(--color-base, #fff); }
.package-page .temp-chart__zero { position: absolute; top: calc(var(--space-2, 8px) * -1); bottom: calc(var(--space-2, 8px) * -1); border-left: var(--border-strong, 2px) dashed var(--color-muted, #51606b); }
.package-page .temp-chart__bar { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-pill, 9999px); background: var(--color-primary-dark, #295e1d); }
.package-page .temp-chart__value { padding-left: var(--space-4, 16px); font-weight: var(--weight-bold, 700); white-space: nowrap; }
.package-page .temp-chart__value small { display: block; color: var(--color-muted, #51606b); font-size: var(--text-body-sm, 0.75rem); font-weight: var(--weight-450, 450); }
@media (max-width: 575px) {
  .package-page .temp-chart { --temp-label: 0px; --temp-value: 6.5rem; padding: var(--space-4, 16px); }
  .package-page .useful-content .temp-chart__rows li.temp-chart__row { grid-template-columns: 1fr var(--temp-value); grid-template-areas: "season season" "track value"; row-gap: var(--space-2, 8px); padding: var(--space-2, 8px) 0; }
  .package-page .temp-chart__season { grid-area: season; }
  .package-page .temp-chart__track { grid-area: track; }
  .package-page .temp-chart__value { grid-area: value; }
  .package-page .temp-chart__season span { display: inline; }
}

/* The section bar slides in at once and smoothly, and slides away when it tucks past the end of the trip. */
.package-nav.fixed { transition: transform var(--duration-base, 220ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)), opacity var(--duration-base, 220ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)), visibility 0s; }
.package-nav.fixed.is-tucked { opacity: 0; visibility: hidden; transform: translateY(-100%); transition: transform var(--duration-base, 220ms) var(--ease-standard, ease), opacity var(--duration-base, 220ms) var(--ease-standard, ease), visibility 0s var(--duration-base, 220ms); }

/* The price card eases into place each time it pins. */
@keyframes booking-pin { from { opacity: 0; transform: translateY(calc(var(--space-4, 16px) * -1)); } to { opacity: 1; transform: none; } }
.sidebar .booking-sidebar.booking-sticky { animation: booking-pin var(--duration-slow, 420ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both; }

/* Back to the top: small and round, bottom left, clear of the chat button on the right. */
.to-top {
  position: fixed; left: var(--space-5, 24px); bottom: var(--space-5, 24px); z-index: 20;
  display: inline-flex; align-items: center; justify-content: center; height: 36px; min-width: 36px; padding: 0 9px;
  border: 1px solid var(--color-outline, #c9d1d6); border-radius: var(--radius-pill, 9999px);
  background: var(--color-base, #fff); color: var(--color-contrast, #0b1f2e); cursor: pointer;
  box-shadow: var(--shadow-2, 0 2px 4px rgba(11, 31, 46, 0.1));
  font-size: var(--text-body-md, 0.875rem); font-weight: var(--weight-bold, 700); line-height: 1; white-space: nowrap;
  opacity: 0; transform: translateY(var(--space-3, 12px)); pointer-events: none;
  transition: opacity var(--duration-base, 220ms) var(--ease-out, ease), transform var(--duration-base, 220ms) var(--ease-out, ease), border-color var(--duration-base, 220ms) var(--ease-out, ease);
}
.to-top svg { flex: none; }
/* Drawn at 36px; the tap area is the 44px touch minimum. */
.to-top::before { content: ""; position: absolute; inset: -4px; }
/* Quiet until the reader reaches for it; then it says what it does. */
.to-top.is-shown { opacity: 0.7; transform: none; pointer-events: auto; }
.to-top.is-shown:hover, .to-top.is-shown:focus-visible { opacity: 1; border-color: var(--color-dark, #0b1f2e); }
.to-top__label { display: inline-block; max-width: 0; overflow: hidden; opacity: 0; transition: max-width var(--duration-base, 220ms) var(--ease-out, ease), opacity var(--duration-base, 220ms) var(--ease-out, ease), margin var(--duration-base, 220ms) var(--ease-out, ease); }
.to-top:hover .to-top__label, .to-top:focus-visible .to-top__label { max-width: 8rem; margin-left: var(--space-2, 8px); margin-right: 3px; opacity: 1; }
.to-top:focus-visible { outline: var(--focus-width, 2px) solid var(--color-focus, #295e1d); outline-offset: var(--focus-offset, 2px); }

@media (prefers-reduced-motion: reduce) {
  .package-nav.fixed, .package-nav.fixed.is-tucked, .to-top { transition: none; }
  .sidebar .booking-sidebar.booking-sticky { animation: none; }
}

/* Traveller quotes under the WhatsApp card. The lines share one grid cell, so the box keeps the height of the longest. */
.booking-sidebar .trip-voices { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-5); padding: 0 var(--space-4); }
.booking-sidebar .trip-voices__stage { display: grid; flex: 1; min-width: 0; }
.booking-sidebar .trip-voices__item { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity var(--duration-slow) var(--ease-out), visibility 0s linear var(--duration-slow); }
.booking-sidebar .trip-voices__item.is-current { opacity: 1; visibility: visible; transition: opacity var(--duration-slow) var(--ease-out), visibility 0s; }
.booking-sidebar .trip-voices__quote { margin: 0; padding: 0; border: 0; background: none; position: static; font-size: var(--text-body-md); line-height: var(--leading-body); }
.booking-sidebar .trip-voices__quote::before, .booking-sidebar .trip-voices__quote::after { content: none; display: none; }
.booking-sidebar .trip-voices__quote a { color: var(--color-contrast) !important; font-weight: var(--weight-bold); text-decoration: none; }
.booking-sidebar .trip-voices__quote a:hover { text-decoration: underline; text-underline-offset: var(--space-1); }
.booking-sidebar .trip-voices__who { margin-top: var(--space-1); color: var(--color-muted); font-size: var(--text-body-md); line-height: var(--leading-body); }
.booking-sidebar .trip-voices__who .review-country { color: inherit; font-size: inherit; }
.booking-sidebar .trip-voices__who .review-country__flag { width: 16px; height: 12px; margin: 0 var(--space-1); vertical-align: -1px; }
.booking-sidebar .trip-voices__pause { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; margin-top: -4px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-muted); cursor: pointer; }
.booking-sidebar .trip-voices__pause::before { content: ""; position: absolute; inset: -6px; }
.booking-sidebar .trip-voices__pause:hover { background: var(--color-surface); color: var(--color-contrast); }
.booking-sidebar .trip-voices__pause:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.booking-sidebar .trip-voices__icon-play { display: none; }
.booking-sidebar .trip-voices__pause[aria-pressed="true"] .trip-voices__icon-pause { display: none; }
.booking-sidebar .trip-voices__pause[aria-pressed="true"] .trip-voices__icon-play { display: inline; }
@media (prefers-reduced-motion: reduce) {
  .booking-sidebar .trip-voices__item { transition: none; }
}


/* The phone's booking bar. White, on a hairline, sliding up from the foot of the screen. */
.book-bar { display: none; }
@media (max-width: 991.98px) {
  .book-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9997;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px) calc(var(--space-3, 12px) + env(safe-area-inset-bottom, 0px));
    border-top: var(--border-hairline, 1px) solid var(--color-outline, #c9d1d6);
    background: var(--color-base, #fff); box-shadow: 0 -4px 16px rgba(11, 31, 46, 0.08);
    transform: translateY(100%); visibility: hidden;
    transition: transform var(--duration-slow, 420ms) var(--ease-out, ease), visibility 0s linear var(--duration-slow, 420ms);
  }
  .book-bar.is-shown { transform: none; visibility: visible; transition: transform var(--duration-slow, 420ms) var(--ease-out, ease), visibility 0s; }
  .book-bar__price { margin: 0; color: var(--color-muted, #51606b); font-size: var(--text-body-md, 0.875rem); line-height: var(--leading-body, 1.5); }
  /* The trip's one distinction, above its price, in the words of the chip under the trip's name. Its colour follows the
     trip card's tags: gold is praise guests gave (Guest favourite), leaf is how many chose it (Most popular). */
  .book-bar__standing { display: table; margin-bottom: var(--space-1, 4px); padding: 2px var(--space-2, 8px); border-radius: var(--radius-2xl, 24px); corner-shape: squircle; background: var(--leaf-100, #e0f6da); color: var(--leaf-900, #1d3d14); font-size: var(--text-body-sm, 0.75rem); font-weight: 700; line-height: 1.2; white-space: nowrap; }
  .book-bar__standing--favourite { background: var(--ochre-100, #f7eee1); color: var(--ochre-900, #523812); }
  .book-bar__price b { display: block; color: var(--color-contrast, #0b1f2e); font-size: var(--text-body-xl, 1.125rem); font-weight: var(--weight-extrabold, 800); line-height: 1.2; }
  /* The system's main button on a light ground: the near-black blue, lightening to night 800 on hover. Leaf is kept for the booking box. */
  .book-bar .book-bar__btn { flex: none; width: auto; min-height: var(--touch-min, 44px); margin: 0; padding: var(--space-3, 12px) var(--space-5, 24px) !important; border: var(--border-strong, 2px) solid var(--color-dark, #0b1f2e) !important; border-radius: var(--radius-2xl, 24px) !important; corner-shape: squircle; background-color: var(--color-dark, #0b1f2e) !important; color: var(--color-on-dark, #fff) !important; font-size: var(--text-body-lg, 1rem) !important; font-weight: var(--weight-extrabold, 800); text-transform: none; }
  .book-bar .book-bar__btn:hover, .book-bar .book-bar__btn:active { border-color: var(--night-800) !important; background-color: var(--night-800) !important; }
  .book-bar .book-bar__btn:focus-visible { outline: var(--focus-width, 2px) solid var(--color-focus, #295e1d); outline-offset: var(--focus-offset, 2px); }
  /* Narrow phones: the bar tightens and the button gives way, its words taking two lines if they must, so nothing runs off the screen. */
  @media (max-width: 439.98px) {
    .book-bar { gap: var(--space-2, 8px); padding-left: var(--space-3, 12px); padding-right: var(--space-3, 12px); }
    .book-bar .book-bar__btn { flex: 0 1 auto; min-width: 0; padding: var(--space-2, 8px) var(--space-3, 12px) !important; line-height: 1.2; white-space: normal; text-align: center; }
  }
  /* The chat button and back to top lift clear of the bar while it shows. */
  .bottom-whatsapp, .to-top { transition: bottom var(--duration-slow, 420ms) var(--ease-out, ease), opacity var(--duration-base, 220ms) var(--ease-out, ease), transform var(--duration-base, 220ms) var(--ease-out, ease); }
  body.has-book-bar .bottom-whatsapp { opacity: 0; transform: translateY(16px); pointer-events: none; visibility: hidden; }
  .book-bar__whatsapp { display: flex; flex: none; align-items: center; justify-content: center; width: var(--touch-min, 44px); height: var(--touch-min, 44px); margin-left: auto; border-radius: 50%; background: #25d366; color: #fff; font-size: 1.5rem; text-decoration: none; }
  .book-bar__whatsapp i, .book-bar__whatsapp i::before { position: static; color: #fff; }
  .book-bar__whatsapp:focus-visible { outline: var(--focus-width, 2px) solid var(--color-focus, #295e1d); outline-offset: var(--focus-offset, 2px); }
  /* The bar's height differs by trip and screen (a tag, a button on two lines), so the page script measures it. The
     fallback is the usual height of a bar with a tag, 90px, plus the safe area the measured height already includes. */
  body.has-book-bar .to-top { bottom: calc(var(--book-bar-height, calc(90px + env(safe-area-inset-bottom, 0px))) + var(--space-2, 8px)); }
}
@media (prefers-reduced-motion: reduce) {
  .book-bar, .book-bar.is-shown, .bottom-whatsapp, .to-top { transition: none; }
}


/* Each day's facts take the Forma drawings, muted as on the trip's quick details, so the words lead. */
.itinerary-content .itinerary-meta ul .itinerary-meta__item::before {
  width: 20px !important; height: 20px !important;
  background: var(--color-muted, #51606b) !important;
  -webkit-mask: var(--meta-icon) center / contain no-repeat; mask: var(--meta-icon) center / contain no-repeat;
}
.itinerary-content .itinerary-meta ul .altitude,
.itinerary-content .itinerary-meta ul .sleep-elevation { --meta-icon: url("../images/icons/max-altitude.svg"); }
.itinerary-content .itinerary-meta ul .time,
.itinerary-content .itinerary-meta ul .trek-duration,
.itinerary-content .itinerary-meta ul .flight-duration,
.itinerary-content .itinerary-meta ul .drive-duration { --meta-icon: url("../images/icons/duration.svg"); }
.itinerary-content .itinerary-meta ul .food { --meta-icon: url("../images/icons/meals.svg"); }
.itinerary-content .itinerary-meta ul .accommodation { --meta-icon: url("../images/icons/accommodation.svg"); }
.itinerary-content .itinerary-meta ul .trek-distance { --meta-icon: url("../images/icons/trek-distance.svg"); }
.itinerary-content .itinerary-meta ul .drive-distance { --meta-icon: url("../images/icons/transportation.svg"); }
.itinerary-content .itinerary-meta ul .overnight-place { --meta-icon: url("../images/icons/region-or-destination.svg"); }
.itinerary-content .itinerary-meta ul .day-difficulty { --meta-icon: url("../images/icons/difficulty-or-grade.svg"); }

/* The day as a page of a calendar: a dark band with the word, the number under it, two rings on top. */
.package-page .itinerary-content #itinerary_accordion { position: relative; }
.package-page .itinerary-content .accordion-item .days { position: relative; z-index: 3; display: flex; flex: none; align-items: flex-start; justify-content: center; width: 64px; }
.package-page .itinerary-content .accordion-item .days b {
  position: relative; display: flex; flex: none; flex-direction: column; align-items: center; width: 52px; height: auto; padding: 0 0 6px;
  border: var(--border-hairline, 1px) solid var(--color-outline, #c9d1d6); border-radius: var(--radius-md, 8px) !important;
  background: var(--color-base, #fff) !important; box-shadow: var(--shadow-2, 0 2px 4px rgba(11, 31, 46, 0.1));
  color: var(--color-contrast, #0b1f2e) !important; font-size: 1.375rem; font-weight: var(--weight-extrabold, 800); line-height: 1.1;
}
.package-page .itinerary-content .accordion-item .days b small {
  display: block; align-self: stretch; margin: -1px -1px 4px; padding: 8px 0 3px;
  border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0; background: var(--color-dark, #0b1f2e);
  color: var(--color-on-dark, #fff) !important; font-size: 0.6875rem; font-weight: var(--weight-bold, 700); line-height: 1.2; letter-spacing: 0.02em; text-transform: none;
}
.package-page .itinerary-content .accordion-item .days b::before,
.package-page .itinerary-content .accordion-item .days b::after {
  content: ""; position: absolute; top: -4px; z-index: 1; width: 4px; height: 9px;
  border-radius: 2px; background: var(--night-400, #8699a7); box-shadow: 0 0 0 2px var(--color-base, #fff);
}
.package-page .itinerary-content .accordion-item .days b::before { left: 13px; }
.package-page .itinerary-content .accordion-item .days b::after { right: 13px; }

/* The trail between the days: a dotted path, its dots filled two steps darker as far as the reader has read, quiet enough not to pull the eye from the writing; a footprint walks at its tip, and can be dragged.
   It sits above the day panels, whose white ground hid it, and under the calendar pages. The footprint walks behind the pages too, so it never covers a day's number. */
.itin-trail { position: absolute; z-index: 2; width: 4px; margin-left: -1px; pointer-events: none; }
.itin-trail__line,
.itin-trail__walked { position: absolute; left: 0; top: 0; width: 4px; background-size: 4px 10px; background-repeat: repeat-y; }
.itin-trail__line { bottom: 0; background-image: radial-gradient(circle, var(--color-outline, #c9d1d6) 1.5px, transparent 2px); }
.itin-trail__walked { height: var(--walked, 0px); background-image: radial-gradient(circle, var(--night-400, #8699a7) 1.5px, transparent 2px); }
.itin-foot {
  position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -16px 0 0 -16px;
  border: var(--border-hairline, 1px) solid var(--color-outline, #c9d1d6); border-radius: var(--radius-pill, 9999px);
  background: var(--color-base, #fff); box-shadow: var(--shadow-2, 0 2px 4px rgba(11, 31, 46, 0.1));
  cursor: grab; touch-action: none; user-select: none; transition: opacity var(--duration-base, 220ms) var(--ease-out, ease);
}
.itin-foot::before { content: ""; position: absolute; inset: -6px; }
.itin-foot::after {
  content: ""; width: 20px; height: 20px; background: var(--color-contrast, #0b1f2e);
  -webkit-mask: url("../images/icons/footprint.svg") center / contain no-repeat; mask: url("../images/icons/footprint.svg") center / contain no-repeat;
  transform: rotate(-12deg); transition: transform var(--duration-fast, 140ms) var(--ease-out, ease);
}
.itin-foot.is-left::after { transform: scaleX(-1) rotate(-12deg); }
.itin-foot.is-dragging { cursor: grabbing; }
.itin-foot.is-hidden { opacity: 0; }
.itin-foot.is-dragging, .itin-foot:hover { border-color: var(--color-dark, #0b1f2e); }
@media (prefers-reduced-motion: reduce) { .itin-foot, .itin-foot::after { transition: none; } }


/* "Write a review" and its line side by side: the button first, the line beside it. A phone stacks them. */
.package-page #reviews .write-btn { display: flex; align-items: center; gap: var(--space-3, 12px) var(--space-4, 16px); }
.package-page #reviews .write-btn .review-btn { flex: none; order: 0; }
.package-page #reviews .write-btn .review-invite { margin: 0; }
@media (max-width: 575.98px) { .package-page #reviews .write-btn { flex-direction: column; align-items: flex-start; } }

/* Tertiary button: the button's shape with no frame and no fill, for a quiet action beside a heading. Hover fills it with the mist. */
.package-page .btn.btn--tertiary {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-min, 44px); margin: 0;
  padding: var(--space-2, 8px) var(--space-4, 16px) !important; border: var(--border-strong, 2px) solid transparent !important;
  border-radius: var(--radius-2xl, 24px) !important; corner-shape: squircle; background: transparent !important; box-shadow: none !important;
  color: var(--color-contrast, #0b1f2e) !important; font-size: var(--text-body-md, 0.875rem) !important; font-weight: var(--weight-bold, 700);
  text-decoration: none !important; text-transform: none;
}
.package-page .btn.btn--tertiary:hover { background: var(--color-surface, #f4f7f3) !important; }
.package-page .btn.btn--tertiary:active { background: var(--color-primary-light, #ebf8e7) !important; }
.package-page .btn.btn--tertiary:focus-visible { outline: var(--focus-width, 2px) solid var(--color-focus, #295e1d); outline-offset: var(--focus-offset, 2px); }
.package-page #faqs .content-title { align-items: center; }

/* A question opens and closes with a button inside its heading, so a keyboard reaches it.
   One chevron on the right: down while closed, up while open. The theme's plus and minus are gone. */
.package-page .faqs .accordion-header h3.faq-question { margin: 0; padding: 0; }
.package-page .faqs .accordion-header h3::before,
.package-page .faqs .accordion-header h3::after { content: none !important; display: none !important; }
.package-page .faqs .faq-question__button {
  display: flex; align-items: center; gap: var(--space-4, 16px); width: 100%; min-height: var(--touch-min, 44px);
  padding: var(--space-2, 8px) 0; border: 0; background: none; color: var(--color-contrast, #0b1f2e);
  font: inherit; font-weight: var(--weight-bold, 700); text-align: left; cursor: pointer;
}
.package-page .faqs .faq-question__button::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-left: auto; margin-right: var(--space-2, 8px);
  border-right: var(--border-strong, 2px) solid currentColor; border-bottom: var(--border-strong, 2px) solid currentColor;
  transform: translateY(-3px) rotate(45deg); transition: transform var(--duration-fast, 140ms) var(--ease-standard, ease);
}
.package-page .faqs .faq-question__button[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
.package-page .faqs .faq-question__button:hover { text-decoration: underline; text-decoration-thickness: var(--border-strong, 2px); text-underline-offset: var(--space-1, 4px); }
.package-page .faqs .faq-question__button:focus-visible { outline: var(--focus-width, 2px) solid var(--color-focus, #295e1d); outline-offset: var(--focus-offset, 2px); border-radius: var(--radius-sm, 4px); }
.package-page .faqs .accordion-item .accordion-body { padding-left: 0; padding-right: var(--space-7, 40px); }
@media (prefers-reduced-motion: reduce) { .package-page .faqs .faq-question__button::after { transition: none; } }

/* The note under the itinerary and the overview: the statement panel with actions, read from the left, with one main button and one outlined.
   The theme drew it in its old blue with white buttons; on the dark token the panel, the buttons and their words were one colour. */
.package-page .itinerary-brief,
.package-page .package-note-content--overview-note {
  margin-top: var(--space-6, 32px);
  padding: var(--space-5, 24px);
  background: var(--color-surface, #f4f7f3);
  text-align: left;
}
.package-page .itinerary-brief p,
.package-page .package-note-content--overview-note p {
  max-width: var(--container-prose, 40rem);
  margin: 0 0 var(--space-4, 16px);
  color: var(--color-contrast, #0b1f2e);
  font-size: var(--text-body-lg, 1rem);
  line-height: var(--leading-body, 1.5);
}
.package-page .itinerary-brief :is(h3, h4, h5),
.package-page .package-note-content--overview-note :is(h3, h4, h5) {
  margin: 0 0 var(--space-2, 8px);
  color: var(--color-contrast, #0b1f2e);
  text-transform: none;
}
.package-page .itinerary-brief .itinerary-btn,
.package-page .package-note-content--overview-note .itinerary-btn {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-3, 12px);
}
.package-page .itinerary-btn .btn.trip-note__ask,
.package-page .itinerary-btn .btn.trip-note__pdf {
  margin: 0;
  min-height: 44px;
  padding: 10px 20px;
  border: var(--border-strong, 2px) solid var(--color-dark, #0b1f2e);
  font-size: var(--text-body-md, 0.9375rem);
  font-weight: 700;
  text-transform: none;
}
.package-page .itinerary-btn .btn.trip-note__ask { background: var(--color-dark, #0b1f2e); color: var(--color-on-dark, #fff); }
.package-page .itinerary-btn .btn.trip-note__ask:hover { background: var(--night-800, #1f3342); border-color: var(--night-800, #1f3342); }
.package-page .itinerary-btn .btn.trip-note__pdf { background: var(--color-base, #fff); color: var(--color-contrast, #0b1f2e); }
.package-page .itinerary-btn .btn.trip-note__pdf:hover { background: var(--color-surface, #f4f7f3); color: var(--color-on-surface, #0b1f2e); }
.package-page .itinerary-btn .btn:focus-visible { outline: 2px solid var(--color-dark, #0b1f2e); outline-offset: 3px; }
.package-page .itinerary-btn .btn.trip-note__ask,
.package-page .itinerary-btn .btn.trip-note__pdf { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2, 8px); }
.package-page .itinerary-btn .btn.trip-note__ask::before,
.package-page .itinerary-btn .btn.trip-note__pdf::before {
  content: ""; flex: none; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("../images/icons/chat.svg") center / contain no-repeat; mask: url("../images/icons/chat.svg") center / contain no-repeat;
}
.package-page .itinerary-btn .btn.trip-note__pdf::before { -webkit-mask-image: url("../images/icons/download.svg"); mask-image: url("../images/icons/download.svg"); }
@media (max-width: 575.98px) {
  .package-page .itinerary-btn .btn.trip-note__ask,
  .package-page .itinerary-btn .btn.trip-note__pdf { flex: 1 1 100%; }
}

/* The arrow lists stand a step in from the heading and the writing above them, so they read as a list and not as more paragraphs. */
.package-page .highlights > ul { padding-left: calc(30px + var(--space-4, 16px)); }
.package-page .itinerary .accordion-collapse .activities-inclusions-container ul { padding-left: var(--space-4, 16px); }

/* Each day's facts. The panel is as wide as the day's writing, its two columns sharing it. Each icon sits on a small rounded tile,
   centred on its line of text, and only the label is bold: "Meals:" reads as the label, "Breakfast, Lunch" as the answer. */
.package-page .itinerary-content .itinerary-meta {
  width: auto;
  max-width: var(--container-prose, 40rem);
  padding: var(--space-4, 16px);
}
.package-page .itinerary-content .itinerary-meta ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3, 12px) var(--space-6, 32px);
}
.package-page .itinerary-content .itinerary-meta ul li.itinerary-meta__item {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  min-height: 32px;
  max-width: none;
  padding: 0;
}
.package-page .itinerary-content .itinerary-meta ul li.itinerary-meta__item::before {
  position: relative !important;
  z-index: 1;
  top: auto !important;
  left: auto !important;
  flex: none;
  margin: 0 0 0 6px !important;
}
.package-page .itinerary-content .itinerary-meta ul li.itinerary-meta__item::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  top: 50%;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border-radius: var(--radius-md, 8px);
  corner-shape: squircle;
  background: var(--color-base, #fff);
}
.package-page .itinerary-content .itinerary-meta ul li.itinerary-meta__item span {
  margin-left: 6px;
  color: var(--color-contrast, #0b1f2e);
  font-size: var(--text-body-md, 0.9375rem);
  font-weight: var(--weight-450, 450);
  line-height: 1.4;
}
.package-page .itinerary-content .itinerary-meta ul li.itinerary-meta__item span b {
  padding-right: 4px;
  font-size: inherit;
  font-weight: var(--weight-bold, 700);
}
@media (max-width: 575.98px) {
  .package-page .itinerary-content .itinerary-meta { width: auto; }
  .package-page .itinerary-content .itinerary-meta ul { grid-template-columns: 1fr; }
}

/* A day read as one line when it is closed: the days stand a step apart so the trail shows between them, and each title is centred on its calendar page. */
.package-page .itinerary-content #itinerary_accordion .accordion-item { margin-bottom: var(--space-6, 32px); }
.package-page .itinerary-content #itinerary_accordion .accordion-item:last-child { margin-bottom: 0; }
.package-page .itinerary-content #itinerary_accordion .accordion-button { display: flex; align-items: center; min-height: 60px; }
.package-page .itinerary-content #itinerary_accordion .accordion-button h3 { margin: 0; }
.package-page .itinerary-content #itinerary_accordion .accordion-button:hover h3 { text-decoration: underline; text-underline-offset: 3px; }

/* Under a closed day's title, one quiet line: "Overnight in Pokhara · 830 m · Trek 5-6 hours". Open, the facts panel says it in full. */
.package-page .itinerary-content #itinerary_accordion .accordion-button { flex-direction: column; align-items: flex-start; justify-content: center; }
.package-page .itinerary-content #itinerary_accordion .day-summary { display: none; flex-wrap: wrap; column-gap: var(--space-2, 8px); margin-top: 2px; color: var(--color-muted, #51606b); font-size: var(--text-body-md, 0.9375rem); font-weight: var(--weight-450, 450); line-height: 1.4; text-align: left; }
.package-page .itinerary-content #itinerary_accordion .accordion-button.collapsed .day-summary { display: flex; }
.package-page .itinerary-content #itinerary_accordion .accordion-button .day-summary > span { width: auto; padding: 0; white-space: nowrap; }
.package-page .itinerary-content #itinerary_accordion .day-summary > span:not(:last-child)::after { content: "\00B7"; margin-left: var(--space-2, 8px); }

/* The trip's standing: the seal and "Guest favourite", the line that says why, then the rating and the count.
   Shown only on a trip the site's own figures single out. The whole card opens the reviews. */
.package-page .trip-standing {
  display: flex; align-items: center; gap: var(--space-5, 24px);
  margin: 0 0 var(--space-6, 32px); padding: var(--space-4, 16px) var(--space-5, 24px);
  border: var(--border-hairline, 1px) solid var(--color-outline, #c9d1d6); border-radius: var(--radius-2xl, 24px); corner-shape: squircle;
  background: var(--color-base, #fff); color: var(--color-contrast, #0b1f2e); text-decoration: none;
  transition: border-color var(--duration-fast, 140ms) var(--ease-out, ease), box-shadow var(--duration-fast, 140ms) var(--ease-out, ease);
}
.package-page .trip-standing:hover { border-color: var(--color-dark, #0b1f2e); box-shadow: var(--shadow-2, 0 2px 4px rgba(11, 31, 46, 0.1)); color: var(--color-contrast, #0b1f2e); }
.package-page .trip-standing:focus-visible { outline: var(--focus-width, 2px) solid var(--color-focus, #295e1d); outline-offset: var(--focus-offset, 2px); }
.package-page .trip-standing__badge { display: flex; flex: none; align-items: center; gap: var(--space-3, 12px); }
/* The label stands on two lines, one word over the other, as a seal's words do. */
.package-page .trip-standing__badge b span { display: block; }
.package-page .trip-standing__badge b {
  color: var(--color-primary-dark, #295e1d);
  font-family: "omnes-variable", var(--font-body, "Mulish", sans-serif); font-variation-settings: "wdth" 53, "wght" 600;
  font-size: var(--text-heading-md, 1.375rem); font-weight: 600; line-height: 1;
}
/* A seal of our own: the Forma medal on a leaf tile, turned a few degrees so it reads as a stamp. */
.package-page .trip-standing__seal {
  position: relative; flex: none; width: 48px; height: 48px;
  border-radius: var(--radius-xl, 16px); corner-shape: squircle;
  background: var(--color-primary-light, #ebf8e7);
  box-shadow: inset 0 0 0 var(--border-hairline, 1px) color-mix(in srgb, var(--color-primary-dark, #295e1d) 20%, transparent);
  transform: rotate(-6deg);
  transition: transform var(--duration-base, 240ms) var(--ease-out, ease);
}
.package-page .trip-standing__seal::before {
  content: ""; position: absolute; inset: 11px; background: var(--color-primary-dark, #295e1d);
  -webkit-mask: url("../images/icons/medal.svg") center / contain no-repeat; mask: url("../images/icons/medal.svg") center / contain no-repeat;
}
.package-page .trip-standing:hover .trip-standing__seal { transform: rotate(0deg); }
.package-page .trip-standing__stars {
  display: block; width: calc(var(--stars, 5) * 14px); height: 12px; background: var(--color-primary-dark, #295e1d);
  -webkit-mask: url("../images/icons/star-filled.svg") left center / 14px 12px repeat-x; mask: url("../images/icons/star-filled.svg") left center / 14px 12px repeat-x;
}
@media (prefers-reduced-motion: reduce) { .package-page .trip-standing__seal { transition: none; } }
.package-page .trip-standing__text { flex: 1 1 auto; font-size: var(--text-body-lg, 1rem); font-weight: var(--weight-bold, 700); line-height: 1.4; }
.package-page .trip-standing__stats { display: flex; flex: none; align-items: stretch; }
.package-page .trip-standing__stat {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 72px; padding: 0 var(--space-4, 16px);
  font-size: var(--text-body-sm, 0.75rem); font-weight: var(--weight-450, 450); line-height: 1.3;
}
.package-page .trip-standing__stat + .trip-standing__stat { border-left: var(--border-hairline, 1px) solid var(--color-outline, #c9d1d6); }
.package-page .trip-standing__stat:last-child { padding-right: 0; }
.package-page .trip-standing__stat b { font-size: var(--text-heading-md, 1.375rem); font-weight: var(--weight-extrabold, 800); line-height: 1.1; }
@media (max-width: 767.98px) {
  .package-page .trip-standing { flex-wrap: wrap; gap: var(--space-3, 12px) var(--space-4, 16px); padding: var(--space-4, 16px); }
  .package-page .trip-standing__text { order: 3; flex-basis: 100%; }
  .package-page .trip-standing__stats { margin-left: auto; }
}

/* List marks from the site's own set, not the theme's icon font. A plain list gets a brand-green dot; a list where the
   mark means something keeps it, drawn in Forma: a tick for included, a cross for not included. Each mark is centred
   on the item's first line. */
.package-page .highlights > ul > li::before,
.package-page .itinerary .accordion-collapse .activities-inclusions-container ul li::before {
  content: "" !important;
  width: var(--space-2, 8px); height: var(--space-2, 8px); border-radius: 50%;
  background: var(--color-primary-dark, #295e1d);
  top: 0.55em; top: calc((1lh - var(--space-2, 8px)) / 2);
  padding: 0;
}
.package-page .highlights > ul > li::before { left: -25px; }
.package-page .itinerary .accordion-collapse .activities-inclusions-container ul li::before { left: 4px; }
.package-page .activities-inclusions-container__title::before,
.package-page .inclusions ul li::before,
.package-page .cost_dtl .cost_detail.cost_exclude ul li::before,
.package-page .book-service ul > li::before {
  content: "" !important;
  font-family: inherit;
  width: 20px; height: 20px;
  top: 0.15em; top: calc((1lh - 20px) / 2);
  background-color: currentColor;
  -webkit-mask: url("../images/icons/what-is-included.svg") center / contain no-repeat;
  mask: url("../images/icons/what-is-included.svg") center / contain no-repeat;
}
.package-page .cost_dtl .cost_detail.cost_exclude ul li::before {
  -webkit-mask-image: url("../images/icons/close.svg"); mask-image: url("../images/icons/close.svg");
  -webkit-mask-size: 14px; mask-size: 14px;
}
.package-page .optional-activities .activities-inclusions-container__title::before {
  -webkit-mask-image: url("../images/icons/activity.svg"); mask-image: url("../images/icons/activity.svg");
}
.package-page .activities-inclusions-container__title::before { color: var(--color-primary-dark, #295e1d); }

/* A day's photos take the same rounded corner as the guests' photos. */
.package-page .itinerary .itinerary-photo-item { border-radius: var(--radius-xl, 16px); corner-shape: squircle; overflow: hidden; }
.package-page .itinerary .itinerary-photo-item a { display: block; border-radius: var(--radius-xl, 16px); corner-shape: squircle; overflow: hidden; }
.package-page .itinerary .itinerary-photo-item a::before { border-radius: inherit; background: rgba(11, 31, 46, 0.35); }
.package-page .itinerary .itinerary-photo-item img { border-radius: var(--radius-xl, 16px); corner-shape: squircle; }
.package-page .itinerary .itinerary-photo-item a:focus-visible { outline: var(--focus-width, 2px) solid var(--color-focus, #295e1d); outline-offset: var(--focus-offset, 2px); }

/* The activities heading: its icon centred on the one line of the title, and a step of space before the list. The editor
   leaves an empty paragraph after the title, which doubled that space. */
.package-page .activities-inclusions-container__title { margin-bottom: var(--space-3, 12px); }
.package-page .activities-inclusions-container__title::before { top: 50%; margin-top: -10px; }
.package-page .activities-inclusions-container p:empty { display: none; }

/* A day's photos: each caption under its photo in small type, and the arrows the system's Slider controls part, centred
   on the photos and gone at either end rather than greyed. */
.package-page .itinerary .itinerary-photo-caption {
  margin: var(--space-2, 8px) 0 0; color: var(--color-muted, #51606b);
  font-size: var(--text-body-sm, 0.75rem); font-weight: var(--weight-450, 450); line-height: 1.4;
}
.package-page .itinerary .itinerary-photo-caption::first-letter { text-transform: uppercase; }
.package-page .itinerary .itinerary-photos-slider-navigation > .swiper-button-prev,
.package-page .itinerary .itinerary-photos-slider-navigation > .swiper-button-next {
  top: var(--photo-mid, 50%); width: var(--touch-min, 44px); height: var(--touch-min, 44px); margin: calc(var(--touch-min, 44px) / -2) 0 0; padding: 0;
  border: var(--border-hairline, 1px) solid var(--color-outline, #c9d1d6); border-radius: var(--radius-pill, 999px);
  background: var(--color-base, #fff); color: var(--color-contrast, #0b1f2e); box-shadow: none; opacity: 1;
  transition: border-color var(--duration-fast, 140ms) var(--ease-out, ease), opacity var(--duration-fast, 140ms) var(--ease-out, ease);
}
.package-page .itinerary .itinerary-photos-slider-navigation > .swiper-button-prev { left: -12px; }
.package-page .itinerary .itinerary-photos-slider-navigation > .swiper-button-next { right: -12px; }
.package-page .itinerary .itinerary-photos-slider-navigation > button::after { display: none; }
.package-page .itinerary .itinerary-photos-slider-navigation > button::before {
  content: ""; width: calc(var(--space-5, 24px) - var(--space-1, 4px)); height: calc(var(--space-5, 24px) - var(--space-1, 4px)); background: currentColor;
  -webkit-mask: url("../images/icons/chevron-right.svg") center / contain no-repeat; mask: url("../images/icons/chevron-right.svg") center / contain no-repeat;
}
.package-page .itinerary .itinerary-photos-slider-navigation > .swiper-button-prev::before { transform: scaleX(-1); }
.package-page .itinerary .itinerary-photos-slider-navigation > button:hover { border-color: var(--color-contrast, #0b1f2e); }
.package-page .itinerary .itinerary-photos-slider-navigation > button:focus-visible { border-color: var(--color-contrast, #0b1f2e); outline: var(--focus-width, 2px) solid var(--color-focus, #295e1d); outline-offset: var(--focus-offset, 2px); }
.package-page .itinerary .itinerary-photos-slider-navigation > .swiper-button-disabled { opacity: 0; pointer-events: none; }
@media (max-width: 676px) {
  .package-page .itinerary .itinerary-photos-slider-navigation > .swiper-button-prev { left: -8px; }
  .package-page .itinerary .itinerary-photos-slider-navigation > .swiper-button-next { right: -8px; }
}

/* More than four photos in a day: from a tablet up, the first four in a row and "+N more" over the fourth, which opens
   the gallery with every photo. Phones keep the swipe strip. */
.package-page .itinerary .itinerary-photo-more { display: none; }
@media (min-width: 768px) {
  .package-page .itinerary .has-more-photos .swiper-wrapper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; transform: none !important; }
  .package-page .itinerary .has-more-photos .swiper-slide { width: auto !important; margin: 0 !important; }
  .package-page .itinerary .has-more-photos .swiper-slide:nth-child(n+5) { display: none; }
  .package-page .itinerary .has-more-photos .itinerary-photos-slider-navigation { display: none; }
  .package-page .itinerary .itinerary-photo-item .has-more::after { display: none; }
  /* The last tile says there are more: a small label in its bottom right corner, the photograph left as it is. */
  .package-page .itinerary .itinerary-photo-more {
    position: absolute; right: var(--space-2); bottom: var(--space-2); z-index: 1; display: block;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md); corner-shape: squircle;
    background: var(--color-base); color: var(--color-contrast);
    font-size: var(--text-body-sm); font-weight: var(--weight-bold); line-height: var(--leading-tight);
  }
  .package-page .itinerary .itinerary-photo-item .has-more:hover .itinerary-photo-more { text-decoration: underline; }
}

/* Lists in the trip's writing, not the day facts' grid: every mark stands --space-4 in from the heading above it. A tick or a cross takes 30px
   with its gap, a dot 22px, a bullet or a number the browser's own. */
.package-page :is(.short-detail, .trial-psychology, .useful-info, .faq-content, .accordion-body) :is(ul, ol):not([class]):not(.itinerary-meta *) { padding-left: calc(var(--space-4, 16px) + 1.25em); }
.package-page :is(.short-detail, .trial-psychology, .useful-info, .faq-content, .accordion-body) ol:not([class]):not(.itinerary-meta *) { padding-left: calc(var(--space-4, 16px) + 1.5em); }
.package-page .highlights > ul { padding-left: calc(var(--space-4, 16px) + 22px); }
.package-page .highlights > ul > li::before { left: -22px; }
.package-page .inclusions ul,
.package-page .cost_dtl .cost_detail.cost_exclude ul { margin-left: 0; padding-left: calc(var(--space-4, 16px) + 30px); }
.package-page .inclusions ul li,
.package-page .cost_dtl .cost_detail.cost_exclude ul li { margin-left: 0; padding-left: 0; }
.package-page .itinerary .accordion-collapse .activities-inclusions-container ul { padding-left: var(--space-4, 16px); }
.package-page .itinerary .accordion-collapse .activities-inclusions-container ul li { padding-left: 22px; }
.package-page .itinerary .accordion-collapse .activities-inclusions-container ul li::before { left: 0; }

/* The full cost details take the marks of "What the price covers": a tick for included, a dash for not, each on a round.
   On the white page the round is the covers panel's pale green, so the two read as one. */
.package-page .inclusions ul,
.package-page .cost_dtl .cost_detail.cost_exclude ul { padding-left: calc(var(--space-4, 16px) + 24px + var(--space-3, 12px)); }
.package-page .inclusions ul li,
.package-page .cost_dtl .cost_detail.cost_exclude ul li { position: relative; }
.package-page .inclusions ul li::after,
.package-page .cost_dtl .cost_detail.cost_exclude ul li::after {
  content: ""; position: absolute; left: calc((24px + var(--space-3, 12px)) * -1); top: calc((1lh - 24px) / 2);
  width: 24px; height: 24px; border-radius: 50%; background: var(--color-primary-light, #ebf8e7);
}
.package-page .cost_dtl .cost_detail.cost_exclude ul li::after { background: var(--color-surface, #f4f7f3); }
.package-page .inclusions ul li::before,
.package-page .cost_dtl .cost_detail.cost_exclude ul li::before {
  z-index: 1; -webkit-mask: none !important; mask: none !important; background: none !important;
  left: calc((24px + var(--space-3, 12px)) * -1 + 7px); border-radius: 0;
}
.package-page .inclusions ul li::before {
  top: calc((1lh - 24px) / 2 + 7px); width: 10px; height: 5px;
  border: solid var(--color-primary-dark, #295e1d); border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
.package-page .cost_dtl .cost_detail.cost_exclude ul li::before {
  top: calc((1lh - 24px) / 2 + 11px); width: 10px; height: 0;
  border: 0; border-bottom: 2px solid var(--color-muted, #51606b); transform: none;
}

/* A day's open-and-close mark: the FAQ's drawn chevron, in place of the theme's icon-font glyph. Down when closed, up when open. */
.package-page .itinerary-content .accordion-item .accordion-button::before {
  content: "" !important; font-family: inherit;
  top: 50%; right: var(--space-2, 8px); left: auto; width: 10px; height: 10px; margin: 0;
  border: 0; border-right: var(--border-strong, 2px) solid currentColor; border-bottom: var(--border-strong, 2px) solid currentColor;
  transform: translateY(2px) rotate(225deg); transform-origin: 50% 50%; margin-top: -5px;
  transition: transform var(--duration-fast, 140ms) var(--ease-standard, ease);
}
.package-page .itinerary-content .accordion-item .accordion-button.collapsed::before { transform: translateY(-3px) rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .package-page .itinerary-content .accordion-item .accordion-button::before { transition: none; } }

/* The price in the section bar, on wide screens once the booking box has scrolled away. A click opens the prices and the way to book. */
.package-nav .btn-top { display: flex; align-items: center; gap: var(--space-3, 12px); }
.package-nav .nav-price { position: relative; }
.package-nav .nav-price__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  height: var(--touch-min, 44px);
  padding: 0 var(--space-3, 12px) 0 var(--space-4, 16px);
  border: 0;
  border-radius: 24px;
  corner-shape: squircle;
  background: var(--color-dark, #0b1f2e);
  color: var(--color-on-dark, #fff);
  font-size: var(--text-body-md, 0.875rem);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  animation: nav-price-in var(--duration-base, 240ms) var(--ease-out, ease) both;
}
.package-nav .nav-price__toggle[hidden] { display: none; }
.package-nav .nav-price__toggle b { font-weight: 800; }
.package-nav .nav-price__per { color: var(--color-on-dark-muted); font-weight: var(--weight-450, 450); }
.package-nav .nav-price__toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  margin: -3px 0 0 var(--space-1, 4px);
  border-right: var(--border-strong, 2px) solid currentColor;
  border-bottom: var(--border-strong, 2px) solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duration-fast, 140ms) var(--ease-standard, ease);
}
.package-nav .nav-price__toggle[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(225deg); }
.package-nav .nav-price__toggle:hover, .package-nav .nav-price__toggle[aria-expanded="true"] { background: var(--night-800); }
.package-nav .nav-price__toggle:focus-visible { outline: var(--focus-width, 2px) solid var(--color-focus, #295e1d); outline-offset: var(--focus-offset, 2px); }

/* The panel is the booking box in small: the dark ground, the price in white, the group prices in their own darker box,
   the green button, the outlined second button and the two promises, so a guest meets one design wherever the price opens. */
.package-nav .nav-price__panel {
  position: absolute;
  top: calc(100% + var(--space-3, 12px));
  right: 0;
  z-index: 20;
  width: 340px;
  padding: var(--space-4, 16px);
  border: 0;
  border-radius: var(--radius-2xl, 24px);
  corner-shape: squircle;
  background: var(--color-dark, #0b1f2e);
  box-shadow: var(--shadow-3);
  color: var(--color-on-dark-muted, #e4e9ec);
  text-align: left;
  white-space: normal;
}
.package-nav .nav-price__panel[hidden] { display: none; }
.package-nav .nav-price__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1, 4px) var(--space-3, 12px); margin: 0 0 var(--space-3, 12px); padding: 0 var(--space-1, 4px); }
.package-nav .nav-price__label { flex-basis: 100%; margin: 0; color: var(--color-on-dark-muted, #e4e9ec); font-size: var(--text-body-sm); }
.package-nav .nav-price__tag { display: inline-flex; align-items: baseline; gap: var(--space-2, 8px); }
.package-nav .nav-price__tag b { color: var(--color-on-dark, #fff); font-size: var(--text-heading-md); font-weight: 900; line-height: var(--leading-heading); }
.package-nav .nav-price__covers { flex-basis: 100%; font-size: var(--text-body-sm); }
.package-nav .nav-price__covers a { color: var(--color-on-dark-link, #fff); text-decoration: underline; text-decoration-color: var(--night-400, #8699a7); text-underline-offset: var(--space-1, 4px); }
.package-nav .nav-price__groups { margin: 0 0 var(--space-4, 16px); padding: var(--space-2, 8px) var(--space-3, 12px); border: var(--border-hairline, 1px) solid var(--night-700, #364754); border-radius: var(--radius-xl, 16px); corner-shape: squircle; background: var(--night-800, #1f3342); }
.package-nav .nav-price__groups .nav-price__label { margin: var(--space-1, 4px) 0 var(--space-2, 8px); color: var(--color-on-dark, #fff); font-size: var(--text-body-md); font-weight: 700; }
.package-nav .nav-price__groups table { width: 100%; margin: 0; border-collapse: collapse; font-size: var(--text-body-sm); }
.package-nav .nav-price__groups thead, .package-nav .nav-price__groups .sr-only { display: none; }
.package-nav .nav-price__groups td { padding: var(--space-1, 4px) 0; border: 0; border-top: var(--border-hairline, 1px) solid var(--night-700, #364754); background: none; color: var(--color-on-dark-muted, #e4e9ec); vertical-align: middle; }
.package-nav .nav-price__groups td:last-child { text-align: right; white-space: nowrap; }
.package-nav .nav-price__groups .price { color: var(--color-on-dark, #fff); font-weight: 700; }
.package-nav .nav-price__actions { display: grid; gap: var(--space-2, 8px); }
.package-nav .nav-price__actions .btn { height: auto; min-height: calc(var(--touch-min, 44px) + var(--space-1, 4px)); display: inline-flex; align-items: center; justify-content: center; text-transform: none; font-size: var(--text-body-lg, 1rem) !important; }
.package-nav .nav-price__actions .btn-primary { border: var(--border-strong, 2px) solid var(--color-primary) !important; border-radius: var(--radius-2xl, 24px) !important; corner-shape: squircle; background: var(--color-primary) !important; color: var(--color-on-primary, #0b1f2e) !important; font-weight: 800; }
.package-nav .nav-price__actions .btn-primary:hover, .package-nav .nav-price__actions .btn-primary:active { border-color: var(--leaf-400) !important; background: var(--leaf-400) !important; }
.package-nav .nav-price__panel :focus-visible { outline-color: var(--color-focus-on-dark, #fff) !important; }
.package-nav .nav-price__second { min-height: var(--touch-min, 44px) !important; border: 2px solid var(--night-400, #8699a7); border-radius: var(--radius-2xl, 24px); corner-shape: squircle; font-weight: 700; background: transparent; color: var(--color-on-dark, #fff) !important; }
.package-nav .nav-price__second:hover { border-color: var(--color-on-dark, #fff); background: color-mix(in srgb, var(--color-on-dark, #fff) 8%, transparent); }
.package-nav .nav-price__service { display: grid; gap: var(--space-2, 8px); margin: var(--space-4, 16px) 0 0; padding: var(--space-3, 12px) var(--space-1, 4px) 0; border-top: var(--border-hairline, 1px) solid var(--night-700, #364754); list-style: none; }
.package-nav .nav-price__service li { position: relative; padding-left: calc(20px + var(--space-2, 8px)); color: var(--color-on-dark-muted, #e4e9ec); font-size: var(--text-body-sm); line-height: var(--leading-body); }
.package-nav .nav-price__service li::before { content: ""; position: absolute; left: 0; top: calc((1lh - 20px) / 2); width: 20px; height: 20px; background-color: var(--night-400, #8699a7); -webkit-mask: url("../images/icons/what-is-included.svg") center / contain no-repeat; mask: url("../images/icons/what-is-included.svg") center / contain no-repeat; }
.package-nav .nav-price__service a { color: var(--color-on-dark-link, #fff); text-decoration: underline; text-decoration-color: var(--night-400, #8699a7); text-underline-offset: var(--space-1, 4px); }
@keyframes nav-price-in { from { opacity: 0; transform: translateY(-4px); } }
@media (max-width: 991.98px) { .package-nav .nav-price { display: none; } }
@media (prefers-reduced-motion: reduce) { .package-nav .nav-price__toggle { animation: none; } .package-nav .nav-price__toggle::after { transition: none; } }

/* The trip's standing at the head of its reviews, in place of the line that counted them. */
.package-page #reviews .trip-standing { flex-basis: 100%; margin: var(--space-1, 4px) 0 var(--space-2, 8px); }
.package-page #reviews div.trip-standing:hover { border-color: var(--color-outline, #c9d1d6); box-shadow: none; }

/* Beside the company's rating under the name: the trip's own standing, small, with the seal. It opens the trip's reviews. */
.trip-opening .package-review-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px); }
.standing-chip {
  display: inline-flex; align-items: center; gap: var(--space-2, 8px);
  padding: var(--space-1, 4px) var(--space-4, 16px) var(--space-1, 4px) var(--space-1, 4px);
  border-radius: var(--radius-pill, 999px);
  background: var(--color-primary-light, #ebf8e7);
  color: var(--color-primary-dark, #295e1d);
  font-size: var(--text-body-md, 0.875rem); font-weight: 700; line-height: 1;
  text-decoration: none; white-space: nowrap;
}
.standing-chip:hover { color: var(--color-primary-dark, #295e1d); text-decoration: underline; text-underline-offset: 3px; }
.standing-chip:focus-visible { outline: var(--focus-width, 2px) solid var(--color-focus, #295e1d); outline-offset: var(--focus-offset, 2px); }
.standing-chip__seal { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--color-base, #fff); }
.standing-chip__seal::before {
  content: ""; position: absolute; inset: 6px; background: var(--color-primary-dark, #295e1d);
  -webkit-mask: url("../images/icons/medal.svg") center / contain no-repeat; mask: url("../images/icons/medal.svg") center / contain no-repeat;
}

/* Emphasis in the trip's own writing: bold is the one phrase a guest must not skip, so it is the darkest text in the paragraph. */
.package-page :is(#overview article.common-module, .itinerary-content .accordion-body, .useful-content, .faqs .accordion-body) :is(strong, b) { color: var(--color-contrast, #0b1f2e); font-weight: var(--weight-bold, 700); }
.package-page :is(#overview article.common-module, .itinerary-content .accordion-body, .useful-content, .faqs .accordion-body) :is(em, i):not([class]) { font-style: italic; }

/* Useful info as a list of questions: each section under a heading opens on its own, the design system's Disclosure. */
.package-page .useful-sections__all { display: block; min-height: var(--touch-min, 44px); margin: calc(var(--space-5, 24px) * -1) 0 var(--space-2, 8px) auto; padding: 0 var(--space-2, 8px); border: 0; background: none; color: var(--color-contrast, #0b1f2e); font-size: var(--text-body-md, 0.875rem); font-weight: var(--weight-bold, 700); text-decoration: underline; text-underline-offset: var(--space-1, 4px); cursor: pointer; }
.package-page .useful-section { border-bottom: var(--border-hairline, 1px) solid var(--color-outline, #c9d1d6); }
.package-page .useful-sections__all + .useful-section { border-top: var(--border-hairline, 1px) solid var(--color-outline, #c9d1d6); }
.package-page .useful-section > summary { display: flex; align-items: center; gap: var(--space-4, 16px); min-height: var(--touch-min, 44px); padding: var(--space-4, 16px) 0; cursor: pointer; list-style: none; }
.package-page .useful-section > summary::-webkit-details-marker { display: none; }
.package-page .useful-section > summary::after { content: ""; flex: none; width: var(--space-2, 8px); height: var(--space-2, 8px); margin-left: auto; margin-right: var(--space-2, 8px); border-right: var(--border-strong, 2px) solid var(--color-contrast, #0b1f2e); border-bottom: var(--border-strong, 2px) solid var(--color-contrast, #0b1f2e); transform: rotate(45deg); transition: transform var(--duration-fast, 150ms) var(--ease-standard, ease); }
.package-page .useful-section[open] > summary::after { transform: rotate(225deg); }
.package-page .useful-content .useful-section h2.disclosure__title { margin: 0; font-size: var(--text-heading-md, 1.5rem); line-height: var(--leading-heading, 1.2); }
.package-page .useful-section > .disclosure__body h3 { font-size: var(--text-heading-sm, 1.125rem); }
.package-page .useful-section > .disclosure__body h4,
.package-page .useful-section > .disclosure__body .useful-subhead { font-size: var(--text-body-xl, 1.125rem); }
.package-page .useful-section > summary:hover .disclosure__title { text-decoration: underline; text-decoration-thickness: var(--border-strong, 2px); text-underline-offset: var(--space-1, 4px); }
.package-page .useful-section > summary:focus-visible { outline: var(--border-strong, 2px) solid var(--color-contrast, #0b1f2e); outline-offset: 2px; }
.package-page .useful-section > .disclosure__body { padding: 0 0 var(--space-5, 24px); }
.package-page .useful-section > .disclosure__body > :first-child { margin-top: 0; }
@media (min-width: 992px) {
  .package-page .useful-section > .disclosure__body > :is(p, ul, ol) { max-width: var(--container-prose, 40rem); }
}
.package-page .useful-content .useful-subhead { margin: var(--space-5, 24px) 0 var(--space-2, 8px); color: var(--color-contrast, #0b1f2e); font-size: var(--text-heading-sm, 1.125rem); line-height: var(--leading-heading, 1.2); }
@media (prefers-reduced-motion: reduce) { .package-page .useful-section > summary::after { transition: none; } }

/* A day photograph beside the overview paragraph that names its place: the reading width, the page's corner, the caption under it. */
.package-page .story-photo { max-width: var(--container-prose, 40rem); margin: var(--space-6, 32px) 0; }
.package-page .story-photo a { display: block; overflow: hidden; border-radius: var(--radius-2xl, 24px); corner-shape: squircle; background: var(--color-surface, #f4f7f3); }
.package-page .story-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform var(--duration-slow, 300ms) var(--ease-standard, ease); }
.package-page .story-photo a:hover img { transform: scale(var(--hover-zoom)); }
.package-page .story-photo a:focus-visible { outline: var(--border-strong, 2px) solid var(--color-contrast, #0b1f2e); outline-offset: 2px; }
.package-page .story-photo figcaption { margin-top: var(--space-2, 8px); color: var(--color-muted, #51606b); font-size: var(--text-body-md, 0.875rem); line-height: 1.4; }
.package-page .story-photo figcaption::first-letter { text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .package-page .story-photo img { transition: none; } .package-page .story-photo a:hover img { transform: none; } }

/* The first screen's price and way to book, on wide screens: the price on top, the button under it. Phones have the booking bar. */
.trip-opening__book { display: none; }
@media (min-width: 992px) {
  /* As tall as the name and the reviews beside it: the label level with the name, the button's foot level with the reviews. */
  /* The label, price and button stay together at the foot of the block, level with the review line, however many lines the
     trip's name takes. Spread apart, they drifted to the top, middle and bottom beside a two-line name. */
  .trip-opening__book > :last-child { margin-top: var(--space-2, 8px); }
  .trip-opening__book { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; align-self: stretch; flex: 0 0 auto; min-width: 260px; gap: var(--space-1, 4px); }
  .trip-opening__label { margin: 0; color: var(--color-muted, #51606b); font-size: var(--text-body-md, 0.875rem); line-height: var(--leading-heading); }
  .trip-opening__price { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-2, 8px); margin: 0; line-height: var(--leading-tight); white-space: nowrap; }
  .trip-opening__price b { color: var(--color-contrast, #0b1f2e); font-size: var(--text-heading-md, 1.5rem); font-weight: var(--weight-extrabold, 800); }
  .trip-opening .trip-opening__btn { width: 100%; min-height: var(--touch-min, 44px); margin: 0; padding: var(--space-2, 8px) var(--space-5, 24px) !important; border-radius: var(--radius-2xl, 24px) !important; corner-shape: squircle; font-size: var(--text-body-lg, 1rem) !important; font-weight: var(--weight-extrabold, 800); text-transform: none; }
}
}

/* More trips: the way to the whole region sits at the right end of the heading's row, with its count. On a phone it
   goes under the heading. */
.similar-trips .similar-trips__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4, 16px); }
.similar-trips .similar-trips__head .title { margin-bottom: 0; }
.similar-trips .similar-trips__all { flex: none; display: inline-flex; align-items: center; min-height: var(--touch-min, 44px); }

/* Questions under the useful information. The list sat two pixels in from the rows above it, and its arrow a step in from
   theirs; both now share one left edge and one right edge. The heading stands a full section step clear of what is above,
   so the questions read as their own part without a box around them. */
.package-page .faqs :is(ul, ol, .accordion) { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.package-page .faqs .accordion-item { margin-left: 0; margin-right: 0; }
.package-page .faqs .faq-question__button::after { margin-right: var(--space-1, 4px); }
.package-page #faqs.tab-pane { margin-top: var(--space-6, 32px); }
.package-page #faqs.tab-pane { margin-top: 0; padding-top: var(--space-5, 24px); }

/* A departure row holds a button, so its corner follows the nesting rule: the outer radius is the inner radius plus the
   space between them. The button's corner is --radius-2xl and it sits --space-4 inside the row, so the row's corner is
   their sum, with the same squircle curve. The row is one shape: its cells keep only the outer edges and corners. */
.package-page #depature-dates .default-table { border-collapse: separate; }
.package-page #depature-dates .default-table tbody tr td {
  --row-radius: calc(var(--radius-2xl, 24px) + var(--space-4, 16px));
  padding-top: var(--space-4, 16px); padding-bottom: var(--space-4, 16px);
  border-radius: 0 !important; border-left-width: 0 !important; border-right-width: 0 !important; corner-shape: squircle;
}
.package-page #depature-dates .default-table tbody tr td:first-child { padding-left: var(--space-6, 32px); border-left-width: var(--border-hairline, 1px) !important; border-top-left-radius: var(--row-radius) !important; border-bottom-left-radius: var(--row-radius) !important; }
.package-page #depature-dates .default-table tbody tr td:last-child { padding-right: var(--space-4, 16px); border-right-width: var(--border-hairline, 1px) !important; border-top-right-radius: var(--row-radius) !important; border-bottom-right-radius: var(--row-radius) !important; }

/* The note under the dates ends with who to ask and how: the brothers' faces, a button to the planner, then WhatsApp and
   email as plain links. On the note's dark ground the button is the leaf green and the links are light. */
.package-page .departure-note { border-radius: var(--radius-2xl, 24px); corner-shape: squircle; padding: var(--space-6, 32px); }
.package-page .departure-note__act { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3, 12px) var(--space-5, 24px); margin-top: var(--space-5, 24px); padding-top: var(--space-5, 24px); border-top: var(--border-hairline, 1px) solid color-mix(in srgb, var(--color-base, #fff) 20%, transparent); }
.package-page .departure-note__act .inquiry-popup__faces { margin: 0; padding: 0; }
.package-page .departure-note__act .inquiry-popup__face { border-color: var(--night-900, #0b1f2e); }
.package-page .departure-note__act .btn.departure-note__plan { border-color: var(--color-primary, #5dbb46); background: var(--color-primary, #5dbb46); color: var(--color-contrast, #0b1f2e); }
.package-page .departure-note__act .btn.departure-note__plan:is(:hover, :focus-visible) { border-color: var(--leaf-400, #7acc66); background: var(--leaf-400, #7acc66); color: var(--color-contrast, #0b1f2e); }
.package-page .departure-note__link { color: var(--color-on-dark, #fff); font-weight: var(--weight-bold, 700); text-decoration: underline; text-underline-offset: var(--space-1, 4px); }
.package-page .departure-note__link:hover { color: var(--color-on-dark-muted, #c9d1d6); }
.package-page .departure-note__act :focus-visible { outline: var(--focus-width, 2px) solid var(--color-base, #fff); outline-offset: var(--focus-offset, 2px); }

/* A departure row tints under the pointer, the whole row as one shape, so it is plain which date the button belongs to. */
.package-page #depature-dates .default-table tbody tr td { transition: background-color var(--duration-fast, 140ms) var(--ease-out, ease), border-color var(--duration-fast, 140ms) var(--ease-out, ease); }
.package-page #depature-dates .default-table tbody tr:hover td { background-color: var(--leaf-50, #ebf8e7); border-color: var(--leaf-200, #c3e8ba); }
@media (prefers-reduced-motion: reduce) { .package-page #depature-dates .default-table tbody tr td { transition: none; } }

/* The month chooser above the dates is a field, so it takes the field's corner (--radius-xl, squircle), the field's
   outline, and the touch height. Its arrow is the set's chevron, sitting a field's padding in from the edge. */
.package-page #depature-dates .custom_select { position: relative; }
.package-page #depature-dates select#package_departure {
  min-height: var(--touch-min, 44px); padding: var(--space-2, 8px) var(--space-8, 48px) var(--space-2, 8px) var(--space-4, 16px);
  border: var(--border-hairline, 1px) solid var(--color-muted, #51606b); border-radius: var(--radius-xl, 16px); corner-shape: squircle;
  background: var(--color-base, #fff) url("../images/icons/chevron-down.svg") right var(--space-3, 12px) center / var(--space-5, 24px) no-repeat;
  color: var(--color-contrast, #0b1f2e); font-size: var(--text-body-lg, 1rem); font-weight: var(--weight-bold, 700);
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.package-page #depature-dates select#package_departure:hover { border-color: var(--color-contrast, #0b1f2e); }
.package-page #depature-dates select#package_departure:focus-visible { outline: var(--focus-width, 2px) solid var(--color-focus, #295e1d); outline-offset: var(--focus-offset, 2px); }
.package-page #depature-dates .custom_select::before, .package-page #depature-dates .custom_select::after { content: none; }

/* When a row is pointed at, its button fills: the row says "this date", the button says "book it". */
.package-page #depature-dates .default-table tbody tr .btn { transition: background-color var(--duration-fast, 140ms) var(--ease-out, ease), color var(--duration-fast, 140ms) var(--ease-out, ease), border-color var(--duration-fast, 140ms) var(--ease-out, ease); }
.package-page #depature-dates .default-table tbody tr:hover .btn,
.package-page #depature-dates .default-table tbody tr .btn:focus-visible { border-color: var(--color-dark, #0b1f2e); background: var(--color-dark, #0b1f2e); color: var(--color-on-dark, #fff); }
@media (prefers-reduced-motion: reduce) { .package-page #depature-dates .default-table tbody tr .btn { transition: none; } }

/* The whole row is the way in, so the pointer says so across all of it. */
.package-page #depature-dates .default-table tbody tr:has(form button[type="submit"]:not(:disabled)) { cursor: pointer; }

/* "Ask a question" under the first Book button: the same outlined button as "Send inquiry" in the section bar, so
   the two ways to the enquiry form look like one thing. Replaces the underlined text it was.
   Author: Pravash Karki - pravashkarki.com */
.trip-opening__ask {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  width: 100%;
  height: var(--touch-min, 44px);
  margin: var(--space-1, 4px) 0 0;
  padding: 0 var(--space-4, 16px);
  border: 2px solid var(--color-dark, #0b1f2e);
  border-radius: var(--radius-2xl, 24px);
  corner-shape: squircle;
  background: var(--color-base, #fff);
  color: var(--color-contrast, #0b1f2e);
  font: inherit;
  font-size: var(--text-body-md, 0.875rem);
  font-weight: var(--weight-bold, 700);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.trip-opening__ask::before {
  content: "";
  flex: none;
  width: var(--space-4, 16px);
  height: var(--space-4, 16px);
  background: currentColor;
  -webkit-mask: url("../images/icons/chat.svg") center / contain no-repeat; mask: url("../images/icons/chat.svg") center / contain no-repeat;
}
.trip-opening__ask:hover,
.trip-opening__ask:focus { background: var(--color-surface, #f4f7f3); }
.trip-opening__ask:active { background: var(--color-primary-light, #ebf8e7); }
.trip-opening__ask:focus-visible { outline: var(--focus-width, 2px) solid var(--color-focus, #295e1d); outline-offset: var(--focus-offset, 2px); }

/* Who runs the trip, as a chip beside its rating. Author: Pravash Karki - pravashkarki.com */
.standing-chip--people { gap: var(--space-2, 8px); min-height: 36px; padding-left: var(--space-2, 8px); }
.standing-chip--people .inquiry-popup__faces { flex: none; margin: 0; padding: 0; }
.standing-chip--people .inquiry-popup__face { width: var(--space-5, 24px); height: var(--space-5, 24px); }

/* From the team's test of staging, 13 October 2026.
   Author: Pravash Karki - pravashkarki.com */
/* A popup's title is a paragraph with a heading's role, so the page's outline lists only the page. It keeps the heading's face. */
.all-reviews__title, .review-choice__title, #inquiry-model .inquiry-popup__trip { color: var(--color-contrast, #0b1f2e); font-family: var(--font-heading); font-weight: var(--weight-heading, 600); letter-spacing: var(--tracking-heading, 0); }
/* The short list of what is not covered ends by saying how many more there are. */
.package-page .trip-covers__rest { margin: var(--space-3, 12px) 0 0; padding-left: calc(var(--space-5, 24px) + var(--space-3, 12px)); font-size: var(--text-body-md, 0.875rem); }
.package-page .trip-covers__rest a { color: var(--color-link, #295e1d); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* The map can be saved. */
/* "Download the map": an outlined button under the map, with the download mark (the Founder, 14 October 2026). */
.package-page .trip-map__download { margin: var(--space-4, 16px) 0 0; text-align: center; }
.package-page .trip-map__button, .package-page .trip-map__button:is(:hover, :focus-visible) { display: inline-flex; align-items: center; gap: var(--space-2, 8px); text-decoration: none; }
.package-page .trip-map__icon { flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("../images/icons/download.svg") center / contain no-repeat; mask: url("../images/icons/download.svg") center / contain no-repeat; }
/* A section of Useful info eases open, as a question does. */
@supports (interpolate-size: allow-keywords) {
  .package-page .useful-section { interpolate-size: allow-keywords; }
  .package-page .useful-section::details-content { block-size: 0; overflow: hidden; transition: block-size var(--duration-slow, 420ms) var(--ease-out, ease), content-visibility var(--duration-slow, 420ms) allow-discrete; }
  .package-page .useful-section[open]::details-content { block-size: auto; }
}
.package-page .useful-section > summary::after { transition: transform var(--duration-fast, 140ms) var(--ease-standard, ease); }
@media (prefers-reduced-motion: reduce) {
  .package-page .useful-section::details-content, .package-page .useful-section > summary::after { transition: none; }
}
/* On a phone: the cost lists start nearer the left edge, a day's facts are the size of its words, a departure's first
   date lines up with its last, and each section stands a full step from the one before. */
@media (max-width: 767.98px) {
  .package-page .inclusions ul,
  .package-page .cost_dtl .cost_detail.cost_exclude ul { padding-left: calc(var(--space-5, 24px) + var(--space-3, 12px)); }
  .package-page .itinerary-content .itinerary-meta ul li.itinerary-meta__item span { font-size: var(--text-body-lg, 1rem); }
  .package-page #depature-dates .default-table tbody tr td.date:first-child { padding-left: var(--space-1, 4px); }
  .package-page #myTabContent .tab-pane { margin-bottom: var(--space-8, 48px); }
}
/* The strip of small pictures runs under an opened photograph, at every width, in the viewer's own dark. The chosen
   one is ringed in leaf. The viewer's own strip stands down the right side and takes a third of a phone. */
.fancybox-thumbs { top: auto; right: 0; bottom: 0; left: 0; width: auto; height: 84px; padding: var(--space-2, 8px); background: var(--color-dark, #0b1f2e); }
.fancybox-show-thumbs .fancybox-inner { right: 0; bottom: 84px; }
.fancybox-thumbs .fancybox-thumbs__list { display: flex; gap: var(--space-2, 8px); width: max-content !important; height: 100%; margin: 0 auto; padding: 0; overflow: visible; }
.fancybox-thumbs { overflow-x: auto; overflow-y: hidden; }
.fancybox-thumbs .fancybox-thumbs__list a { float: none; flex: none; width: 92px; max-width: none; height: 100%; max-height: none; margin: 0; border-radius: var(--radius-md, 8px); background-color: var(--night-800, #1f3342); }
.fancybox-thumbs .fancybox-thumbs__list a::before { border-color: var(--color-primary, #5dbb46); border-radius: var(--radius-md, 8px); }
/* What is not included starts a full step below the last thing that is. */
.package-page .inclusions-wrapper .cost_dtl.cost-exclude { margin-top: var(--space-6, 32px); }
/* The packing list: every group's name stands the same step from the list before it and close to its own, and never
   ends a column alone. A line break typed at the end of an item adds no empty line. */
.package-page .equipments-wrapper h3 { margin: var(--space-5, 24px) 0 var(--space-2, 8px); font-size: var(--text-heading-sm, 1.125rem); break-after: avoid; }
.package-page .equipments-wrapper > h3:first-child { margin-top: 0; }
.package-page .equipments-wrapper ul { margin-bottom: 0; }
.package-page .equipments-wrapper li { break-inside: avoid; }
.package-page .equipments-wrapper li > br:last-of-type { display: none; }
/* The section bar on a wide screen: a step less space beside each name, so a trip with every section shows them all. */
@media (min-width: 1200px) {
  .package-nav .package-nav-wrap .nav-tabs.package-tab .nav-item > .nav-link { padding-inline: var(--space-3, 12px); }
}

/* Reading mode (front.pages.package): a quiet switch at the right end of the trail-care row on wide screens. When it is
   on, the booking column's boxes are put away and the price shows in the section bar. Phones have no side column, so
   no switch. */
.trip-promise__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4, 16px); }
.trip-promise .reading-toggle { display: none; }
@media (min-width: 992px) {
  .trip-promise .reading-toggle { display: inline-flex; flex: none; align-items: center; gap: var(--space-2, 8px); height: var(--touch-min, 44px); margin: 0; padding: 0 var(--space-4, 16px); border: var(--border-hairline, 1px) solid var(--color-outline, #d5dde2); border-radius: 24px; corner-shape: squircle; background: var(--color-base, #fff); color: var(--color-contrast, #0b1f2e); font: inherit; font-size: var(--text-body-md, 0.875rem); font-weight: var(--weight-bold, 700); cursor: pointer; }
  .trip-promise .reading-toggle:hover { border-color: var(--color-contrast, #0b1f2e); }
  .trip-promise .reading-toggle[aria-pressed="true"] { border-color: var(--color-contrast, #0b1f2e); background: var(--color-contrast, #0b1f2e); color: var(--color-on-dark, #fff); }
  .trip-promise .reading-toggle:focus-visible { outline: var(--focus-width, 2px) solid var(--color-focus, #295e1d); outline-offset: var(--focus-offset, 2px); }
  html.is-reading .package-page .sidebar > * { display: none; }
}