/* Jetour BD mirror — override sheet. Loaded last; never edit vendor CSS. */

/* §7.1 Header logo: the Elite Group Holding logo is removed, leaving only Jetour.
   The logo row already carries .flex--container-justify-center, so the remaining
   Jetour logo centres on its own. These rules make that explicit and guard the
   case where the row's flex context is lost. */
.row-fluid.flex--container .custom-image.module.logo-jetour {
  margin-inline: auto;
}
.custom-image.module.logo-jetour > .inner,
.custom-image.module.logo-jetour > .inner > a {
  display: inline-block;
}

/* Mobile header: the logo row reserves 75px of right padding for the menu/phone
   controls, so "justify-content:center" centres within a 315px box, not the 390px
   viewport - the single Jetour logo lands 38px left of true centre. Balance the box
   so the logo centres on the viewport. Controls are positioned independently and do
   not move; only the logo does. Verified at 390px: centre 195/195. */
@media (max-width: 991px) {
  .row-fluid.flex--container.flex--container-justify-center {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}

/* Header separator: the vendor rule pins the "|" between the WhatsApp and phone buttons
   with a fixed top:33px, which centres it only in the full-height (85px) header. On
   scroll the header shrinks to 70px and the separator sits ~8px low. Centre it on the
   button instead, so it holds at any header height. */
.header-container .contact-us-btn:after {
  top: 50% !important;
  transform: translateY(-50%);
}

/* Contact page: search/filter removed, so show the six locations as a 3-up grid. */
body.bd-locations-3up .locations-list,
body.bd-locations-3up .location-list,
body.bd-locations-3up .dealers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 991px) {
  body.bd-locations-3up .locations-list,
  body.bd-locations-3up .location-list,
  body.bd-locations-3up .dealers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  body.bd-locations-3up .locations-list,
  body.bd-locations-3up .location-list,
  body.bd-locations-3up .dealers { grid-template-columns: 1fr; }
}

/* Pre-owned sidebar filters built by bd-preowned.js (the source ships empty panels). */
.bd-filter-body { display: none; padding: 4px 0 12px; }
.bd-filter-body.bd-open { display: block; }
.bd-filter-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; font-size: 14px; }
.bd-filter-row input { width: 16px; height: 16px; cursor: pointer; }
.bd-price-label { font-size: 14px; padding: 4px 0 8px; }
.bd-price-range { width: 100%; }

/* Dropdown menus are rebuilt by bd-preowned.js; make the open state visible. */
.bootstrap-select .dropdown-menu { display: none; }
.bootstrap-select.bd-open .dropdown-menu { display: block; position: absolute; z-index: 60;
  background: #fff; border: 1px solid #d5d5d5; border-radius: 4px; min-width: 100%;
  max-height: 320px; overflow-y: auto; box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: 4px 0; }
.bootstrap-select.bd-open .dropdown-menu ul { list-style: none; margin: 0; padding: 0; }
.bootstrap-select.bd-open .dropdown-menu a.bd-opt { display: block; padding: 8px 14px; color: #212333;
  text-decoration: none; font-size: 14px; white-space: nowrap; }
.bootstrap-select.bd-open .dropdown-menu a.bd-opt:hover { background: #f2f2f4; }

/* Pre-owned demo: the search sidebar is removed, so the results column spans the row.
   Vuetify's own col classes still cap it at ~78% once its sibling is gone. */
.ndfe-vehicles-col.v-col-12 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Form dropdowns: bootstrap-select re-wraps each <select> at runtime and hides the
   native control, leaving its own non-functional button - so each field appeared
   twice. Hide the plugin's chrome and show the real select, which works natively. */
form select.field,
form .bootstrap-select > select,
form select[name*="location"],
form select[name*="model"] {
  display: block !important;
  width: 100% !important;
  height: 45px;
  padding: 8px 12px;
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  background: #fff;
  font-size: 15px;
}
form .bootstrap-select > button,
form .bootstrap-select > .dropdown-menu,
form .bootstrap-select .filter-option {
  display: none !important;
}
form .bootstrap-select {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* The platform serves an exactly-cropped CDN variant for each image slot and then
   relies on object-fit:fill. The mirror keeps whichever variant the capture browser
   picked, so any slot whose ratio differs was rendering stretched. cover keeps the
   aspect ratio and crops instead; where the ratios already match it is identical to
   fill, so this only changes images that were being distorted. */
img {
  object-fit: cover;
  object-position: center;
}
/* The models banner is a fixed 1440x411 CDN crop, so above 1440px it stopped short
   and left the container showing through. Let it fill the container - object-fit
   above keeps the aspect ratio and crops rather than stretching. */
.bd-banner-crop {
  width: 100% !important;
  min-width: 100%;
}

/* G700 360 exterior viewer - matches the studio layout on jetourglobal.com/G700. */
.g700-3d { background: #fff; padding: 0; }
.g700-3d-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 420px;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  outline: none;
}
.g700-3d-stage:active { cursor: grabbing; }
.g700-3d-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.g700-3d-shadow {
  position: absolute;
  left: 50%; top: 63%;
  width: 76%; max-width: 1444px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  object-fit: contain;
}
.g700-3d-car {
  position: absolute;
  left: 50%; top: 52%;
  width: 64%; max-width: 1218px;
  transform: translate(-50%, -50%);
  object-fit: contain !important;
  pointer-events: none;
}
.g700-3d-side {
  position: absolute;
  right: 4%; top: 26%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.g700-3d-tabs { display: flex; gap: 26px; }
/* exterior-only models show a single tab, so it reads as a label not a choice */
.g700-3d-tabs.is-single button { cursor: default; }
.g700-3d-tabs button {
  background: none; border: 0; padding: 0 0 8px;
  font-size: 26px; line-height: 1.2; color: #9a9a9a;
  cursor: pointer; border-bottom: 2px solid transparent;
}
.g700-3d-tabs button.is-active { color: #111; border-bottom-color: #111; font-weight: 600; }
.g700-3d-swatches {
  position: absolute;
  left: 50%; bottom: 6%;
  transform: translateX(-50%);
  display: flex; gap: 14px;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 12px 18px;
}
.g700-3d-swatch {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, .12);
  cursor: pointer;
  padding: 0;
  transition: transform .15s, box-shadow .15s;
}
.g700-3d-swatch:hover { transform: scale(1.08); }
.g700-3d-swatch.is-active { box-shadow: 0 0 0 3px #111; border-color: #fff; }
.g700-3d-hint {
  position: absolute; left: 50%; bottom: 22%;
  transform: translateX(-50%);
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: #8a8a8a; pointer-events: none;
  transition: opacity .3s;
}
.g700-3d-hint.is-hidden { opacity: 0; }
.g700-3d[data-view="interior"] .g700-3d-car,
.g700-3d[data-view="interior"] .g700-3d-shadow,
.g700-3d[data-view="interior"] .g700-3d-swatches,
.g700-3d[data-view="interior"] .g700-3d-hint { display: none; }
@media (max-width: 767px) {
  .g700-3d-stage { aspect-ratio: 4 / 3; min-height: 320px; }
  .g700-3d-side { right: auto; left: 20px; top: 16px; gap: 12px; }
  .g700-3d-tabs button { font-size: 18px; }
    .g700-3d-swatch { width: 32px; height: 32px; }
  .g700-3d-swatches { gap: 9px; padding: 9px 12px; }
}

/* G700 interior: a WebGL cubemap canvas. A CSS 3D cube could not join the faces without
   a seam, so the panorama is sampled per pixel in a shader instead. */
.g700-int {
  position: absolute; inset: 0;
  display: none;
  overflow: hidden;
  background: #161616;
  cursor: grab;
  touch-action: none;
}
.g700-int.is-grabbing { cursor: grabbing; }
/* pannellum paints into its own container inside .g700-int; make it fill the stage */
.g700-int.pnlm-container, .g700-int .pnlm-container {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #161616 !important;
  cursor: grab;
}
.g700-int .pnlm-render-container { width: 100%; height: 100%; }
.g700-int.pnlm-container:active { cursor: grabbing; }
.g700-int .pnlm-load-box, .g700-int .pnlm-about-msg { display: none !important; }
.g700-3d[data-view="interior"] .g700-3d-stage { cursor: default; }
.g700-int.is-loading::after {
  content: "Loading 360 view";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, .75);
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}
.g700-3d[data-view="interior"] .g700-int { display: block; }
.g700-3d[data-view="interior"] .g700-3d-bg { visibility: hidden; }
.g700-int-swatches {
  position: absolute; left: 50%; bottom: 6%;
  transform: translateX(-50%);
  display: none; gap: 14px;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 12px 18px;
  z-index: 3;
}
.g700-3d[data-view="interior"] .g700-int-swatches { display: flex; }
.g700-3d-side { z-index: 5; }
/* tabs are plain text as on the source site; a soft shadow keeps them legible
   over both the white studio and the dark cabin */
.g700-3d[data-view="interior"] .g700-3d-tabs button {
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
.g700-3d[data-view="interior"] .g700-3d-side .g700-3d-tabs button { color: #fff; }
.g700-3d[data-view="interior"] .g700-3d-side .g700-3d-tabs button.is-active { color: #fff; border-bottom-color: #fff; }
.g700-3d[data-view="interior"] .g700-3d[data-view="interior"] 
/* These figures get their height from the platform's loader, which is stripped here;
   let the image size them instead so full-bleed sections are not zero-height. */
figure.responsive-image, div.responsive-image > picture { display: block; }
figure.responsive-image > picture > img.responsive-image { width: 100%; display: block; }

/* Hero video slide. The poster <img> sizes the slide (as on every other slide) and the
   video is laid over it. The video slide is deliberately not first in the carousel: the
   carousel keeps its first slide as a static height sentinel at z-index 100, and an
   active video slide there stayed painted over every photo. */
.bd-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

/* Warranty band on the model pages. */
.bd-warranty {
  background: #1c1c1c;
  color: #fff;
  padding: 28px 20px 18px;
  text-align: center;
}
.bd-warranty-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px 56px;
}
.bd-warranty-item {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.bd-warranty-item + .bd-warranty-item {
  border-left: 1px solid rgba(255, 255, 255, .35);
  padding-left: 56px;
}
.bd-warranty-years {
  font-size: 68px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}
.bd-warranty-text { display: flex; flex-direction: column; gap: 3px; }
.bd-warranty-head { font-size: 20px; font-weight: 800; line-height: 1.05; }
.bd-warranty-sub {
  background: #35d0c8;
  color: #10322f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 8px;
  align-self: flex-start;
  text-transform: uppercase;
}
.bd-warranty-km { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.bd-warranty-note { font-size: 11px; opacity: .65; margin-top: 14px; letter-spacing: .04em; }
@media (max-width: 767px) {
  .bd-warranty-years { font-size: 52px; }
  .bd-warranty-item + .bd-warranty-item { border-left: 0; padding-left: 0; }
}

/* logos and badges must never be cropped - letterbox them instead */
img[src*="logo"], img[class*="logo"], .logo img, img[src*=".svg"],
img[src*="badge"], img[src*="icon"], img[class*="icon"] {
  object-fit: contain;
}

/* Placeholder for the unreachable interactive model microsites (see D8). */
[data-strapi-iframe] {
  display: block;
  min-height: 320px;
  background: #f4f4f4;
}

/* Placeholder retaining the original map embed dimensions. */
[data-strapi-map] {
  display: block;
  background: #ececec;
}

/* Brochure download gate (bd-brochure-gate.js). Mobile and email are required
   before the PDF is served (the name is optional); the modal is built once and
   toggled with .is-open. */
.bd-modal { position: fixed; inset: 0; z-index: 2147483000; display: none; }
.bd-modal.is-open { display: block; }
html.bd-modal-open, html.bd-modal-open body { overflow: hidden; }
.bd-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(2px);
}
.bd-modal__card {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow-y: auto;
  background: #fff;
  color: #212333;
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  padding: 30px 28px 24px;
}
.bd-modal__close {
  position: absolute; right: 8px; top: 8px;
  /* The theme styles every bare <button> with `padding: 0 3.07692308em`. With
     box-sizing: border-box a box cannot be narrower than its own padding, so
     that rule stretched this 36px square to 172px and parked the x far left of
     the corner. Zeroing the padding restores the square; flex centres the glyph
     inside it, since the same theme rule also forces display: block. */
  display: flex; align-items: center; justify-content: center;
  width: 36px; min-width: 0; height: 36px; padding: 0;
  border: 0; background: none;
  font-size: 28px; line-height: 1; color: #666;
  cursor: pointer;
}
.bd-modal__close:hover { color: #000; }
.bd-modal__title { font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0 28px 8px 0; }
.bd-modal__lead { font-size: 14px; color: #555; margin: 0 0 18px; }
.bd-field { margin-bottom: 14px; }
.bd-field .control-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.bd-req { color: #d0021b; }
.bd-field .field {
  display: block; width: 100%; height: 45px;
  padding: 8px 12px;
  border: 1px solid #d5d5d5; border-radius: 4px;
  background: #fff; font-size: 15px; color: #212333;
}
.bd-field .field:focus { outline: none; border-color: #1c1c1c; box-shadow: 0 0 0 2px rgba(0, 0, 0, .08); }
.bd-field.has-error .field { border-color: #d0021b; }
.bd-field__error { display: block; min-height: 0; font-size: 12px; color: #d0021b; margin-top: 4px; }
/* Honeypot. Kept display:none rather than parked off-screen: Chrome's autofill
   and password managers do fill off-screen text inputs, and every such fill was
   rejected server-side as spam, so real visitors lost their download. */
.bd-hp { display: none; }
.bd-modal__submit {
  display: block; width: 100%; height: 48px;
  margin-top: 6px;
  border: 0; border-radius: 4px;
  background: #1c1c1c; color: #fff;
  font-size: 15px; font-weight: 600; letter-spacing: .02em;
  cursor: pointer;
}
.bd-modal__submit:hover { background: #000; }
.bd-modal__submit[disabled] { opacity: .6; cursor: default; }
.bd-modal__status { min-height: 18px; font-size: 13px; margin: 12px 0 0; text-align: center; color: #555; }
.bd-modal__status.is-success { color: #1a7f37; }
.bd-modal__status.is-error { color: #d0021b; }
.bd-modal__note { font-size: 11px; color: #888; margin: 10px 0 0; text-align: center; line-height: 1.4; }

/* Offers page: banner on top, then a 12-column row split into a note (left) and
   the enquiry form (right). The vendor grid only floats .span6 inside its own
   row scaffolding, which this hand-built row does not carry, so lay it out here. */
.bd-offers-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 48px 20px 64px;
}
.bd-offers-row > .span6 {
  flex: 1 1 calc(50% - 20px);
  min-width: 0;
  width: auto;
  margin: 0;
}
.bd-offers-note h1 { font-size: 30px; line-height: 1.25; margin: 0 0 18px; }
.bd-offers-note .bd-no-offer {
  font-size: 19px; font-weight: 600; color: #212333;
  border-left: 3px solid #212333; padding: 6px 0 6px 14px; margin: 0 0 18px;
}
.bd-offers-note p { font-size: 15px; line-height: 1.6; color: #555; }
.bd-offers-form { background: #f6f6f7; border-radius: 6px; padding: 28px 26px; }
.bd-offers-form .control-label { font-size: 13px; font-weight: 600; }
.bd-offers-form .btn.button {
  width: 100%; height: 48px; border: 0; border-radius: 4px;
  background: #1c1c1c; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}
.bd-offers-form .btn.button:hover { background: #000; }
@media (max-width: 767px) {
  .bd-offers-row { gap: 28px; padding: 28px 16px 40px; }
  .bd-offers-row > .span6 { flex: 1 1 100%; }
}

/* Service centre page: the photo columns beside each text block were removed, so the
   remaining .text.span6 columns would otherwise hold half width with empty space
   beside them. Let them run full width on this page only. */
body.largest-jetour-service-center-globally-al-quoz .row-fluid > .text.span6 {
  width: 100% !important;
  float: none;
  margin-left: 0;
}

/* Buy Back page: the vehicle list is intentionally empty, so the results column
   shows the placeholder instead of cards. Filters are left untouched. */
.bd-no-options { font-size: 17px; color: #555; padding: 32px 0 48px; margin: 0; }

/* Header CTA: the "My Account" button pointed at /checkout, which this static site
   has no page for, so that slot now carries the Book a Test Drive call to action.
   Styled as a text button to sit beside the WhatsApp and phone icons. */
.bd-testdrive-btn > .btn {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  margin-right: 14px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 3px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .15s, border-color .15s;
}
.bd-testdrive-btn > .btn:hover { background: #fff; border-color: #fff; color: #1c1c1c; }
.bd-testdrive-btn > .btn .label { color: inherit; }
@media (max-width: 1199px) {
  .bd-testdrive-btn > .btn { padding: 0 11px; font-size: 12px; margin-right: 10px; }
}

/* Careers: the application form ships inside a hidden modal that the removed
   "Explore Our Job Openings" button used to open. The page now shows it inline,
   so unwrap the modal chrome and let it flow in the page. */
.modal.bd-inline-form {
  display: block !important;
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: none !important;
  overflow: visible !important;
  z-index: auto !important;
  max-width: 720px;
  margin: 0 auto 56px;
  padding: 0 20px;
}
.modal.bd-inline-form .modal-dialog,
.modal.bd-inline-form .modal-content {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  background: #f6f6f7;
  border-radius: 6px;
}
.modal.bd-inline-form .modal-body { padding: 28px 26px !important; }
.modal.bd-inline-form .modal-header { padding: 24px 26px 0 !important; border: 0 !important; }
.modal.bd-inline-form .close, .modal.bd-inline-form .modal-backdrop { display: none !important; }
.modal.bd-inline-form .btn.button {
  width: 100%; height: 48px; border: 0; border-radius: 4px;
  background: #1c1c1c; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}
.modal.bd-inline-form,
.modal.bd-inline-form .modal-dialog,
.modal.bd-inline-form .modal-content,
.modal.bd-inline-form .modal-body { max-height: none !important; height: auto !important; }

/* Offers form: the platform gives the consent row a fixed height, so its wrapped
   second line was clipped and ran under the Submit button. Let it size to content. */
.bd-offers-form .control-group.is-checkbox,
.bd-offers-form .control-group.is-checkbox .tick-box,
.bd-offers-form .control-group.is-checkbox .controls,
.bd-offers-form .control-group.is-checkbox label,
.bd-offers-form .control-group.is-checkbox span {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  line-height: 1.45;
}
.bd-offers-form .control-group.is-checkbox { margin-bottom: 18px; }
.bd-offers-form .control-group.is-checkbox .controls label { display: flex; gap: 8px; align-items: flex-start; }
.bd-offers-form .control-group.is-checkbox input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; }


/* Homepage warranty block. The row (.inner > a) is a flex container whose items
   default to stretch, so .thumb takes the full row height and its 3.5:1 image sits
   at the top of that box while the taller text column runs past it. Centring the
   flex items does not move the image - the image has to be centred inside .thumb.
   Only this module pairs jump-02 with thumb--8@md. */
@media (min-width: 768px) {
  .jump-02.thumb--8\@md .inner > a > .thumb {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .jump-02.thumb--8\@md .inner > a > .thumb > .responsive-image {
    width: 100%;
  }
}

/* Showroom map. The theme's .google-map module is filled by the Google Maps JS
   API, which needs a key this build does not have, so it rendered as an empty
   grey panel; a plain embed iframe is used instead. fill-height gives the
   column its height, and min-height keeps the map usable when it does not. */
.bd-map { overflow: hidden; }
.bd-map iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; }

/* The sticky sub-nav CTA buttons are pinned to a 140px inner width, which wrapped
   "Book a Test Drive" onto two lines while "Enquire About" fitted. Let these buttons
   size to their own text instead. Scoped to .waypoint-button so the jump links
   (.waypoint-item-*) in the same bar are untouched. */
.sticky-module-inset .waypoint-button,
.sticky-module-inset .waypoint-button .inner { width: auto !important; }
.sticky-module-inset .waypoint-button a { white-space: nowrap; }

/* A section background that plays a short muted clip. The image stays as the sizer so
   the section keeps its height, and the video is laid over it. */
.bd-video-host { position: relative; }
.bd-section-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

/* The clip brightens as it plays, so white copy over it can wash out. A soft gradient
   sits above the video but below the text, keeping the write-up readable throughout. */
.bd-video-host::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.42) 40%, rgba(0,0,0,0.10) 70%, rgba(0,0,0,0) 100%);
}

/* Posters inside a blog article: full width of the column, never cropped. */
.bd-blog-poster { display: block; width: 100%; height: auto; margin: 0 auto; border-radius: 4px; }

/* Model-page slides: drop the theme's dark overlays so the photography shows at full
   contrast. Most flat-overlay slides carry white caption text that the overlay was
   giving contrast to, so the captions get a shadow instead. The video background
   scrim (.bd-video-host::after) is intentionally not touched. */
.bd-no-slide-overlay [class*="thumb--overlay"] figure.responsive-image:before { display: none !important; }
.bd-no-slide-overlay [class*="thumb--overlay"] .caption,
.bd-no-slide-overlay [class*="thumb--overlay"] .text,
.bd-no-slide-overlay [class*="thumb--overlay"] h2,
.bd-no-slide-overlay [class*="thumb--overlay"] h3,
.bd-no-slide-overlay [class*="thumb--overlay"] p {
  text-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 0 14px rgba(0,0,0,0.5);
}

/* Model page CTAs on a phone. Three buttons need 467px of a row that is only 335px wide,
   so they ran off both edges. Let the row wrap and send the brochure to a line of its own
   under Enquire About and Book a Test Drive, which together fit comfortably. Pages with
   only the two buttons are untouched - they already fit on one line. */
@media (max-width: 767px) {
  .sticky-module-inset .span3.flex--container { flex-wrap: wrap; }
  .sticky-module-inset .span3.flex--container > .bd-cta-brochure {
    order: 2;
    flex: 0 0 100%;
    padding-right: 0;
    text-align: center;
  }
}

/* One slide needs its scrim back. The G700 powertrain shot is a pale studio image and its
   copy is white, so with the flat overlay gone the heading and paragraph were unreadable.
   The two breakpoints need different scrims because the text moves: centred across the
   whole frame on a phone, so an even wash; left-aligned from 768px up, so a gradient that
   darkens only that side and leaves the engine clear. */
.bd-no-slide-overlay .bd-scrim figure.responsive-image:before {
  display: block !important;
  background-color: rgba(0,0,0,.45);
  background-image: none;
}
@media (min-width: 768px) {
  .bd-no-slide-overlay .bd-scrim figure.responsive-image:before {
    background-color: transparent;
    background-image: linear-gradient(90deg,
      rgba(0,0,0,.72) 0%, rgba(0,0,0,.60) 30%, rgba(0,0,0,.28) 55%, rgba(0,0,0,0) 80%);
  }
}

/* Sticky model bar on desktop. The nav and the buttons sat in a fixed 9/3 column split,
   but the three T2 i-DM buttons need far more than a quarter of the row, so they spilled
   out of their column and printed on top of the last nav item at 1366px and below - the
   width of a very common laptop. Let the buttons take exactly the room they need and give
   the nav whatever is left; where that is not enough the nav wraps to a second line, which
   it is already set up to do, instead of being covered. */
@media (min-width: 768px) {
  .sticky-module-inset .layout-5 > .span9 { flex: 1 1 auto; min-width: 0; }
  .sticky-module-inset .layout-5 > .span3 { flex: 0 0 auto; width: auto; max-width: none; }
}

/* The same bar between 768px and 1439px. One line needs 1292px of content - 792px of nav
   plus 500px of buttons - which a 1366px laptop misses by only 6px. Tightening the spacing
   buys back about 70px, enough for 1366 to stay on one line. Narrower desktops are genuinely
   too tight for five nav items beside three buttons, and there the nav wraps instead.
   The theme's spacing utilities are declared !important and its stylesheet is loaded again
   after this one, so these have to be !important to take effect. */
@media (min-width: 768px) and (max-width: 1439px) {
  .sticky-module-inset .span9 > .jump.module { padding-right: 10px !important; }
  .sticky-module-inset .span3 > .jump.module { padding-right: 4px !important; }
  .sticky-module-inset .span3 .btn { padding-left: 8px !important; padding-right: 8px !important; }
  .sticky-module-inset .span9 { row-gap: 0; }
}

/* A 1280px desktop is 20px short even after that, so it gets one more notch of tightening.
   Below 1280 the nav wraps, which at that width is the right outcome. */
@media (min-width: 768px) and (max-width: 1365px) {
  .sticky-module-inset .span9 > .jump.module { padding-right: 6px !important; }
  .sticky-module-inset .span3 .btn { padding-left: 6px !important; padding-right: 6px !important; }
}

/* Below 1280 there is genuinely no room for five nav items beside three buttons, so the
   two stack: the nav keeps a single line across the full width and the buttons sit under
   it. Squeezing the nav into the leftover third instead made it wrap to four ragged lines
   and pushed the bar to 202px. */
@media (min-width: 768px) and (max-width: 1279px) {
  .sticky-module-inset .layout-5 { flex-wrap: wrap; }
  .sticky-module-inset .layout-5 > .span9 { flex: 1 1 100%; }
  .sticky-module-inset .layout-5 > .span3 { flex: 1 1 100%; justify-content: center; }
}

/* The selected colour's name, sitting just above the swatch pill.
   The pill, this label and the drag hint are stacked by offsetting each from the pill's
   own bottom position in pixels. Percentages do not work here: the stage is 16:9 on a
   desktop but 4:3 with a 320px floor on a phone, so a percentage that clears the pill on
   a wide screen puts the hint underneath this label on a short one. */
.g700-3d-colour-name {
  position: absolute;
  left: 50%; bottom: calc(6% + 78px);
  transform: translateX(-50%);
  font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #1c1c1c; white-space: nowrap; pointer-events: none;
}
.g700-3d-hint { bottom: calc(6% + 110px); }
.g700-3d[data-view="interior"] .g700-3d-colour-name { display: none; }
@media (max-width: 767px) {
  .g700-3d-colour-name { bottom: calc(6% + 60px); font-size: 12px; }
  .g700-3d-hint { bottom: calc(6% + 88px); }
}

/* Carousel card text on a phone. Two of the theme's scripts measure a card heading and
   body once - one at about 0.6s, cycleAutoHeight again at 2.5s - and write the result as a
   fixed pixel height so the cards sit level. The measurement is taken at a width the card
   never has on a phone, where the text wraps to more lines than it allowed; with overflow
   visible the heading then printed straight over the paragraph beneath it.
   An !important declaration beats both inline styles. Only phones are released from the
   fixed height: above 767px the cards sit side by side and the measurement is correct, so
   levelling them there is still worth having. */
@media (max-width: 767px) {
  .jumps-cycle .item .strapline,
  .jumps-cycle .item .title,
  .jumps-cycle .item .sub-title,
  .jumps-cycle .item .content,
  .jumps-cycle .item .details { height: auto !important; }
}

/* "About Jetour Bangladesh" on the homepage sits in a three-column row, and the theme
   gives only the first column padding-top: 66px. That indent was designed around artwork
   this build does not carry, so it just dropped the first heading 66px below the other
   two. Zeroed so all three line up. The width in the same rule is left alone - it sets the
   column proportions. Only the homepage carries .zung--001A. */
.zung--001A .cms .row-fluid:first-child { padding-top: 0 !important; }

/* The homepage offers carousel reserves three slots but only carries two cards, and the
   track centres its slides, so on a wide screen the 600px of spare room was split evenly
   and pushed the cards 300px right of everything else. The page's content column sits at
   the same left edge throughout - the section heading above these cards included - so the
   track is left-aligned instead. Carousels whose slides fill the track are unaffected,
   since there is no spare room to distribute. */
.cycle-features .cycle-carousel-wrap { text-align: left; }

/* Scroll reveals: text and images rise and fade in as they come into view.
   .bd-reveal-on is put on <html> by the script itself, so nothing is ever hidden unless
   the script is running - without JS, or if it throws, the page reads normally.
   Off for visitors who ask for reduced motion, and the movement is small enough not to
   cause a horizontal scrollbar. */
.bd-reveal-on .bd-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.22,.68,.3,1);
  will-change: opacity, transform;
}
.bd-reveal-on .bd-reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .bd-reveal-on .bd-reveal { opacity: 1; transform: none; transition: none; }
}