/* =====================================================================
   Beyond Journey - package detail page
   ---------------------------------------------------------------------
   Scoped under .bjd. Loads alongside bj-listing.css and reuses its tokens
   by restating the few it needs, so the two pages read as one product
   without either file depending on the other's load order.

   WHAT A PACKAGE DETAIL PAGE HAS TO DO

   Sell, and then answer. A holiday is bought on the photographs and the
   itinerary, but it is *confirmed* on the boring parts - what is included,
   what is not, which hotels, and what happens if plans change. Both
   MakeMyTrip and TourRadar put the day-wise plan front and centre and the
   inclusions immediately under it, and that ordering is right.

   So: gallery, then a sticky price rail that follows you down, then
   overview, day-wise itinerary, inclusions AND exclusions side by side,
   hotels, policy, FAQ. Exclusions get the same visual weight as
   inclusions on purpose - a package that hides them reads as a trap.
   ===================================================================== */

/* ---------------------------------------------------------------------
   SITE-LOCAL, NOT IN THE REFERENCE COPY OF THIS FILE - keep on re-copy.
   The reference sets the base type in css/style.css (body 16px / 1.6,
   h2 line-height 1.25), and every component below sizes its line-height
   from that base. This site's copy of style.css predates that change
   (15px / 1.5, h2 1.2), so the detail page sets the base itself: on the
   body where :has() is understood, and always on the page's own roots.
   :where() keeps the heading rule at the template's own specificity, so
   any component rule below still wins over it exactly as in the reference.
   --------------------------------------------------------------------- */
body:has(main.bjd-page) {
  font-size: 16px;
  line-height: 1.6;
}
main.bjd-page, .bjd-mobilebar, .bjd-lightbox {
  font-size: 16px;
  line-height: 1.6;
}
:where(main.bjd-page, .bjd-mobilebar, .bjd-lightbox) h2 {
  line-height: 1.25;
}

.bjd {
  --bjd-navy: #17233e;
  --bjd-orange: #f5761a;
  --bjd-orange-600: #d9600d;
  --bjd-orange-50: #fdf4ec;

  --bjd-ink: #17233e;
  --bjd-muted: #5a6377;
  --bjd-faint: #8b93a5;
  --bjd-line: #e6e3dc;
  --bjd-line-soft: #f1efe9;
  --bjd-surface: #ffffff;
  --bjd-paper: #faf8f5;
  --bjd-ok: #1a7f4b;
  --bjd-no: #b3261e;

  --bjd-s1: 4px;  --bjd-s2: 8px;  --bjd-s3: 12px; --bjd-s4: 16px;
  --bjd-s5: 24px; --bjd-s6: 32px; --bjd-s7: 44px;

  --bjd-r: 10px;
  --bjd-ease: cubic-bezier(.4, 0, .2, 1);
  --bjd-display: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --bjd-ui: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Published by js/bj-header.js, which measures the nav row that actually
     stays pinned. The fallback only applies if that script has not run yet;
     it is not a guess anyone should rely on. */
  --bjd-headroom: var(--bjh-pinned, 84px);

  font-family: var(--bjd-ui);
  color: var(--bjd-ink);
}

.bjd :where(section, aside) { padding: 0; margin: 0; }
.bjd :focus-visible { outline: 2px solid var(--bjd-orange); outline-offset: 2px; border-radius: 6px; }
.bjd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* no top padding: the hero banner sits flush under the site header */
.bjd-page { background: var(--bjd-paper); padding: 0 0 var(--bjd-s7); }

/* ---------------------------------------------------------------
   Hero banner
   ---------------------------------------------------------------
   The package's own lead photo at full strength under a navy wash that
   is heavy on the left, where the name and facts sit, and thins out to
   the right so the picture actually shows - the same opening move as
   the holiday-packages banner. It used to sit at 28% opacity under a
   near-solid gradient, which read as a flat navy block. */
.bjd-hero {
  position: relative; overflow: hidden;
  background: var(--bjd-navy, #17233e);
  padding: 22px 0 26px;
}
.bjd-hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 35%;
  opacity: 1;
}
.bjd-hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(23,35,62,.5) 0%, rgba(23,35,62,0) 32%, rgba(23,35,62,0) 68%, rgba(23,35,62,.6) 100%),
    linear-gradient(100deg, rgba(23,35,62,.92) 0%, rgba(23,35,62,.74) 40%, rgba(23,35,62,.32) 72%, rgba(23,35,62,.18) 100%);
}
.bjd-hero > .container { position: relative; z-index: 2; }

.bjd-crumb--hero { margin-bottom: 14px; }
.bjd-crumb--hero, .bjd-crumb--hero a { color: rgba(255, 255, 255, .62); }
.bjd-crumb--hero a:hover { color: #fff; }
.bjd-crumb--hero [aria-current] { color: rgba(255, 255, 255, .92); }

.bjd-hero__kicker {
  margin: 0 0 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--bjd-orange, #f5761a);
}
.bjd-hero__kicker .sep { margin: 0 8px; color: rgba(255, 255, 255, .35); }
.bjd-hero h1 {
  margin: 0 0 7px;
  font-family: var(--bjd-display, inherit);
  font-size: 32px; font-weight: 700; line-height: 1.12; letter-spacing: -.025em;
  color: #fff; text-transform: none;
}
.bjd-hero__tag {
  margin: 0 0 14px; max-width: 640px;
  font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .8);
}
.bjd-hero__facts {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 0; padding: 0;
}
.bjd-hero__facts li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14);
  font-size: 12.5px; color: rgba(255, 255, 255, .88);
}
.bjd-hero__facts li i { font-size: 11px; color: var(--bjd-orange, #f5761a); }
.bjd-hero__facts li b { font-weight: 700; color: #fff; }
.bjd-price-fig { font-variant-numeric: tabular-nums lining-nums; }

/* ---------------------------------------------------------------
   Breadcrumb + title
   --------------------------------------------------------------- */
.bjd-crumb { font-size: 12.5px; color: var(--bjd-faint); margin-bottom: var(--bjd-s4); }
.bjd-crumb ol { display: flex; flex-wrap: wrap; gap: var(--bjd-s2); list-style: none; margin: 0; padding: 0; }
.bjd-crumb a { color: var(--bjd-faint); }
.bjd-crumb a:hover { color: var(--bjd-orange-600); }
.bjd-crumb li + li::before { content: "/"; margin-right: var(--bjd-s2); opacity: .55; }

.bjd-kicker {
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--bjd-faint); margin: 0 0 7px;
}
.bjd-kicker .sep { opacity: .5; margin: 0 6px; }

.bjd-title {
  font-family: var(--bjd-display);
  font-size: 32px; font-weight: 700; line-height: 1.15; letter-spacing: -.025em;
  margin: 0 0 var(--bjd-s3); color: var(--bjd-ink); text-transform: none;
}
.bjd-tagline { font-size: 15px; color: var(--bjd-muted); margin: 0 0 var(--bjd-s4); }
@media (max-width: 767px) { .bjd-title { font-size: 24px; } }

.bjd-quickfacts { display: flex; flex-wrap: wrap; gap: var(--bjd-s2) var(--bjd-s4); margin: 0; padding: 0; list-style: none; }
.bjd-quickfacts li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--bjd-muted); }
.bjd-quickfacts i { color: var(--bjd-orange); font-size: 12px; }
.bjd-quickfacts b { color: var(--bjd-ink); font-weight: 700; }

/* ---------------------------------------------------------------
   Gallery
   --------------------------------------------------------------- */
/* One large stage with arrows and a photo counter, and a thumbnail rail
   under it. Clicking the stage opens the lightbox at the current photo. */
.bjd-gal { margin: var(--bjd-s5) 0; }
.bjd-gal__stage {
  position: relative; overflow: hidden;
  border-radius: var(--bjd-r); background: var(--bjd-line-soft);
}
.bjd-gal__open { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; }
.bjd-gal__stage img {
  width: 100%; height: 420px; object-fit: cover; display: block;
  transition: transform .6s var(--bjd-ease);
}
.bjd-gal__open:hover img { transform: scale(1.02); }

.bjd-gal__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--bjd-ink);
  font-size: 13px; cursor: pointer;
  box-shadow: 0 4px 14px -4px rgba(11, 17, 32, .4);
  transition: background .18s var(--bjd-ease), color .18s var(--bjd-ease);
}
.bjd-gal__nav:hover { background: var(--bjd-orange); color: #fff; }
.bjd-gal__nav--prev { left: 14px; }
.bjd-gal__nav--next { right: 14px; }

.bjd-gal__count {
  position: absolute; right: 14px; bottom: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(11, 17, 32, .72); color: #fff;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.bjd-gal__count i { font-size: 10px; opacity: .8; }

/* The caption is what turns a carousel into an itinerary: the day, what
   happens on it, and where you sleep that night. It sits on a gradient
   rather than a solid bar so the photograph still reads underneath. */
.bjd-gal__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  padding: 34px 18px 14px; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 17, 32, 0) 0%, rgba(11, 17, 32, .78) 62%);
  color: #fff;
}
.bjd-gal__day {
  flex: 0 0 auto; padding: 3px 10px; border-radius: 999px;
  background: var(--bjd-orange); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.bjd-gal__cap__t {
  flex: 0 1 auto; min-width: 0;
  font-size: 15px; font-weight: 700; line-height: 1.3;
  text-shadow: 0 1px 12px rgba(11, 17, 32, .5);
}
.bjd-gal__cap__s {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: rgba(255, 255, 255, .82);
}
.bjd-gal__cap__s i, .bjd-gal__cap__s svg { font-size: 11px; opacity: .8; }

.bjd-gal__thumbs {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 8px; margin-top: 8px;
}
/* Seven days will not fit as seven equal tiles on a narrow column, so
   past five the rail scrolls instead of shrinking each one to a stamp. */
.bjd-gal__thumbs {
  overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px;
}
.bjd-gal__thumbs button {
  position: relative; min-width: 92px; height: 68px;
  padding: 0; border: 2px solid transparent; border-radius: 9px;
  overflow: hidden; cursor: pointer; background: var(--bjd-line-soft);
  opacity: .68; transition: opacity .18s var(--bjd-ease), border-color .18s var(--bjd-ease);
}
.bjd-gal__thumbs button:hover { opacity: 1; }
.bjd-gal__thumbs button.is-on { opacity: 1; border-color: var(--bjd-orange); }
.bjd-gal__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Which day a thumbnail is, without having to count along the rail. */
.bjd-gal__tday {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 6px 4px;
  background: linear-gradient(180deg, rgba(11, 17, 32, 0), rgba(11, 17, 32, .8));
  color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
}
.bjd-gal__thumbs button.is-on .bjd-gal__tday { background: var(--bjd-orange); padding-top: 4px; }

@media (max-width: 767px) {
  .bjd-hero h1 { font-size: 24px; }
  .bjd-hero__tag { font-size: 13.5px; }
  .bjd-gal__stage img { height: 230px; }
  .bjd-gal__thumbs { gap: 6px; }
  .bjd-gal__thumbs button { min-width: 74px; height: 56px; }
  .bjd-gal__cap { padding: 26px 12px 10px; gap: 4px 8px; }
  .bjd-gal__cap__t { flex-basis: 100%; font-size: 13px; }
  .bjd-gal__day { font-size: 10px; padding: 2px 8px; }
  .bjd-gal__cap__s { font-size: 11px; }
  .bjd-gal__nav { width: 34px; height: 34px; }
}

/* Lightbox */
.bjd-lightbox {
  position: fixed; inset: 0; z-index: 1200; display: none;
  align-items: center; justify-content: center; padding: var(--bjd-s5);
  background: rgba(11, 17, 32, .93);
}
.bjd-lightbox.is-open { display: flex; }
.bjd-lightbox img { max-width: min(1100px, 94vw); max-height: 84vh; object-fit: contain; border-radius: var(--bjd-r); }
.bjd-lightbox button {
  position: absolute; border: 0; cursor: pointer; color: #fff; font-size: 18px;
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .16);
}
.bjd-lightbox .close { top: 20px; right: 20px; }
.bjd-lightbox .prev { top: 50%; left: 16px; transform: translateY(-50%); }
.bjd-lightbox .next { top: 50%; right: 16px; transform: translateY(-50%); }
.bjd-lightbox__cap { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.75); font-size: 13px; }

/* ---------------------------------------------------------------
   Layout
   --------------------------------------------------------------- */
/* minmax(0,1fr), never bare 1fr: a grid item's automatic minimum is its
   content's min-content, so one wide child (a table, a long tab row)
   silently widens the whole column past the viewport on phones. min-width
   on the items backs that up for the rail. */
.bjd-body { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: var(--bjd-s6); align-items: start; }
.bjd-body > * { min-width: 0; }
@media (max-width: 991px) { .bjd-body { grid-template-columns: minmax(0, 1fr); } }

.bjd-sec {
  background: var(--bjd-surface); border: 1px solid var(--bjd-line);
  border-radius: var(--bjd-r); padding: var(--bjd-s5); margin-bottom: var(--bjd-s4);
  scroll-margin-top: calc(var(--bjd-headroom) + 56px);
}
.bjd-sec > h2 {
  font-family: var(--bjd-ui);
  font-size: 17px; font-weight: 700; letter-spacing: -.02em; text-transform: none;
  margin: 0 0 var(--bjd-s4); display: flex; align-items: center; gap: var(--bjd-s2); color: var(--bjd-ink);
}
.bjd-sec > h2 i { color: var(--bjd-orange); font-size: 14px; }
.bjd-lede { font-size: 14px; line-height: 1.7; color: var(--bjd-muted); margin: 0; }

/* Section tabs, pinned under the sitewide header */
.bjd-tabs {
  display: flex; gap: var(--bjd-s2); overflow-x: auto; scrollbar-width: none;
  position: sticky; top: var(--bjd-headroom); z-index: 20;
  padding: var(--bjd-s3) 0; margin-bottom: var(--bjd-s4);
  background: var(--bjd-paper); border-bottom: 1px solid var(--bjd-line);
}
.bjd-tabs::-webkit-scrollbar { display: none; }
.bjd-tabs a {
  flex: 0 0 auto; padding: 7px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: var(--bjd-muted); white-space: nowrap;
}
.bjd-tabs a:hover { background: var(--bjd-orange-50); color: var(--bjd-orange-600); }
.bjd-tabs a.is-active { background: var(--bjd-navy); color: #fff; }

/* ---------------------------------------------------------------
   Highlights
   --------------------------------------------------------------- */
.bjd-list { list-style: none; margin: 0; padding: 0; }
.bjd-list li {
  display: flex; align-items: flex-start; gap: var(--bjd-s2);
  font-size: 13.5px; line-height: 1.6; color: var(--bjd-muted); margin-bottom: var(--bjd-s2);
}
.bjd-list i { flex: 0 0 auto; margin-top: 4px; font-size: 11px; }
.bjd-list--yes i { color: var(--bjd-ok); }
.bjd-list--no i { color: var(--bjd-no); }
.bjd-list--star i { color: var(--bjd-orange); }

/* ---------------------------------------------------------------
   Itinerary
   --------------------------------------------------------------- */
.bjd-itin { position: relative; margin: 0; padding: 0 0 0 var(--bjd-s6); list-style: none; }
.bjd-itin::before {
  content: ""; position: absolute; left: 15px; top: 14px; bottom: 14px;
  width: 2px; background: var(--bjd-line);
}
.bjd-day { position: relative; margin-bottom: var(--bjd-s2); }
.bjd-day__dot {
  position: absolute; left: calc(-1 * var(--bjd-s6) + 4px); top: 11px;
  width: 24px; height: 24px; border-radius: 50%; z-index: 1;
  background: var(--bjd-orange); color: #fff; border: 3px solid var(--bjd-surface);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.bjd-day__head {
  width: 100%; display: flex; align-items: center; gap: var(--bjd-s3); text-align: left;
  padding: var(--bjd-s3) var(--bjd-s4); border: 1px solid var(--bjd-line);
  border-radius: 8px; background: var(--bjd-surface); font-family: inherit; cursor: pointer;
  transition: border-color .2s var(--bjd-ease), background .2s var(--bjd-ease);
}
.bjd-day__head:hover { border-color: rgba(245, 118, 26, .45); background: var(--bjd-orange-50); }
.bjd-day__head strong { font-size: 14px; color: var(--bjd-ink); font-weight: 700; }
.bjd-day__head span span { display: block; font-size: 11px; color: var(--bjd-faint); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 2px; }
.bjd-day__chev { margin-left: auto; color: var(--bjd-faint); transition: transform .25s var(--bjd-ease); }
.bjd-day.is-open .bjd-day__chev { transform: rotate(180deg); }
.bjd-day__body { display: none; padding: var(--bjd-s3) var(--bjd-s4) var(--bjd-s4); font-size: 13.5px; color: var(--bjd-muted); line-height: 1.7; }
.bjd-day.is-open .bjd-day__body { display: block; }
.bjd-day__meta { display: flex; flex-wrap: wrap; gap: var(--bjd-s2); margin-top: var(--bjd-s3); }

.bjd-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--bjd-muted);
  background: var(--bjd-paper); border: 1px solid var(--bjd-line);
  border-radius: 999px; padding: 3px 10px;
}
.bjd-tag i { color: var(--bjd-orange); font-size: 10px; }

/* ---------------------------------------------------------------
   Inclusions / exclusions, tables
   --------------------------------------------------------------- */
.bjd-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bjd-s5); }
@media (max-width: 767px) { .bjd-two { grid-template-columns: 1fr; } }
.bjd-two h3 { font-size: 13px; font-weight: 700; margin: 0 0 var(--bjd-s3); text-transform: none; }
.bjd-two h3.yes { color: var(--bjd-ok); }
.bjd-two h3.no { color: var(--bjd-no); }

.bjd-tablewrap { overflow-x: auto; }
.bjd-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bjd-table th, .bjd-table td { padding: var(--bjd-s3) var(--bjd-s4); text-align: left; border-bottom: 1px solid var(--bjd-line-soft); }
.bjd-table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--bjd-faint); font-weight: 700; }
.bjd-table td { color: var(--bjd-muted); }
.bjd-table td strong { color: var(--bjd-ink); }
.bjd-table tr:last-child td { border-bottom: 0; }

.bjd-note {
  display: flex; align-items: flex-start; gap: var(--bjd-s3);
  padding: var(--bjd-s3) var(--bjd-s4); border-radius: 8px; border: 1px solid;
  font-size: 13px; line-height: 1.6; margin-top: var(--bjd-s4);
}
.bjd-note i { margin-top: 2px; flex: 0 0 auto; }
.bjd-note--info { background: #eff3fa; border-color: #cfdcf0; color: #223a63; }
.bjd-note--ok { background: #eef8f2; border-color: #c2e3d0; color: #14663c; }

/* ---------------------------------------------------------------
   FAQ
   --------------------------------------------------------------- */
.bjd-faq__item { border-bottom: 1px solid var(--bjd-line-soft); }
.bjd-faq__item:last-child { border-bottom: 0; }
.bjd-faq__q {
  width: 100%; display: flex; align-items: center; gap: var(--bjd-s3); text-align: left;
  padding: var(--bjd-s4) 0; border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 700; color: var(--bjd-ink);
}
.bjd-faq__q:hover { color: var(--bjd-orange-600); }
.bjd-faq__q i { margin-left: auto; color: var(--bjd-faint); transition: transform .25s var(--bjd-ease); }
.bjd-faq__item.is-open .bjd-faq__q i { transform: rotate(180deg); }
.bjd-faq__a { display: none; padding: 0 0 var(--bjd-s4); font-size: 13.5px; color: var(--bjd-muted); line-height: 1.7; }
.bjd-faq__item.is-open .bjd-faq__a { display: block; }

/* ---------------------------------------------------------------
   Price rail
   --------------------------------------------------------------- */
.bjd-rail { position: sticky; top: calc(var(--bjd-headroom) + 12px); }
.bjd-railcard {
  background: var(--bjd-surface); border: 1px solid var(--bjd-line);
  border-radius: var(--bjd-r); padding: var(--bjd-s5);
  box-shadow: 0 1px 2px rgba(23, 35, 62, .04), 0 14px 34px -22px rgba(23, 35, 62, .3);
}
.bjd-railprice { display: flex; align-items: baseline; gap: var(--bjd-s2); flex-wrap: wrap; }
.bjd-railprice strong { font-size: 28px; font-weight: 700; letter-spacing: -.025em; color: var(--bjd-ink); }
.bjd-railprice del { font-size: 14px; color: var(--bjd-faint); }
.bjd-railprice .off { font-size: 12px; font-weight: 700; color: var(--bjd-ok); }
.bjd-railsub { font-size: 12px; color: var(--bjd-faint); margin: 3px 0 var(--bjd-s5); }


.bjd-count { display: flex; align-items: center; justify-content: space-between; gap: var(--bjd-s4); padding: var(--bjd-s3) 0; }
.bjd-count + .bjd-count { border-top: 1px solid var(--bjd-line-soft); }
.bjd-count strong { font-size: 13.5px; }
.bjd-count span { display: block; font-size: 11.5px; color: var(--bjd-faint); }
.bjd-count__btns { display: flex; align-items: center; gap: var(--bjd-s3); }
.bjd-countbtn {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--bjd-line); background: var(--bjd-surface);
  color: var(--bjd-ink); font-size: 15px; line-height: 1;
}
.bjd-countbtn:hover:not([disabled]) { border-color: var(--bjd-orange); color: var(--bjd-orange); }
.bjd-countbtn[disabled] { opacity: .4; cursor: not-allowed; }

.bjd-line { display: flex; justify-content: space-between; gap: var(--bjd-s3); font-size: 13.5px; color: var(--bjd-muted); margin-bottom: var(--bjd-s2); }
.bjd-line strong { color: var(--bjd-ink); font-weight: 700; }
.bjd-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: var(--bjd-s3); margin-top: var(--bjd-s2); border-top: 2px solid var(--bjd-line-soft);
}
.bjd-total strong:last-child { font-size: 21px; }

.bjd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px var(--bjd-s5); border: 0; border-radius: 8px;
  background: var(--bjd-orange); color: #fff !important;
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background .18s var(--bjd-ease);
}
.bjd-btn:hover { background: var(--bjd-orange-600); color: #fff !important; }
.bjd-btn--quiet {
  background: var(--bjd-surface); color: var(--bjd-ink) !important;
  border: 1px solid var(--bjd-line);
}
.bjd-btn--quiet:hover { background: var(--bjd-paper); color: var(--bjd-ink) !important; border-color: var(--bjd-faint); }

/* ---------------------------------------------------------------
   Callback request
   ---------------------------------------------------------------
   Beyond Journey does not take package payments online, so the rail ends
   here rather than in a checkout. The estimate above is labelled as one,
   and this is the actual next step.
   --------------------------------------------------------------- */
.bjd-railnote {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 11.5px; line-height: 1.55; color: var(--bjd-muted);
  background: var(--bjd-paper); border: 1px solid var(--bjd-line);
  border-radius: 8px; padding: 10px 12px; margin: var(--bjd-s4) 0 0;
}
.bjd-railnote i { color: var(--bjd-faint); margin-top: 2px; flex: 0 0 auto; }

.bjd-cb { margin-top: var(--bjd-s5); padding-top: var(--bjd-s5); border-top: 1px solid var(--bjd-line-soft); }
.bjd-cb h3 { font-size: 15px; font-weight: 700; margin: 0 0 4px; text-transform: none; }
.bjd-cb__lede { font-size: 12.5px; color: var(--bjd-muted); margin: 0 0 var(--bjd-s4); line-height: 1.55; }

.bjd-field { margin-bottom: var(--bjd-s3); }
.bjd-field label { display: block; font-size: 12px; font-weight: 700; color: var(--bjd-ink); margin-bottom: 5px; }
.bjd-field label .opt { font-weight: 400; color: var(--bjd-faint); }
.bjd-field input {
  width: 100%; padding: 10px 12px; font-family: inherit;
  /* 16px minimum, or iOS Safari zooms the viewport on focus. */
  font-size: 16px; color: var(--bjd-ink);
  background: var(--bjd-surface); border: 1px solid var(--bjd-line); border-radius: 8px;
  transition: border-color .18s var(--bjd-ease), box-shadow .18s var(--bjd-ease);
}
.bjd-field input:focus {
  outline: 0; border-color: var(--bjd-orange); box-shadow: 0 0 0 3px rgba(245, 118, 26, .15);
}
.bjd-field input[aria-invalid="true"] { border-color: var(--bjd-no); background: #fdf3f2; }

.bjd-cb__err, .bjd-cb__warn {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.55; margin: var(--bjd-s3) 0 0;
  padding: 10px 12px; border-radius: 8px; border: 1px solid;
}
.bjd-cb__err { color: var(--bjd-no); background: #fdf3f2; border-color: #f0c8c4; }
.bjd-cb__warn { color: #8a6100; background: #fff8ec; border-color: #f2d9ab; }
.bjd-cb__err i, .bjd-cb__warn i { margin-top: 2px; flex: 0 0 auto; }
.bjd-cb__warn a { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }

.bjd-or {
  text-align: center; font-size: 11.5px; color: var(--bjd-faint);
  text-transform: uppercase; letter-spacing: .1em; margin: var(--bjd-s4) 0 var(--bjd-s2);
}

.bjd-trust { display: flex; flex-direction: column; gap: 7px; margin-top: var(--bjd-s4); padding-top: var(--bjd-s4); border-top: 1px solid var(--bjd-line-soft); }
.bjd-trust div { display: flex; align-items: center; gap: var(--bjd-s2); font-size: 12px; color: var(--bjd-muted); }
.bjd-trust i { color: var(--bjd-ok); font-size: 11px; }

/* Mobile sticky book bar - the single biggest conversion difference on a
   long detail page, because the price scrolls away otherwise. */
.bjd-mobilebar { display: none; }
@media (max-width: 991px) {
  .bjd-rail { position: static; }
  .bjd-mobilebar {
    display: flex; align-items: center; gap: var(--bjd-s4);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    padding: var(--bjd-s3) var(--bjd-s4);
    background: var(--bjd-surface); border-top: 1px solid var(--bjd-line);
    box-shadow: 0 -6px 20px -10px rgba(23, 35, 62, .35);
  }
  .bjd-mobilebar small { display: block; font-size: 11px; color: var(--bjd-faint); }
  .bjd-mobilebar strong { font-size: 19px; font-variant-numeric: tabular-nums; }
  .bjd-mobilebar .bjd-btn { width: auto; margin-left: auto; padding: 11px var(--bjd-s5); }
  .bjd-page { padding-bottom: 92px; }
}

/* ---------------------------------------------------------------
   Not found
   --------------------------------------------------------------- */
.bjd-missing {
  text-align: center; padding: var(--bjd-s7) var(--bjd-s5);
  background: var(--bjd-surface); border: 1px solid var(--bjd-line); border-radius: var(--bjd-r);
}
.bjd-missing h1 { font-family: var(--bjd-display); font-size: 24px; font-weight: 700; margin: 0 0 var(--bjd-s3); text-transform: none; }
.bjd-missing p { font-size: 14px; color: var(--bjd-muted); max-width: 460px; margin: 0 auto var(--bjd-s5); }
.bjd-missing__actions { display: flex; gap: var(--bjd-s3); justify-content: center; flex-wrap: wrap; }
.bjd-missing .bjd-btn { width: auto; padding: 11px var(--bjd-s5); }

@media (prefers-reduced-motion: reduce) {
  .bjd *, .bjd *::before, .bjd *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------------
   Polish pass (append-only; the cascade wins by order)
   --------------------------------------------------------------- */

/* hero: headline left, price answer right */
.bjd-hero__row { display: flex; align-items: flex-end; gap: 26px; }
.bjd-hero__main { flex: 1 1 auto; min-width: 0; }
.bjd-hero__facts li.rate { background: var(--bjd-ok, #1a7f4b); border-color: transparent; color: #fff; }
.bjd-hero__facts li.rate i { color: #fff; }

.bjd-hero__price {
  flex: 0 0 auto; width: 250px;
  padding: 16px 18px; border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.bjd-hero__from {
  display: block; font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6);
}
.bjd-hero__fig { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 2px 0 1px; }
.bjd-hero__fig del { font-size: 12.5px; color: rgba(255, 255, 255, .48); }
.bjd-hero__fig strong {
  font-family: var(--bjd-display, inherit);
  font-size: 25px; font-weight: 700; letter-spacing: -.02em; color: #fff;
  font-variant-numeric: tabular-nums lining-nums;
}
.bjd-hero__fig em {
  font-style: normal; font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 5px;
  background: rgba(26, 127, 75, .9); color: #fff;
}
.bjd-hero__sub { display: block; font-size: 11px; color: rgba(255, 255, 255, .62); }
.bjd-hero__cta { margin-top: 11px; font-size: 13px; padding: 10px 14px; }
.bjd-hero__dates {
  display: block; margin-top: 8px; text-align: center;
  font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .85);
}
.bjd-hero__dates:hover { color: var(--bjd-orange); }
.bjd-hero__note {
  display: block; margin-top: 8px; text-align: center;
  font-size: 10.5px; color: rgba(255, 255, 255, .55);
}

/* trust strip under the gallery */
.bjd-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  list-style: none; margin: 0 0 var(--bjd-s5); padding: 0;
  background: var(--bjd-line); border: 1px solid var(--bjd-line);
  border-radius: var(--bjd-r); overflow: hidden;
}
.bjd-strip li {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 15px; background: var(--bjd-surface);
}
.bjd-strip li i {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--bjd-orange-50, #fdf4ec); color: var(--bjd-orange-600, #d9600d); font-size: 13px;
}
.bjd-strip strong { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.bjd-strip small { display: block; margin-top: 1px; font-size: 11px; color: var(--bjd-muted); line-height: 1.35; }

/* route dots at the top of the overview */
.bjd-route { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 var(--bjd-s4); padding: 0; }
.bjd-route li {
  position: relative; display: inline-flex; align-items: baseline; gap: 5px;
  padding: 0 16px 0 14px; font-size: 13px; color: var(--bjd-muted);
}
.bjd-route li b { color: var(--bjd-ink); font-weight: 700; font-size: 12.5px; }
.bjd-route li::before {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid var(--bjd-orange); background: var(--bjd-surface);
}
.bjd-route li + li::after {
  content: ""; position: absolute; left: -10px; top: 9px;
  width: 10px; height: 1px; background: var(--bjd-line);
}

/* highlights read better as two columns once there is room */
@media (min-width: 768px) {
  #bjd-overview .bjd-list--star { columns: 2; column-gap: 28px; }
  #bjd-overview .bjd-list--star li { break-inside: avoid; }
}

@media (max-width: 991px) {
  .bjd-hero__row { flex-direction: column; align-items: stretch; }
  .bjd-hero__price { width: 100%; }
  .bjd-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .bjd-strip { grid-template-columns: 1fr; }
}

/* gallery corner actions: save + share */
.bjd-gal__acts { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; gap: 8px; }
.bjd-gal__act {
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--bjd-ink);
  font-size: 14px; cursor: pointer;
  box-shadow: 0 4px 14px -4px rgba(11, 17, 32, .4);
  transition: background .18s var(--bjd-ease), color .18s var(--bjd-ease);
}
.bjd-gal__act:hover { background: var(--bjd-orange); color: #fff; }
.bjd-gal__act.is-on { background: var(--bjd-orange); color: #fff; }

/* WhatsApp keeps its own colour so it reads as the channel it is */
.bjd-btn--wa { margin-top: 7px; }
.bjd-btn--wa i { color: #25d366; font-size: 15px; }
.bjd-btn--wa:hover { border-color: #25d366; color: var(--bjd-ink); }

/* transient confirmation for save/share */
.bjd-toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%);
  z-index: 1300; padding: 10px 18px; border-radius: 999px;
  background: rgba(11, 17, 32, .92); color: #fff;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 10px 30px -8px rgba(11, 17, 32, .5);
  opacity: 1; transition: opacity .45s ease;
}
.bjd-toast.is-out { opacity: 0; }
@media (max-width: 991px) {
  .bjd-toast { bottom: 104px; } /* clears the fixed price bar */
}

/* flagship experiences */
.bjd-flag { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bjd-flag__item {
  padding: 16px 17px; border: 1px solid var(--bjd-line-soft); border-radius: 10px;
  background: var(--bjd-paper);
}
.bjd-flag__item i {
  display: grid; place-items: center; width: 36px; height: 36px;
  margin: 0 0 10px; border-radius: 10px;
  background: var(--bjd-orange-50); color: var(--bjd-orange-600); font-size: 15px;
}
.bjd-flag__item strong { display: block; font-size: 13.5px; font-weight: 700; margin: 0 0 4px; }
.bjd-flag__item p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--bjd-muted); }
@media (max-width: 767px) { .bjd-flag { grid-template-columns: 1fr; } }

/* short, respectful seniors tagline - on the hero and the flagship head */
.bjd-seniortag {
  margin-left: auto; padding: 4px 11px; border-radius: 999px;
  background: var(--bjd-orange-50); color: var(--bjd-orange-600);
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
}
.bjd-hero__facts li.senior { background: var(--bjd-orange); border-color: transparent; }
.bjd-hero__facts li.senior i { color: #fff; }

/* =====================================================================
   Price rail v2 - a starting price, then a fold, then the ask
   ---------------------------------------------------------------------
   The rail used to open with a full traveller calculator and carry the
   callback form inline, which made the card taller than the screen and
   pushed the phone number and the trust points out of sight. Now it
   reads: what it starts at, how it is priced, the working on request,
   and then the two things to actually do.
   ===================================================================== */
.bjd-start { margin-bottom: var(--bjd-s3); }
.bjd-start__lbl {
  display: block; margin-bottom: 2px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bjd-faint);
}
.bjd-nopay {
  margin: 0 0 var(--bjd-s4);
  font-size: 11.5px; color: var(--bjd-faint);
}


.bjd-calc { margin-bottom: var(--bjd-s4); }
.bjd-calc[hidden] { display: none; }
.bjd-calc__h {
  margin: 0 0 var(--bjd-s2);
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.bjd-calc__sum {
  margin-top: var(--bjd-s4); padding-top: var(--bjd-s4);
  border-top: 1px solid var(--bjd-line-soft);
}

/* the primary ask, and the row of quieter ones under it */
.bjd-btn--cta { margin-bottom: 8px; }
.bjd-railcard .bjd-btn--quiet { margin-bottom: 8px; }
.bjd-btn--wa i, .bjd-btn--wa svg { margin-right: 6px; }

/* =====================================================================
   FAQ - the intro column follows the questions
   ---------------------------------------------------------------------
   The left column ended a third of the way down and left the rest of its
   height empty beside a long list of questions.
   ===================================================================== */
@media (min-width: 992px) {
  .hp-faq__intro { position: sticky; top: 110px; }
}
.hp-faq__help { margin-bottom: 0; }

/* =====================================================================
   Closing CTA
   ---------------------------------------------------------------------
   Two ghost buttons of slightly different weights on a navy ground read
   as one broken pair. One clear primary, one clear secondary.
   ===================================================================== */
.hp-cta__btns .nir-btn,
.hp-cta a.nir-btn {
  border-radius: 999px !important;
  padding: 11px 26px !important;
  font-size: 14px !important;
}
.hp-cta a.nir-btn:first-of-type {
  background: var(--bjl-orange, #f5761a) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.hp-cta a.nir-btn:first-of-type:hover { background: #d9600d !important; color: #fff !important; }
.hp-cta a.nir-btn + a.nir-btn {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .38) !important;
  color: #fff !important;
}
.hp-cta a.nir-btn + a.nir-btn:hover { background: rgba(255, 255, 255, .12) !important; }

/* =====================================================================
   "View details" on the banner card
   ---------------------------------------------------------------------
   It sits where the brief put it: after how the price is worked out and
   before the no-payment line. It carries the reader to the per-adult
   breakdown in the rail and lights it briefly, so the jump reads as an
   answer rather than as the page moving on its own.
   ===================================================================== */
/* Solid white on the navy card. A transparent box with a 30%-white border
   is the treatment a page uses for its SECOND button, and on this card
   there is no first - it was the only thing to press and it read as a
   caption someone had drawn a rectangle around. Filled, it is unmistakably
   a button; white rather than orange because orange belongs to "request a
   callback", and this one only moves you down the page. */
.bjd-hero__view {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin: 11px 0 0; padding: 10px 12px;
  border: 0; border-radius: 8px;
  background: #fff; color: var(--bjd-navy, #17233e);
  font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .5);
  transition: background .18s var(--bjd-ease), transform .18s var(--bjd-ease),
              box-shadow .18s var(--bjd-ease);
}
.bjd-hero__view:hover {
  background: #fff; transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .55);
}
.bjd-hero__view i, .bjd-hero__view svg {
  width: 10px; height: 10px; font-size: 10px;
  color: var(--bjd-orange, #f5761a); opacity: 1;
  transition: transform .22s var(--bjd-ease);
}
.bjd-hero__view:hover i, .bjd-hero__view:hover svg { transform: translateY(2px); }
.bjd-hero__cta { margin-top: 9px !important; }

/* the breakdown the button lands on */
.bjd-calc { border-radius: 10px; transition: box-shadow .3s var(--bjd-ease), background .3s var(--bjd-ease); }
.bjd-calc.is-lit {
  background: var(--bjd-orange-50);
  box-shadow: 0 0 0 3px rgba(245, 118, 26, .35);
}

/* =====================================================================
   Rail spacing
   ---------------------------------------------------------------------
   "View details" scrolls the reader to the breakdown, so what sits under
   it has to be in view when they land - not another screen away. Every
   gap in this card is tightened, and the card scrolls within itself if
   it outgrows the viewport rather than pushing its own buttons off it.
   ===================================================================== */
.bjd-railcard { padding: 16px 16px 18px !important; }
.bjd-railcard .bjd-count { padding: 8px 0 !important; }
.bjd-railcard .bjd-count strong { font-size: 13px; }
.bjd-railcard .bjd-count span { font-size: 11px; }
.bjd-calc { margin-bottom: var(--bjd-s3); }
.bjd-calc__h { margin-bottom: 4px !important; }
.bjd-calc__sum { margin-top: var(--bjd-s3) !important; padding-top: var(--bjd-s3) !important; }
.bjd-line { padding: 3px 0 !important; font-size: 12.5px; }
.bjd-total { margin-top: 8px !important; padding-top: 8px !important; }
.bjd-railnote { margin: 10px 0 0 !important; font-size: 11px !important; line-height: 1.5 !important; }
.bjd-or { margin: 12px 0 8px !important; font-size: 11px !important; }
.bjd-trust { margin-top: 12px !important; padding-top: 12px !important; }
.bjd-trust div { font-size: 11.5px !important; padding: 3px 0 !important; }
.bjd-railcard .bjd-btn { padding: 10px 14px !important; font-size: 13.5px !important; }

/* Call and WhatsApp side by side. As two stacked full-width buttons they
   cost the card 110px to say what fits in 52, and that 110px was part of
   what pushed the two buttons that matter below the fold. */
.bjd-reach { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bjd-reach .bjd-btn { margin: 0; padding: 10px 8px !important; font-size: 12.5px !important; }
.bjd-reach .bjd-btn i, .bjd-reach .bjd-btn svg { margin-right: 5px; }

/* The trust points sit BELOW the card, not inside it. Inside, they were
   124px of a 910px card - and the card only has about 790px of screen to
   live in, so the callback and customise buttons landed under the fold
   exactly when "View details" had just scrolled the reader here. Outside,
   they are still the first thing under the card and still read as part of
   it, but they no longer decide whether the buttons are visible. */
.bjd-trust {
  margin-top: 12px !important; padding: 12px 16px 0 !important;
  border-top: 0 !important;
}
.bjd-trust div { font-size: 11.5px !important; padding: 2px 0 !important; }

/* No max-height and no nested scrollbar here on purpose: a scrollbar
   inside a sticky card is the very thing that hides the buttons at its
   foot. The card is trimmed to fit instead. */

/* ---------------------------------------------------------------
   Banner over a photograph
   ---------------------------------------------------------------
   Now that the lead photo shows through, the fact chips and the title
   need their own ground - on flat navy the faint tint was enough. The
   rating and senior chips keep their green and orange (higher
   specificity above). */
.bjd-hero__facts li { background: rgba(11, 17, 32, .5); border-color: rgba(255, 255, 255, .16); }
.bjd-hero h1 { text-shadow: 0 2px 14px rgba(11, 17, 32, .55); }
.bjd-hero__tag { text-shadow: 0 1px 8px rgba(11, 17, 32, .6); }
.bjd-hero__price { background: rgba(11, 17, 32, .42); }

/* ---------------------------------------------------------------
   Gallery autoplay
   ---------------------------------------------------------------
   The day-wise gallery advances on its own every couple of seconds
   (AUTO_MS in js/bj-detail.js). The frame cross-fades on each swap so
   the change reads as a slide rather than a flicker; hovering the
   gallery, opening the lightbox or leaving the tab holds it, and the
   small pause button beside the counter stops it for good. The
   reduced-motion block above already flattens the animation. */
@keyframes bjdGalIn {
  from { opacity: .35; transform: scale(1.03); }
  to   { opacity: 1;   transform: scale(1); }
}
.bjd-gal__stage img.is-in { animation: bjdGalIn .55s var(--bjd-ease); }

.bjd-gal__tools {
  position: absolute; right: 14px; bottom: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
}
.bjd-gal__tools .bjd-gal__count { position: static; }
.bjd-gal__play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(11, 17, 32, .72); color: #fff; cursor: pointer;
  transition: background .18s var(--bjd-ease);
}
.bjd-gal__play:hover, .bjd-gal__play:focus-visible { background: var(--bjd-orange, #f5761a); }
.bjd-gal__play i, .bjd-gal__play svg { font-size: 11px; width: 11px; height: 11px; }
.bjd-gal__play .on  { display: inline-flex; }
.bjd-gal__play .off { display: none; }
.bjd-gal__play.is-paused .on  { display: none; }
.bjd-gal__play.is-paused .off { display: inline-flex; }

/* Under 992px the price card stacks below the title and the text runs
   the full width, so the left-heavy wash above would leave the right
   half of the headline on bare photograph. A top-to-bottom wash keeps
   the whole banner readable while the picture still shows through. */
@media (max-width: 991px) {
  .bjd-hero::after {
    background: linear-gradient(180deg, rgba(23,35,62,.74) 0%, rgba(23,35,62,.52) 45%, rgba(23,35,62,.8) 100%);
  }
}

/* a package listed before its fare: "On Request" in place of the figure,
   a step smaller than a price so the card keeps its shape */
.bjd-hero__por { font-size: 21px !important; letter-spacing: 0 !important; }
.bjd-railprice__por { font-size: 20px; letter-spacing: 0; }