#model-details-overlay {
    position: fixed;
    inset: 0;
    z-index: 1005;
    overflow: clip;
    color: var(--base-color-black);
  }

  #model-details-overlay .background {
    position: fixed;
    inset: 0;
    background: var(--base-color-yellow);
    z-index: 1;
  }

  #model-details-overlay > .inner {
    position: relative;
    z-index: 2;
    padding: var(--page-padding-left);
    padding-top: calc(52 * var(--px));
    box-sizing: border-box;
    height: 100%;
  }

  #model-details-overlay > .inner > .wrap {
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
  }
  
  #model-details-overlay .brand {
    text-transform: uppercase;
  }

  .btn-close-overlay {
    display: block;
    position: fixed;
    top: calc(40 * var(--px));
    right: calc(31 * var(--px));
    z-index: 5;
  }
  
  body.view-b2b .btn-close-overlay svg path {
    fill: currentColor;
  }
  
  
  @media (max-width: 700px) {
    
    #model-details-overlay {
      overflow: auto;
    }
    
    #model-details-overlay > .inner {
      padding-top: 60px;
    }
    
    #model-details-overlay > .inner > .wrap {
      height: auto;
    }
    
  }
  
  
  @media (max-width: 500px) {
    
    .btn-close-overlay {
      top: 22px;
      right: 22px;
    }
    
    .btn-close-overlay svg {
      width: 26px;
      height: auto;
      display: block;
    }
    
  }










  #model-details-overlay header {
    text-align: center;
    max-width: calc(630 * var(--px));
    margin: 0 auto;
  }

  #model-details-overlay header .brand {
    margin-bottom: 1em;
  }
  
  #model-details-overlay header .name {
    --min-font-size: 1.625rem;
  }
  
  
  @media (max-width: 700px) {
    
    #model-details-overlay header {
      margin-bottom: 20px;
    }
    
    #model-details-overlay header .brand {
      margin-bottom: 0.5em;
    }
    
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  #model-details-overlay {
    --col-1-width: calc(752 * var(--px));
  }
  
  #model-details-overlay .body {
    flex-grow: 1;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
  }
  
  #model-details-overlay .body .col-set {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    width: 100%;
    max-width: calc(1245 * var(--px));
    margin: 0 auto;
  }
  
  #model-details-overlay .body .col-set .col-1 {
    width: var(--col-1-width);
  }
  
  #model-details-overlay .splide__slide,
  #model-details-overlay .splide__slide img {
    width: var(--col-1-width);
  }
  
  #model-details-overlay .body .col-set .col-2 {
    margin-left: auto;
    width: max(280px, calc(405 * var(--px)));
    flex-shrink: 0;
  }
  
  .model-details {
    position: relative;
  }
  
  .model-details > div {
    position: relative;
    z-index: 2;
    padding: max(24px, calc(33 * var(--px)));
  }
  
  .model-details::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background: var(--base-color-white);
    z-index: 1;
    transform: rotate(-1deg);
  }
  
  .model-details-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .model-details-list > li {
    border-bottom: 1px solid var(--base-color-black);
    padding: max(9px, calc(12 * var(--px))) 0;
    width: 100%;
    grid-column: span 2;
  }
  
  .model-details-list > li.li-50,
  .model-details-list > li.li-33,
  .model-details-list > li.li-66 {
    grid-column: span 1;
  }
  
  .model-details-list > li:first-child {
    padding-top: 0;
  }
  
  .model-details-list .label {
    display: block;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  
  .model-details-list .value > span.cpy-10 {
    display: block;
  }
  
  .model-details-list .value.cpy-12 {
    line-height: 1.2;
    display: block;
  }
  
  .model-details .btn-set > div + div {
    margin-top: max(9px, calc(12 * var(--px)));
  }
  
  
  
  @media (max-width: 900px) {
    
    #model-details-overlay {
      --col-1-width: calc(100vw - 280px - 40px);
    }
    
    #model-details-overlay .body .col-set {
      max-width: none;
    }
    
  }
  
  
  @media (max-width: 700px) {
    
    #model-details-overlay .body {
      justify-content: flex-start;
    }
    
    #model-details-overlay .body .col-set {
      flex-flow: column nowrap;
    }
    
    #model-details-overlay {
      --col-1-width: 75vw;
    }
    
    #model-details-overlay .body .col-set .col-2 {
      width: 100%;
      max-width: max(370px, 75vw);
      margin: 0 auto;
      margin-top: 50px;
      padding-bottom: 70px;
    }
    
    .model-details .btn-set > div + div {
      display: none;
    }
    
    .model-details .btn-set > div.bike-builder {
      display: block;
    }
    
    .model-details::after {
      display: none;
    }
    
    .model-details > div:first-child {
      background: var(--base-color-white);
    }
    
  }
  
  
  @media (max-width: 450px) {
    
    #model-details-overlay .body .col-set {
      align-items: flex-start;
    }
    
    #model-details-overlay {
      --col-1-width: calc(100vw - var(--scrollbar-width));
    }
    
    #model-details-overlay .body .col-set .col-1 {
      margin-left: calc(var(--page-padding-left) * -1);
    }
    
  }
  
  
  
  
  
  
  
  
  
  
  
  
  #model-details-overlay .splide__pagination {
    gap: max(10px, calc(16 * var(--px)));
  }
  
  #model-details-overlay .splide__pagination__page {
    --size: max(8px, calc(12 * var(--px)));
    width: var(--size);
    height: var(--size);
    display: inline-block;
    background: #bfb200;
    --active-background: #927e17;
    border-radius: 50px;
    transition: 750ms var(--ttf-4);
    transition-property: width, background;
  }
  
  #model-details-overlay .splide__pagination__page.is-active {
    width: calc(var(--size) * 2);
    background: var(--active-background);
  }
  
  #model-details-overlay .splide__pagination > li:first-child:last-child {
    display: none;
  }
  
  @media (max-width: 700px) {
    
    #model-details-overlay .splide__pagination {
      margin-top: 20px;
    }
    
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  .model-details > div.model-form-wrap {
    position: absolute;
    top: 15px;
    left: -15px;
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    z-index: 3;
    background: var(--base-color-light-purple);
    box-shadow: 0px 85px 34px rgba(0, 0, 0, 0.01), 0px 48px 29px rgba(0, 0, 0, 0.03), 0px 21px 21px rgba(0, 0, 0, 0.04), 0px 5px 12px rgba(0, 0, 0, 0.05), 0px 0px 0px rgba(0, 0, 0, 0.05);
  }
  
  .model-details > div.model-form-wrap:not(.shown),
  .model-details > div.model-form-wrap:not(.shown) * {
    pointer-events: none !important;
  }
  
  .model-details > div.model-form-wrap {
    transform: scale(0.95);
    opacity: 0;
    visibility: hidden;
    transition: 500ms var(--ttf-4);
    transition-property: transform, opacity, visibility;
    transition-delay: 0ms, 0ms, 500ms;
  }
  
  .model-details > div.model-form-wrap.shown {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition-delay: 0ms, 0ms, 0ms;
  }
  
  .model-details .inquiry-form-headline {
    color: var(--base-color-dark-purple);
    margin-bottom: 0.75em;
  }
  
  
  @media (max-width: 700px) {
    
    .model-details > div.model-form-wrap {
      position: relative;
      transform: none;
      opacity: 1;
      visibility: visible;
      top: auto;
      left: auto;
      width: auto;
      min-width: 0;
      min-height: 0;
      box-shadow: none;
      margin-top: 20px;
    }
    
    .model-details > div.model-form-wrap:not(.shown), .model-details > div.model-form-wrap:not(.shown) * {
      pointer-events: all !important;
    }
    
    .form-list--model-inquiry div.cancel {
      display: none;
    }
    
    .form-list--model-inquiry > li.submit > div {
      display: block;
    }
    
    .form-list--model-inquiry button[type="submit"] {
      width: 100%;
      justify-content: center;
    }
    
  }
  
  
  
  
  
  
  
  
  





  #model-details-overlay footer {
    border-top: 1px solid #bfb101;
    margin-top: auto;
  }

  nav.prev-next-model {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 20px 0 0 0;
  }
  
  nav.prev-next-model a {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 10px;
  }
  
  nav.prev-next-model img {
    max-width: max(60px, calc(90 * var(--px)));
  }
  
  nav.prev-next-model .brand {
    margin-bottom: 4px;
  }
  
  nav.prev-next-model .col-3 {
    max-width: calc(300 * var(--px));
  }
  
  nav.prev-next-model svg {
    display: block;
    width: max(20px, calc(20 * var(--px)));
    height: auto;
  }
  
  nav.prev-next-model svg path {
    fill: currentColor;
  }
  
  nav.prev-next-model a.btn-next-model {
    flex-flow: row-reverse nowrap;
  }
  
  nav.prev-next-model a.btn-prev-model svg {
    transform: rotateY(-180deg);
  }
  
  nav.prev-next-model a.btn-next-model .col-3 {
    text-align: right;
  }
  
  @media (hover: hover) {
    
    nav.prev-next-model a {
      opacity: 0.65;
      transition: opacity 250ms;
    }
    
    nav.prev-next-model a:is(:hover, :focus) {
      opacity: 1;
    }
    
  }



  @media (max-width: 700px) {
    
    #model-details-overlay footer {
      display: none;
    }
    
  }