.rolex {
  /* colors */
  --rolex-green: #006039;
  --green: #127749;
  --ocean-green: #61bd93;
  --brown: #452c1e;
  --black: #212121;
  --dark-grey: #767676;
  --grey: #d4d4d4;
  --beige: #f4efea;
  --light-beige: #f9f7f4;
  --white: #ffffff;
  --navigation-gradient: linear-gradient(90deg, #0b3e27, #197149);
  /* fonts */
  --primary-font-family: "Helvetica Now Text", Helvetica, Arial, sans-serif;
  --primary-font-weight: 300;
  --base-font-size: 16px;
  --quote-font-family: "Georgia", serif;
  --quote-font-weight: 400;
  --font-weight-bold: 700;
  --base-line-height: 1.1;
  --secondary-line-height: 1.6;
  /* spacing */
  --breakpoint-small: 767px;
  --breakpoint-med: 1024px;
  --breakpoint-large: 1025px;
  --outer-margin: 7%;
  --btn-height: 2.5rem;
  --grid-col-num: 6;
  --grid-gap: 6px;
}

.body-no-scroll {
  overflow: hidden;
  height: 100vh;
}

@media(min-width: 768px) {
  .rolex {
    --grid-col-num: 12;
    --grid-gap: 8px;
    --btn-height: 2.75rem;
    --outer-margin: 8%;
  }
}

.jfj-rolex-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-col-num), 1fr);
  gap: var(--grid-gap);
}

.jfj-rolex-margin {
  margin: 0 var(--outer-margin);

  &.video-container--playing {
    .overlay-text {
      display: none;
    }
  }
}

.jfj-rolex-bg-white {
  background-color: var(--white);
}

.jfj-rolex-bg-beige {
  background-color: var(--beige);
}

.jfj-rolex-bg-light-beige {
  background-color: var(--light-beige);
}

.pt-sm-0 {
  padding-top: 0;
}

.pt-sm-30 {
  padding-top: 30px;
}

.pt-sm-50 {
  padding-top: 50px;
}

.pt-sm-60 {
  padding-top: 60px;
}

.pt-sm-90 {
  padding-top: 90px;
}

.pb-sm-0 {
  padding-bottom: 0;
}

.pb-sm-30 {
  padding-bottom: 30px;
}

.pb-sm-40 {
  padding-bottom: 40px;
}

.pb-sm-45 {
  padding-bottom: 45px;
}

.pb-sm-50 {
  padding-bottom: 50px;
}

.pb-sm-60 {
  padding-bottom: 60px;
}

.pb-sm-90 {
  padding-bottom: 90px;
}

@media(min-width: 768px) {
  .pt-0 {
    padding-top: 0;
  }

  .pt-30 {
    padding-top: 30px;
  }

  .pt-50 {
    padding-top: 50px;
  }

  .pt-60 {
    padding-top: 60px;
  }

  .pt-90 {
    padding-top: 90px;
  }

  .pb-0 {
    padding-bottom: 0;
  }

  .pb-30 {
    padding-bottom: 30px;
  }

  .pb-40 {
    padding-bottom: 40px;
  }

  .pb-45 {
    padding-bottom: 45px;
  }

  .pb-50 {
    padding-bottom: 50px;
  }

  .pb-60 {
    padding-bottom: 60px;
  }

  .pb-90 {
    padding-bottom: 90px;
  }
}

.rolex {
  .headline-30 {
    font-size: clamp(22px, calc(0.6938vw + 16.68px), 30px);
    font-family: var(--primary-font-family);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
  }

  .headline-50,
  .headline-50 h3,
  .headline-50 h1,
  .headline-50 h2 {
    font-size: clamp(30px, calc(1.7346vw + 16.70px), 50px);
    font-family: var(--primary-font-family);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
  }

  .body-20,
  .body-20 p {
    font-size: clamp(18px, calc(0.1735vw + 16.67px), 20px);
    font-family: var(--primary-font-family);
    font-weight: var(--primary-font-weight);
    line-height: 1.6;
  }

  .body-20-b {
    font-size: clamp(18px, calc(0.1735vw + 16.67px), 20px);
    font-family: var(--primary-font-family);
    font-weight: var(--font-weight-bold);
    line-height: 1.6;
  }
}

/* buttons */
.rolex button,
.rolex a {
  text-transform: none;

  &.jfj-rolex-primary-btn {
    background-color: var(--green);
    border: none;
    border-radius: 30px;
    color: #fff;
    font-family: var(--primary-font-family);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    height: 44px;
    letter-spacing: normal;
    padding: 0 30px;

    &:hover {
      background-color: var(--rolex-green);
    }
  }

  &.jfj-rolex-secondary-cta-btn {
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;

    span {
      color: var(--green);
      font-family: var(--primary-font-family);
      font-size: 14px;
      font-weight: var(--font-weight-bold);
      letter-spacing: normal;
      margin-right: 6px;
    }

    svg.arrow-icon {
      fill: var(--green);
      height: 12px;
      width: 12px;
    }

    &:hover {
      span {
        color: var(--black);
      }

      svg.arrow-icon {
        fill: var(--black);
      }
    }
  }

  &.jfj-rolex-tertiary-cta {
    border: none;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    background: transparent;
    justify-content: center;

    .icon-wrapper {
      height: 36px;
      width: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--light-beige);
    }

    svg.contact-icon {
      fill: var(--brown);
      height: 10px;
      width: 10px;
    }

    span {
      color: var(--brown);
      font-family: var(--primary-font-family);
      font-size: 14px;
      font-weight: var(--font-weight-bold);
      letter-spacing: normal;
      margin-left: 6px;
      display: none;
    }

    &:hover {
      span {
        color: var(--green);
      }

      svg.contact-icon {
        fill: var(--green);
      }
    }

    @media screen and (min-width: 768px) {
      span {
        display: block;
      }
    }
  }

  &.jfj-rolex-round-btn {
    background: rgba(118, 118, 118, .5);
    border: none;
    height: 44px;
    width: 44px;
    border-radius: 50%;
    padding: 0;

    &:focus-visible {
      outline-color: var(--green) !important;
      outline-offset: 2px !important;
    }

    &:hover {
      background: rgba(118, 118, 118, .3);
    }

    svg {
      fill: var(--white);
      height: 12px;
      width: 12px;
    }
  }
}

.jfj-rolex-image-text {
  margin-bottom: 23px;
  margin-top: 0;
  h2 {
    color: var(--black);
  }

  .flexible-layout .column {
    margin-bottom: 0;
  }
}

/* jfj-rolex-main-nav.liquid */
.rolex.rolex-page__header {
  background: var(--navigation-gradient);
  position: relative;

  a:focus-visible, button:focus-visible {
    outline-color: var(--ocean-green) !important;
  }

  .nav-inner-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 80px;

    .jfj-rolex-grid {
      gap: 0;
      height: 100%;
    }

    .rolex-badge {
      display: flex;
      align-items: center;
      width: 120px;
      height: 100%;

      a {
        display: block;
        height: 60px;
        width: 120px;
      }
    }

    a:link,
    a:visited {
      color: var(--white);
    }

    a:hover,
    a:active {
      color: var(--ocean-green);
    }

    .rolex-menu {
      background: var(--navigation-gradient);
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      transform: translateY(-100%) translateZ(0px);
      margin-top: 80px;
      z-index: 100;

      ul {
        display: grid;
        grid-gap: 35px;
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        opacity: 0;
        margin: 40px var(--outer-margin) 80px;

        li {
          list-style-type: none;
          font-family: var(--primary-font-family);
          font-size: 22px;
          font-weight: var(--font-weight-bold);
          line-height: 1.6;

          a:link,
          a:visited {
            color: var(--white);
          }

          a:hover,
          a:active {
            color: var(--ocean-green);
          }
        }
      }

      &.open {
        display: block;
        transform: translateY(0%) translateZ(0px);
        z-index: 1000;

        ul {
          opacity: 1;
        }
      }
    }
  }

  .jfj-rolex-menu-mobile-button {
    background-color: transparent;
    border: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    grid-column: 9 / 13;
    padding: 0;

    .rolex-menu-mobile {
      color: var(--white);
      font-family: var(--primary-font-family);
      padding-right: 10px;
      display: inline-block;
      text-decoration: none;
      flex-grow: 1;
      text-align: right;
      font-size: var(--base-font-size);
      font-weight: var(--font-weight-bold);
      margin-right: 0;

      &:after {
        display: none;
      }
    }

    .arrow {
      fill: var(--white);
      height: 12px;
      width: 12px;
    }

    &:hover {
      .rolex-menu-mobile {
        color: var(--ocean-green);
      }

      .arrow {
        fill: var(--ocean-green);
      }
    }

    &.open {
      .arrow {
        transform: rotate(180deg) translateZ(0px);
      }
    }
  }

  .jfj-rolex-breadcrumbs {
    height: 30px;

    ul {
      margin: 0;
      display: flex;
      flex-direction: row;
      gap: 10px;

      li {
        list-style: none;
        display: flex;
        font-family: var(--primary-font-family);
        font-weight: var(--primary-font-weight);
        font-size: 14px;
        color: var(--ocean-green);
        height: 24px;

        a {
          color: var(--white);
        }

        a:hover {
          color: var(--ocean-green);
        }
      }
    }
  }

  &.rcpo,
  &.rcpo .rolex-menu {
    background: black;

    a.active {
      color: var(--ocean-green) !important;
    }
  }

    a.active {
      color: var(--ocean-green) !important;
    }

  @media(max-width: 767px) {
    .jfj-rolex-breadcrumbs {
      ul li {
        display: none;

        &.mobile-active {
          display: flex;

          &::before {
            border-color: var(--white);
            border-style: solid;
            border-width: 1px 1px 0 0;
            content: '';
            display: inline-block;
            height: 8px;
            position: relative;
            top: 7px;
            transform: rotate(-135deg);
            vertical-align: top;
            width: 8px;
            margin-right: 10px;
          }
        }
      }
    }
  }

  @media(min-width: 768px) {
    .nav-inner-wrapper {
      height: 100px;
    }

    .rolex-badge a {
      height: 60px;
      width: 120px;
    }

    .jfj-rolex-breadcrumbs {
      ul li {
        display: flex;

        &::before {
          border-color: var(--white);
          border-style: solid;
          border-width: 1px 1px 0 0;
          content: '';
          display: inline-block;
          height: 8px;
          position: relative;
          top: 7px;
          transform: rotate(45deg);
          vertical-align: top;
          width: 8px;
          margin-right: 10px;
        }

        &:first-child::before {
          display: none;
        }
      }
    }
  }

  @media(min-width: 1700px) {
    .nav-inner-wrapper {
      height: 110px;
      display: block;

      .jfj-rolex-grid {
        display: flex;
      }

      .rolex-badge {
        margin-right: 50px;
      }

      .rolex-menu-mobile,
      .jfj-rolex-menu-mobile-button {
        display: none;
      }

      .rolex-menu {
        display: inline;
        position: static;
        background: none;
        margin-top: 0;
        transform: none;
        height: auto;

        ul {
          grid-gap: 2vw;
          grid-auto-flow: column;
          opacity: 1;
          width: auto;
          margin: 0;
          height: 100%;

          li {
            display: flex;
            align-items: center;
            font-size: var(--base-font-size);
            line-height: var(--base-line-height);
            justify-content: flex-end;

            a {
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
}

/* jfj-rolex-footer.liquid */
.rolex.rolex-footer {
  background: var(--navigation-gradient);
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  &.jfj-rolex-bg-black {
    background: #000;
  }

  .rolex-footer-image {
    height: 120px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      height: 32px;
      width: 32px;
    }

    a:focus-visible {
      outline-color: var(--ocean-green) !important;
    }
  }

  .rolex-back-to-top {
    height: 60px;
    font-family: helvetica;
    font-size: var(--base-font-size);
    font-weight: var(--font-weight-bold);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    a {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      &:focus-visible {
        outline-color: var(--ocean-green) !important;
      }
    }

    a:link,
    a:visited {
      color: var(--white);
    }

    a:hover,
    a:active {
      color: var(--ocean-green);
    }

    a:before {
      content: "";
      display: block;
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='none' height='24' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 15l-6-6-6 6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-size: contain;
      width: 15px;
      height: 15px;
    }

    a:hover:before {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='none' height='24' stroke='%23142951' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 15l-6-6-6 6'/%3E%3C/svg%3E");
    }
  }

  @media(min-width: 768px) {
    height: 240px;

    .rolex-footer-image {
      height: 160px;

      img {
        height: 40px;
        width: 40px;
      }
    }

    .rolex-back-to-top {
      height: 80px;
    }
  }
}

/* jfj-rolex-banner.liquid */
.rolex.jfj-rolex-banner {
  .jfj-rolex-banner-inner {
    position: relative;
    min-width: 100%;
    transition: transform 1s ease;
  }

  .jfj-rolex-banner-content {
    position: absolute;
    bottom: 40px;
    width: 100%;

    a:focus-visible, button:focus-visible {
      outline-color: var(--green) !important;
      outline-offset: 2px;
    }

    >div {
      height: 100%;
    }

    div div {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
  }

  .jfj-rolex-align-left {
    grid-column: 1 / 7;
  }

  h1 {
    color: var(--black);
    font-family: var(--primary-font-family);
    font-weight: var(--font-weight-bold);
    font-size: min(max(4vw, 30px), 70px);
    line-height: var(--base-line-height);
    margin-bottom: 20px;
  }

  @media(min-width: 768px) {
    .jfj-rolex-banner-inner {
      .jfj-rolex-banner-content {
        text-align: left;
        position: absolute;
        bottom: 50px;
        left: 0;
        top: 0;
        height: 100%;

        div div {
          justify-content: center;
        }

        .jfj-rolex-align-left {
          grid-column: 1 / 7;
        }
      }
    }
  }

  &.jfj-rolex-secondary {
    p.subheading {
      color: var(--white);
      font-family: var(--primary-font-family);
      font-weight: var(--font-weight-bold);
      text-transform: none;
      font-size: 22px;
      letter-spacing:-0.16px;
      margin-bottom: 0;
    }
    p.heading {
      color: var(--white);
      font-family: var(--primary-font-family);
      font-weight: var(--font-weight-bold);
      font-size: min(max(4vw, 30px), 70px);
      line-height: var(--base-line-height);
      margin-bottom: 20px;
    }
  }
}

/* jfj-rolex-slider.liquid */
.rolex.jfj-rolex-slider-container {
  margin-top: 0;
  overflow-x: hidden;
  overflow-y: visible;
  position: relative;

  .slider-nav-left {
    svg {
      transform: rotate(180deg);
    }
  }

  .dashes {
    display: flex;
    justify-content: center;
    z-index: 3;
    gap: 12px;
    margin-top: 12px;

    @media(min-width: 768px) {
      margin-top: 0;
    }
  }

  .dash {
    min-width: 24px;
    height: 24px;
    border: none;
    cursor: pointer;
    position: relative;
    padding: 0;
    background-color: transparent;

    span {
      width: 20px;
      height: 4px;
      background-color: var(--grey);
      border-radius: 30px;
      display: block;
    }

    &:hover span {
      background-color: var(--green);
    }

    &.active span {
      width: 50px;
      background-color: var(--green);
    }

    &:focus-visible {
      outline-color: var(--green) !important;
      outline-offset: 2px !important;
    }
  }

  .jfj-rolex-slider:has(.slide-dark.active),
  .jfj-rolex-slider:has(.slide-light.active) {
    .dash {
      background-color: var(--black);
    }

    .jfj-rolex-round-btn {
      background: rgba(212, 212, 212, .3);

      svg {
        fill: var(--brown);
      }

      &:hover {
        background: rgba(118, 118, 118, .3);
      }
    }
  }

  .jfj-rolex-slider {
    display: flex;

    .slider-nav-wrapper {
      height: 100%;

      >div {
        height: 100%;
        min-width: var(--outer-margin);
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 100;

        &.left {
          left: 0;
        }

        &.right {
          right: 0;
        }
      }
    }

    .jfj-rolex-slide {
      position: relative;
      min-width: 100%;
      transition: transform 1s ease;

      /* @media(min-width: 768px) {
        img {
            object-fit: cover;
            object-position: top;
            height: 100%;
          }
      } */
      &.slide-dark {
        a:focus-visible, button:focus-visible {
          outline-color: var(--ocean-green) !important;
          outline-offset: 2px !important;
        }
      }

      &.slide-light {
        a:focus-visible,
        button:focus-visible {
          outline-color: var(--green) !important;
          outline-offset: 2px !important;
        }
      }

      &.slide-dark,
      &.slide-light {

        p,
        h3 {
          color: var(--black);
        }
      }

      .jfj-rolex-slide-content {
        text-align: center;
        width: 100%;

        >div {
          height: 100%;
        }

        div div {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
        }

        &.hide-on-mobile-true {
          display: none;
        }
      }

      .jfj-rolex-align-left,
      .jfj-rolex-align-right {
        grid-column: 1 / 7;
      }

      h3 {
        font-family: var(--primary-font-family);
        font-weight: var(--font-weight-bold);
        font-size: min(max(4vw, 36px), 70px);
        line-height: var(--base-line-height);
        margin-bottom: 20px;
      }

      p {
        font-family: var(--primary-font-family);
        font-weight: var(--font-weight-bold);
        font-size: min(max(2vw, 22px), 26px);
        line-height: 1.2;
        margin-bottom: 0;
      }
    }

    @media(min-width: 768px) {
      &:has(.slide-light.active) {
        .dash {
          background-color: var(--white);
        }

        .jfj-rolex-round-btn {
          background: rgba(118, 118, 118, .5);

          svg {
            fill: var(--white);
          }

          &:hover {
            background: rgba(118, 118, 118, .3);
          }
        }
      }

      .dashes {
        bottom: 30px;
      }

      .jfj-rolex-slide {
        &.slide-light {

          p,
          h3 {
            color: var(--white) !important;
          }
        }

        .jfj-rolex-slide-content {
          text-align: left;
          position: absolute;
          bottom: 50px;
          left: 0;
          top: 0;
          height: 100%;

          div div {
            justify-content: center;
          }

          .jfj-rolex-align-left {
            grid-column: 1 / 6;
          }

          .jfj-rolex-align-right {
            grid-column: 8 / 13;
          }

          &.hide-on-mobile-true {
            display: block;
          }
        }
      }
    }
  }
}

/* jfj-rolex-push.liquid */
.rolex.jfj-rolex-push {
  display: flex;
  flex-direction: column;

  h3.rolex-push-heading {
    color: var(--brown);
    font-family: var(--primary-font-family);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    font-size: 24px;
    margin-bottom: 20px;
  }

  .rolex-push-row {
    position: relative;
    column-gap: var(--grid-gap);
    row-gap: 50px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);

    img {
      width: 100%;
      display: block;
    }

    button {
      height: 24px;
    }

    a:focus-visible, button:focus-visible {
      outline-color: var(--green) !important;
    }

    .rolex-push-content {
      padding-top: 10px;

      h5 {
        color: var(--brown);
        font-family: var(--primary-font-family);
        font-size: var(--base-font-size);
        font-weight: var(--font-weight-bold);
        line-height: var(--base-line-height);
        margin: 0;
      }

      h4 {
        color: var(--brown);
        font-family: var(--primary-font-family);
        font-size: 24px;
        font-weight: var(--font-weight-bold);
        line-height: 1.2;
        margin-bottom: 0;
      }

      p {
        color: var(--black);
        margin-top: 5px;
        margin-bottom: 0;
      }

      .jfj-rolex-secondary-cta-btn {
        margin-top: 5px;
      }
    }

    &.push-3 {
      .rolex-push-content {
        h5 {
          font-size: 12px;
        }

        h4 {
          font-size: 18px;
        }
      }
    }
  }

  @media(min-width: 768px) {
    .rolex-push-row {
      grid-auto-rows: 1fr;

      .rolex-push-content {
        padding-right: 40px;
      }

      &.push-2 {
        grid-template-columns: repeat(2, 1fr);
      }

      &.push-1.push-single-half {
        grid-template-columns: repeat(2, 1fr);
      }

      &.push-3 {
        grid-template-columns: repeat(3, 1fr);

        .rolex-push-content {
          padding-right: 20px;
        }
      }
    }
  }

  @media(min-width: 1025px) {
    h3.rolex-push-heading {
      font-size: 36px;
    }

    .rolex-push-row {
      .rolex-push-content {
        h4 {
          font-size: 36px;
        }

        p {
          font-size: 20px;
        }
      }

      &.push-3 {
        h5 {
          font-size: var(--base-font-size);
        }

        h4 {
          font-size: 24px;
        }
      }
    }
  }
}

/* jfj-rolex-grid.liquid */
.rolex.jfj-rolex-grid-container {
  .jfj-rolex-margin {
    >a {
      display: flex;
      justify-content: center;
    }
  }

  h3 {
    color: var(--brown);
    font-family: var(--primary-font-family);
    font-weight: var(--font-weight-bold);
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: 20px;
  }

  .rolex-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--grid-gap);

    .rolex-grid-column {
      margin-bottom: 30px;

      a:focus-visible {
        outline-color: var(--green) !important;
      }

      h5 {
        color: var(--brown);
        font-family: var(--primary-font-family);
        font-size: 12px;
        font-weight: var(--font-weight-bold);
        line-height: var(--base-line-height);
        margin-bottom: 0;
      }

      h4 {
        color: var(--brown);
        font-family: var(--primary-font-family);
        font-size: 18px;
        font-weight: var(--font-weight-bold);
        line-height: 1.2;
      }
    }
  }

  @media(min-width: 768px) {
    h3 {
      font-size: 36px;
    }

    .rolex-grid {
      grid-template-columns: repeat(3, 1fr);

      .rolex-grid-column {
        margin-bottom: 40px;

        h5 {
          font-size: var(--base-font-size);
        }

        h4 {
          font-size: 24px;
        }
      }
    }
  }
}

/* jfj-rolex-introduction.liquid */
.rolex.jfj-rolex-introduction-container {
  button {
    height: 24px;
  }

  a:focus-visible, button:focus-visible {
    outline-color: var(--green) !important;
  }

  h1,
  h3 {
    color: var(--brown);
    font-family: var(--primary-font-family);
    font-size: 30px;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    margin-bottom: 20px;
  }

  p {
    color: var(--black);
    font-family: var(--primary-font-family);
    font-size: 18px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  h5 {
    color: var(--brown);
    font-family: var(--primary-font-family);
    font-size: var(--base-font-size);
    font-weight: var(--font-weight-bold);
    line-height: var(--base-line-height);
    margin: 0;
  }

  .jfj-rolex-secondary-cta-btn {
    margin-top: 20px;
  }

  @media(min-width: 1025px) {

    h1,
    h3 {
      font-size: 50px;
      margin-bottom: 0;
    }

    p {
      font-size: 20px;
    }

    >div {
      display: grid;
      grid-template-columns: repeat(var(--grid-col-num), 1fr);
      gap: var(--grid-gap);

      .heading-wrapper {
        grid-column: 1 / 6;
      }

      .body-wrapper {
        grid-column: 7 / 12;
      }
    }
  }
}

/* jfj-rolex-body-text.liquid */
.rolex.jfj-rolex-body-text-container {
  picture {
    display: flex;
    justify-content: center;
  }

  h3 {
    color: var(--brown);
    margin-bottom: 20px;
  }

  p {
    color: var(--black);
    margin-bottom: 30px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .jfj-rolex-primary-btn {
    margin-top: 30px;
  }

  .jfj-rolex-margin>div {
    row-gap: 60px;

    &.reverse {
      display: grid;
      grid-auto-rows: auto;

      picture {
        grid-row: 2;
      }
    }
  }

  @media(min-width: 768px) {
    .jfj-rolex-margin div {
      >div {
        row-gap: 90px;
      }

      grid-column: 1 / 13;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      column-gap: var(--grid-gap);
      row-gap: 60px;

      div {
        display: block;
      }

      /* Text block: 6 cols centered (matches official Rolex new-watches-2026 mockups). */
      >div:not(picture) {
        grid-column: 4 / 10;
      }

      &.s picture {
        grid-column: 4 / 10;
      }

      &.m picture {
        grid-column: 2 / 12;
      }

      &.l picture {
        grid-column: 1 / 13;
      }

      &.xl picture {
        grid-column: 1 / 13;
        margin: 0 calc(-1 * var(--outer-margin));
        max-width: none;
        width: calc(100% + 2 * var(--outer-margin));
      }
    }
  }
}

/* Two-image variant of body-text (used by jfj-rolex-flex-section.liquid two_image_text layout) */
.rolex.jfj-rolex-flex-two-image {
  .jfj-rolex-margin div .two-image-grid,
  .jfj-rolex-margin .two-image-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--grid-gap);

    picture, img {
      width: 100%;
      height: auto;
      display: block;
      grid-column: auto;
      grid-row: auto;
    }
  }

  /* When wrapper has .reverse, push the .two-image-grid to row 2 (below text) */
  .jfj-rolex-margin > div.reverse > .two-image-grid {
    grid-row: 2;
  }

  @media (min-width: 768px) {
    .jfj-rolex-margin div .two-image-grid,
    .jfj-rolex-margin .two-image-grid {
      grid-column: 2 / 12;
      grid-template-columns: 1fr 1fr;
    }

    .jfj-rolex-margin div.l .two-image-grid picture,
    .jfj-rolex-margin div.m .two-image-grid picture,
    .jfj-rolex-margin div.s .two-image-grid picture,
    .jfj-rolex-margin div.xl .two-image-grid picture {
      grid-column: auto;
      grid-row: auto;
    }
  }
}

.rolex.jfj-rolex-collection-feature {
  overflow-x: clip;

  picture { display: block; line-height: 0; }
  img { display: block; }

  .jfj-rolex-quote {
    h3 {
      font-size: 30px;
      color: var(--black);
      font-family: var(--quote-font-family);
      font-weight: var(--quote-font-weight);
      line-height: 1.3;
      margin-bottom: 0;
    }

    @media (min-width: 1024px) {
      h3 { font-size: 32px; }
    }

    @media (min-width: 1440px) {
      h3 { font-size: 40px; }
    }

    @media (min-width: 1920px) {
      h3 { font-size: 50px; }
    }

    p {
      color: var(--black);
      margin: 20px 0 0;
    }
  }

  .jfj-rolex-video-container {
    margin-bottom: 60px;
  }

  .jfj-rolex-margin>div {
    display: grid;
    row-gap: 30px;

    .headline-50 {
      margin-bottom: 15px;
    }

    &.reverse {
      display: grid;
      grid-auto-rows: auto;

      picture {
        grid-row: 2;
      }
    }
  }

  p {
    color: var(--black);
    margin-bottom: 30px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  @media(min-width: 768px) {
    .jfj-rolex-margin div {
      grid-column: 1 / 13;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: var(--grid-gap);
      row-gap: 60px;

      div {
        display: block;
      }

      /* Text block: 6 cols centered (matches official Rolex mockups). */
      >div:not(picture) {
        grid-column: 4 / 10;
      }

      &.s picture {
        grid-column: 4 / 10;
      }

      &.m picture {
        grid-column: 2 / 12;
      }

      &.l picture {
        grid-column: 1 / 13;
      }

      &.xl picture {
        grid-column: 1 / 13;
        width: 100vw;
        max-width: none;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
      }
    }
  }

  .jfj-rolex-margin.video-container > .video-container__video,
  .jfj-rolex-margin.video-container > .video-container__cover,
  .jfj-rolex-margin.video-container > .overlay-text {
    display: block;
    grid-column: auto;
    grid-template-columns: none;
    gap: 0;
    row-gap: 0;
  }

  .jfj-rolex-margin.video-container > .overlay-text {
    display: flex;
  }

  .video-container__video > .jfj-rolex-video-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media (min-width: 768px) {
    .jfj-rolex-margin.video-container > .video-container__video,
    .jfj-rolex-margin.video-container > .video-container__cover,
    .jfj-rolex-margin.video-container > .overlay-text {
      display: block;
      grid-column: auto;
      grid-template-columns: none;
      gap: 0;
      row-gap: 0;
    }

    .jfj-rolex-margin.video-container > .overlay-text {
      display: flex;
    }
  }
}

/* jfj-rolex-article-intro.liquid */
.rolex.jfj-rolex-article-intro-container {
  padding-right: 0;
  padding-left: 0;

  h1 {
    color: var(--brown);
    margin-bottom: 20px;
  }

  h4 {
    color: var(--black);
    margin-bottom: 20px;
  }

  p {
    color: var(--black);
    margin-bottom: 0;
  }

  .jfj-rolex-margin.jfj-rolex-grid div {
    grid-column: 1 / 7;
  }

  @media(min-width: 768px) {
    .jfj-rolex-margin.jfj-rolex-grid div {
      grid-column: 2 / 12;
    }
  }

  @media(min-width: 1025px) {
    .jfj-rolex-margin.jfj-rolex-grid div {
      grid-column: 4 / 10;
    }
  }
}

/* jfj-rolex-quote.liquid */
.rolex.jfj-rolex-quote-container {
  padding-right: 0;
  padding-left: 0;

  h3 {
    font-size: 30px;
    color: var(--black);
    font-family: var(--quote-font-family);
    font-weight: var(--quote-font-weight);
    line-height: 1.3;
    margin-bottom: 0;
  }

  @media (min-width: 1024px) {
    h3 { font-size: 32px; }
  }

  @media (min-width: 1440px) {
    h3 { font-size: 40px; }
  }

  @media (min-width: 1920px) {
    h3 { font-size: 50px; }
  }

  p {
    color: var(--black);
    margin: 20px 0 0;
  }

  @media(min-width: 768px) {
    .jfj-rolex-margin {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: var(--grid-gap);

      .jfj-rolex-quote {
        grid-column: 3 / 11;
      }
    }
  }

  @media(min-width: 1025px) {
    h3 {
      font-size: 50px;
    }

    p {
      font-size: 20px;
    }

    .jfj-rolex-margin .jfj-rolex-quote {
      grid-column: 4 / 10;
    }
  }
}

/* jfj-rolex-image.liquid */
.rolex.jfj-rolex-image-container {
  div {
    margin: 0 var(--outer-margin);

    &.xl {
      margin: 0;
    }
  }

  picture {
    display: flex;
    justify-content: center;
  }

  img {
    width: 100%;
    height: auto;
    display: block;
  }

  @media(min-width: 768px) {
    div {
      display: grid;
      gap: var(--grid-gap);
      grid-template-columns: repeat(12, 1fr);

      &.s picture {
        grid-column: 4 / 10;
      }

      &.m picture {
        grid-column: 2 / 12;
      }

      &.l picture {
        grid-column: 1 / 13;
      }

      &.xl {
        display: block;
      }
    }
  }
}

/* jfj-rolex-video.liquid */
.jfj-rolex-video-container {
  .video-container__play {
    color: var(--brown);
  }
}

/* jfj-rolex-collection-grid.liquid */
.rolex.jfj-rolex-grid-container.jfj-rolex-collection-grid {
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;

  .collection-heading {
    color: var(--brown);
    margin-bottom: 40px;
    text-align: center;

    h3 {
      margin-bottom: 0;
    }
  }

  h5 {
    color: var(--brown);
    font-size: 12px;
    font-family: var(--primary-font-family);
    font-weight: var(--font-weight-bold);
    line-height: var(--base-line-height);
    margin-bottom: 0;
  }

  h4 {
    color: var(--brown);
    font-size: 18px;
    font-family: var(--primary-font-family);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    margin-bottom: 5px;
  }

  p {
    color: var(--brown);
    font-size: 12px;
    font-family: var(--primary-font-family);
    font-weight: 300;
    line-height: var(--base-line-height);
  }

  .jfj-rolex-margin {
    align-items: center;
    display: flex;
    flex-direction: column;

    button {
      margin-top: 30px;
    }
  }

  .collection-grid-items {
    grid-template-columns: repeat(var(--grid-col-num), 1fr);

    >div {
      grid-column: 1 / 7;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--grid-gap);
    }
  }

  .collection-grid-items.jfj-rolex-grid.center {
    >div {
      grid-template-columns: repeat(1, 1fr);
    }
  }

  .collection-grid-item {
    background-color: var(--beige);

    a:focus-visible {
      outline-color: var(--green) !important;
    }

    img {
      width: auto;
    }

    &.hidden {
      display: none;
    }

    .item-details {
      padding: 0 20px 30px;

      p {
        color: var(--black);
        margin-bottom: 0;
      }

      p.price {
        margin-top: 6px;
        font-weight: 500;
      }
    }

    &.accessory-grid-item {
      a {
        padding-top: 0;
      }
      img {
        padding: 0 40px;
      }
      .item-details {
        padding-bottom: 30px;
      }
      h5 {
        font-size: 18px;
      }
      p {
        padding-top: 5px;
      }
    }
  }

  @media screen and (min-width: 768px) {
    .collection-heading {
      margin-bottom: 50px;
    }

    .collection-grid-items {
      >div {
        grid-column: 1 / 13;
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .collection-grid-items.jfj-rolex-grid.center {
      >div {
        grid-column: 5 / 9;
      }
    }

    .collection-grid-item {
      a {
        padding-top: 5%;
        display: flex;
        flex-direction: column;
      }

      .item-details {
        padding: 0 20px 50px;
      }
    }
  }

  @media(min-width: 1025px) {
    padding-bottom: 90px;

    .jfj-rolex-margin button {
      margin-top: 40px;
    }

    h3 {
      margin-bottom: 50px;
    }

    h4 {
      font-size: 24px;
    }

    h5 {
      font-size: 16px;
    }

    p {
      font-size: 16px;
    }

    >a {
      margin-top: 40px;
    }

    .collection-grid-items {
      >div {
        grid-column: 2 / 12;
      }
    }

    .collection-grid-item.accessory-grid-item h5 {
      font-size: 24px;
    }
  }
}

/* jfj-rolex-availability.liquid */
.rolex.jfj-rolex-availability {
  background-color: var(--light-beige);

  .jfj-rolex-grid.jfj-rolex-margin {
    background-color: var(--beige);

    div {
      grid-column: 1 / 7;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 60px 20px;

      svg {
        height: 60px;
        width: 60px;
      }

      h3 {
        color: var(--brown);
        margin-top: 40px;
        margin-bottom: 20px;
        font-size: 30px;
        line-height: 1.2;
        font-family: var(--primary-font-family);
        font-weight: var(--font-weight-bold);
      }

      p {
        font-size: 18px;
        color: var(--dark-grey);
        text-align: center;
      }
    }
  }

  @media(min-width: 768px) {
    .jfj-rolex-grid.jfj-rolex-margin div {
      grid-column: 3 / 11;
    }

    h3 {
      margin-top: 60px;
      font-size: 50px;
    }

    p {
      font-size: 24px;
    }
  }

  @media(min-width: 1025px) {
    .jfj-rolex-grid.jfj-rolex-margin div {
      grid-column: 4 / 10;
    }
  }
}

/* jfj-rolex-carousel.liquid */
.rolex.jfj-rolex-carousel {
  padding: 60px 0;
  background-color: var(--white);
  position: relative;

  @media(min-width: 1025px) {
    padding: 90px 0;
  }

  h4 {
    color: var(--brown);
    font-family: var(--primary-font-family);
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    margin-bottom: 20px;
  }

  h5 {
    color: var(--brown);
    font-family: var(--primary-font-family);
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    line-height: var(--base-line-height);
    margin-bottom: 0;
    margin-top: 10px;
  }

  a:focus-visible {
    outline-color: var(--green) !important;
  }

  .exploring.active h5 {
    color: var(--green);
  }

  .owl-nav {
    display: none;

    button {
      height: 44px;
      width: 44px;
      background-color: #d4d4d430;
      border-radius: 100%;

      &:hover {
        background-color: #76767630;
      }
    }

    .owl-prev {
      margin-left: -60px;
      margin-top: -45px;

      span {
        content: url('data:image/svg+xml, <svg height="15" width="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" alt="" ><path d="M11.7,7.5l-1.4,1.4l-5.7,5.7l-1.4-1.4l5.7-5.7L3.3,1.9l1.4-1.4l5.7,5.7l0,0L11.7,7.5z"></path></svg>');
        transform: rotate(180deg);
      }

      &:focus-visible {
        outline-color: var(--green) !important;
      }
    }

    .owl-next {
      margin-right: -60px;
      margin-top: -45px;

      span {
        content: url('data:image/svg+xml, <svg height="15" width="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" alt="" ><path d="M11.7,7.5l-1.4,1.4l-5.7,5.7l-1.4-1.4l5.7-5.7L3.3,1.9l1.4-1.4l5.7,5.7l0,0L11.7,7.5z"></path></svg>');
      }

      &:focus-visible {
        outline-color: var(--green) !important;
      }
    }
  }

  .owl-dots {
    display: flex !important;
    justify-content: center;
    margin-top: 40px;

    .owl-dot {
      min-width: 25px;
      height: 24px;
      border: none;
      cursor: pointer;
      position: relative;
      padding: 0;

      span {
        background-color: var(--grey);
        height: 3px;
        width: 25px;
      }

      &:focus-visible {
        outline-color: var(--green) !important;
      }
    }

    .owl-dot:hover span {
      background-color: var(--green);
    }

    .owl-dot.active {
      span {
        background-color: var(--green);
        width: 56px;
      }
    }
  }

  @media screen and (min-width: 768px) {
    padding: 90px 0;

    .owl-nav {
      display: block;
    }

    .owl-dots {
      bottom: 90px;
    }

    h4 {
      font-size: 36px;
    }

    h5 {
      font-size: 20px;
    }
  }

  @media(min-width: 1025px) {
    .owl-nav {
      .owl-prev {
        margin-left: -75px;
      }

      .owl-next {
        margin-right: -75px;
      }
    }
  }

  @media(min-width: 1500px) {
    .owl-nav {
      .owl-prev {
        margin-left: -90px;
      }

      .owl-next {
        margin-right: -90px;
      }
    }
  }
}

/* jfj-rolex-model-cover.liquid */
.rolex.jfj-rolex-model-cover {
  background-color: var(--light-beige);

  picture.desktop-image {
    display: none;
  }

  .gallery-container {
    grid-column: 1 / 7;
    margin-top: 30px;
  }

  .carousel {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

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

  .carousel img {
    width: 100%;
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  .dashes {
    display: flex;
    justify-content: center;
    z-index: 3;
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 40px;

    @media(min-width: 768px) {
      margin-top: 0;
    }
  }

  .dash {
    width: 20px;
    height: 4px;
    background-color: var(--grey);
    border: none;
    cursor: pointer;
    position: relative;
    padding: 0;
  }

  .dash:hover {
    background-color: var(--green);
  }

  .dash.active {
    width: 50px;
    background-color: var(--green);
  }

  @media (min-width: 768px) {
    picture.desktop-image {
      display: flex;
    }

    .carousel {
      display: none;
    }

    >div {
      padding-top: 50px;
    }

    .desktop-gallery {
      padding-top: 0;
      padding-bottom: 90px;
    }

    .main-image img {
      max-width: 100%;
      cursor: pointer;
    }

    .thumbnails {
      display: flex;
      justify-content: center;
      gap: var(--grid-gap);
      grid-column: 1 / 13;
      grid-row: 1;
    }

    .thumbnails img {
      cursor: pointer;
      width: calc((100% - 3 * var(--grid-gap)) / 4);
    }

    .thumbnails img:hover {
      border-color: #0073e6;
    }
  }

  .lightbox {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9999;

    .close-btn {
      position: absolute;
      top: 15px;
      right: 25px;
      font-size: 2.5rem;
      color: white;
      cursor: pointer;
      z-index: 1001;
    }

    img {
      max-height: 70vh;
      max-width: 90vw;
    }

    .nav {
      display: flex;
      justify-content: space-between;
      width: 100%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .arrow {
    font-size: 2em;
    color: white;
    cursor: pointer;
    padding: 20px;
  }

  .lightbox .dashes {
    position: absolute;
    bottom: 20px;
  }

  picture {
    grid-column: 1 / 7;
  }

  .model-details {
    grid-column: 1 / 7;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;

    .body-wrapper {
      position: relative;

      .disclaimer {
        position: absolute;
        display: none;
        opacity: 0;
        background-color: var(--white);
        padding: 20px;
        top: 30px;
        left: 0;
        width: 300px;
        filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 10px 10px);
        font-size: 16px;
        font-family: var(--primary-font-family);
        font-weight: var(--primary-font-weight);
        line-height: 1.1;
      }

      &:has(.disclaimer-btn:focus) {
        .disclaimer {
          opacity: 1;
          display: block;
        }
      }

      p {
        display: inline;
      }

      button.disclaimer-btn {
        display: inline;
        background: transparent;
        border: none;
        padding: 0;
        margin-left: 10px;
        margin-bottom: 7px;
        height: 24px;
        width: 24px;

        &:focus-visible {
          outline-color: var(--green) !important;
        }

        svg {
          fill: black;
          height: 15px;
          width: 15px;
        }
      }
    }

    .link-wrapper {
      display: flex;
      flex-direction: row;
      padding: 30px 0;
      justify-content: center;
      gap: 25px;

      a:focus-visible, button:focus-visible {
        outline-color: var(--green) !important;
      }

      button {
        .icon-wrapper {
          background-color: var(--white);
        }
      }
    }
  }

  h1 {
    font-size: 30px;
    line-height: 1.2;
    font-family: var(--primary-font-family);
    font-weight: var(--font-weight-bold);
    color: var(--brown);
    margin-bottom: 10px;
  }

  h4 {
    font-size: 18px;
    line-height: 1.2;
    font-family: var(--primary-font-family);
    font-weight: var(--font-weight-bold);
    color: var(--brown);
    margin-bottom: 10px;
  }

  p {
    font-size: 18px;
    line-height: 1.6;
    color: var(--brown);
    font-family: var(--primary-font-family);
    margin-bottom: 0;
  }

  a {
    margin-top: 10px;
  }

  @media screen and (min-width: 768px) {
    picture {
      grid-column: 4 / 10;
      grid-row: 1;
    }

    .model-details {
      grid-column: 1/5;
      grid-row: 1;

      .link-wrapper {
        flex-direction: column;
        padding: 30px 0;
        gap: 10px;
      }
    }
  }

  @media screen and (min-width: 1025px) {

    picture {
      grid-column: 4/10;
    }

    .model-details {
      grid-column: 1/5;
      grid-row: 1;
    }

    h1 {
      font-size: 50px;
    }

    h4 {
      font-size: 24px;
    }

    p {
      font-size: 20px;
    }
  }

  &.jfj-rolex-accessory-cover {
    picture.desktop-image {
      display: block;
    }

    h2 {
      font-size: 30px;
      line-height: 1.2;
      font-family: var(--primary-font-family);
      font-weight: var(--font-weight-bold);
      color: var(--brown);
      margin-bottom: 10px;
    }
  }

  @media screen and (min-width: 768px) {
    &.jfj-rolex-accessory-cover {
      .link-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
      }
    }
  }
}

/* jfj-rolex-model-specs.liquid */
.rolex.jfj-rolex-model-specs {
  background: var(--light-beige);

  .jfj-rolex-grid {
    background: var(--beige);
    margin: 0;
    grid-row: auto;
  }

  .model-specs-wrapper {
    grid-column: 1 / 7;
    margin: 0 var(--outer-margin);
    padding: 7vh 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;

    .model-spec {
      grid-column: span 1;
      margin-bottom: 20px;
    }
  }

  .download-wrapper {
    grid-column: 1 / 7;
    border-top: 1px solid rgba(69, 44, 30, .2);
    margin: 0 var(--outer-margin);
    padding: 30px 0 60px 0;

    a {
      display: flex;
      width: fit-content;
      align-items: center;
      justify-content: center;
      color: var(--white);

      &:focus-visible {
        outline-color: var(--green) !important;
        outline-offset: 2px;
      }

      svg.download-icon {
        fill: var(--white);
        height: 12px;
        width: 12px;
        margin-right: 6px;
      }
    }
  }

  p {
    font-size: 18px;
    line-height: 1.6;
    color: var(--brown);
    font-family: var(--primary-font-family);
    margin-bottom: 0;

    &.bold {
      font-weight: var(--font-weight-bold);
    }
  }

  @media screen and (min-width: 768px) {
    .jfj-rolex-grid {
      margin: 0 var(--outer-margin);
    }

    .model-specs-wrapper {
      grid-column: 2 / 11;
      padding: 8vh 0;
      margin: 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      column-gap: 40px;

      .model-spec {
        grid-column: span 1;
        margin-bottom: 20px;
      }
    }

    .download-wrapper {
      grid-column: 1 / 13;
      padding: 40px 0 60px 0;
    }
  }

  @media screen and (min-width: 1025px) {
    .model-specs-wrapper {
      grid-column: 2 / 10;
      grid-row: 1;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      column-gap: 40px;

      .model-spec {
        grid-column: span 1;
        margin-bottom: 20px;
      }
    }

    p {
      font-size: 20px;
    }
  }
}

.rolex.jfj-rolex-static-map {
  padding-top: 30px;
  padding-bottom: 60px;

  .jfj-rolex-bg-white {
    display: flex;
    flex-direction: column-reverse;
  }

  ul.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;

    li.chip {
      list-style: none;
      font-family: var(--primary-font-family);
      font-size: 12px;
      font-weight: var(--font-weight-bold);
      line-height: 1;
      letter-spacing: 0.02em;
      background: var(--light-beige);
      padding: 6px 10px;
      border-radius: 2px;
    }

    li.chip::marker {
      content: "";
    }

    li.chip-retailer {
      color: var(--green);
    }

    li.chip-cpo {
      color: var(--black);
    }

    li.chip-service {
      color: #ba9f62;
    }
  }

  .store-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 40px 10%;

    a:focus-visible, button:focus-visible {
      outline-color: var(--green) !important;
    }

    .address {
      padding-bottom: 20px;

      p {
        margin-bottom: 0;
      }
    }
  }

  .map-placeholder {
    background-position: center;
    min-height: 300px;
  }

  .link-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    padding: 20px 16px 30px;
    margin: 0 -16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    a {
      display: flex;
      align-items: center;
      flex: 0 0 auto;
      scroll-snap-align: start;
      margin-top: 0;
    }

    button.jfj-rolex-tertiary-cta {
      background: var(--light-beige);
      border-radius: 22px;
      padding: 0 16px 0 6px;
      height: 44px;
      gap: 8px;

      .icon-wrapper {
        height: 32px;
        width: 32px;
        background: var(--white);
      }
    }

    span {
      margin-left: 0;
      display: inline-block;
      white-space: nowrap;
    }
  }

  h3 {
    color: var(--brown);
    font-size: 22px;
    line-height: 1.2;
    font-family: var(--primary-font-family);
    font-weight: var(--font-weight-bold);
    margin-bottom: 20px;
  }

  h4 {
    color: var(--brown);
    font-family: var(--primary-font-family);
    font-size: 12px;
    line-height: var(--base-line-height);
    font-weight: var(--font-weight-bold);
    margin-bottom: 0;
  }

  .store-address {
    color: var(--black);
    font-family: var(--primary-font-family);
    font-size: 16px;
    line-height: var(--base-line-height);
    font-weight: var(--font-weight-bold);
  }

  .hours-dropdown {
    position: relative;
    top: 0;

    .toggle {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .todays-hours {
        font-size: 16px;
        color: var(--green);
        font-family: var(--primary-font-family);
        line-height: var(--base-line-height);

        span {
          color: var(--black);
          font-weight: var(--font-weight-bold);
        }
      }

      .caret {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid var(--green);
        transition: 0.3s;
      }

      .caret-rotate {
        transform: rotate(180deg);
      }
    }

    ul.hours {
      background: var(--beige);
      position: absolute;
      top: 30px;
      left: 50%;
      width: 100%;
      transform: translateX(-50%);
      opacity: 0;
      display: none;
      transition: 0.2s;
      z-index: 1;
      padding: 40px 50px;
      margin: 0;

      li {
        list-style: none;
        padding-bottom: var(--base-font-size);

        &:last-child {
          padding-bottom: 0;
        }
      }

      &.hours-open {
        display: block;
        opacity: 1;
        filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 10px 10px);
      }
    }
  }

  @media screen and (min-width: 768px) {
    padding-bottom: 90px;

    h3 {
      font-size: 30px;
    }

    h4 {
      font-size: var(--base-font-size);
    }

    .jfj-rolex-bg-white {
      flex-direction: row;
      height: 700px;
    }

    .map-placeholder {
      width: 50%;
    }

    .link-wrapper {
      flex-direction: column;
      flex-wrap: nowrap;
      gap: 10px;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 20px 0 0;
      margin: 0;
      overflow-x: visible;
      scroll-snap-type: none;

      button.jfj-rolex-tertiary-cta {
        background: transparent;
        border-radius: 0;
        padding: 0;
        height: auto;
        gap: 0;

        .icon-wrapper {
          height: 36px;
          width: 36px;
          background: var(--light-beige);
        }
      }

      span {
        display: inline-block;
        margin-left: 8px;
      }
    }

    .store-details {
      min-width: 410px;
    }
  }

  &.jfj-rolex-cpo-map {
    @media screen and (min-width: 768px) {
      .map-placeholder {
        width: 70%;
      }
      .store-details {
        /* min-width: auto; */
        margin: 4% 5% 0;
      }
    }
  }
}

.rolex.jfj-rolex-contact-form {

  .jfj-rolex-grid:has(#step3.active) {
    gap: 0;
  }

  >div {
    padding: 60px 0 0;

    &.jfj-rolex-margin {
      position: relative;

      &.jfj-rolex-bg-white {
        textarea {
          background: var(--light-beige);
        }
      }
    }
  }

  span.error {
    display: none;
    color: #BE0100;
    font-size: 16px;
    font-family: var(--primary-font-family);
    font-weight: var(--font-weight-bold);

    &#acceptTermsError,
    &#communicationConsentError {
      font-size: 14px;
    }
  }

  .heading-wrapper {
    text-align: center;
    grid-column: 1/7;
    grid-row: 1;

    .section-heading {
      font-size: 20px;
      margin-bottom: 0;
      color: var(--brown);
      font-family: var(--primary-font-family);
      font-weight: var(--font-weight-bold);
      line-height: 1.2;
    }

    h2 {
      margin-bottom: 30px;
      color: var(--brown);
    }
  }

  .body-wrapper {
    grid-row: 2;
    grid-column: 1/7;

    p.body-20 {
      text-align: center;
      margin-bottom: 40px;
      color: var(--black);
    }
  }

  #contactForm {
    margin-bottom: 60px;

    button#previousButton {
      height: 24px;
    }

    textarea:focus-visible, select:focus-visible, input:focus-visible, button:focus-visible {
      outline-color: var(--green) !important;
    }

    .jfj-rolex-primary-btn {
      margin-top: 30px;
      border: none;
      display: flex;
      align-items: center;
      background-color: var(--green);
      border: none;
      border-radius: 30px;
      font-family: var(--primary-font-family);
      font-size: 14px;
      font-weight: var(--font-weight-bold);
      height: 44px;
      padding: 0 30px;
      color: var(--white);

      &:focus-visible {
        outline-color: var(--green) !important;
        outline-offset: 2px !important;
      }

      span {
        color: var(--white);
        font-family: var(--primary-font-family);
        font-size: 14px;
        font-weight: var(--font-weight-bold);
        letter-spacing: normal;
        margin-right: 6px;
      }

      svg.arrow-icon {
        fill: var(--white);
        height: 12px;
        width: 12px;
      }

      &:hover {
        background-color: var(--rolex-green);

        span {
          color: var(--ocean-green);
        }

        svg.arrow-icon {
          fill: var(--ocean-green);
        }
      }
    }

    .form-step {
      display: none;
      padding: 0 25px;
    }

    .form-step.active {
      display: flex;
      flex-direction: column;
      align-items: center;

      #previousButton {
        position: absolute;
        top: 10px;
        left: 10px;
        color: var(--brown);
        font-family: var(--primary-font-family);
        font-weight: var(--font-weight-bold);
      }

      input,
      textarea {
        border: none;
        font-family: var(--primary-font-family);
        font-weight: var(--font-weight-bold);
      }

      .rolex-row {
        display: flex;
        width: 100%;
        gap: var(--grid-gap);

        p.label {
          color: #452c1e50;
          margin-bottom: 0;
        }

        .legend-light {
          font-size: 14px;
          color: var(--brown);
        }

        .field {
          display: flex;
          flex-direction: column;

          label {
            color: #452c1e50;
            font-weight: var(--font-weight-bold);
          }
        }
      }
    }

    #step1 {
      label {
        display: none;
      }

      textarea {
        padding: 30px;
        width: 100%;

      }
    }

    #step2.active {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      gap: 16px;

      .field {
        width: 100%;
        gap: 10px;

        label {
          a {
            color: var(--green);
          }
        }

        &.title {
          width: 25%;
          margin: 0;
        }
      }

      input,
      select {
        background: var(--light-beige);
        border: none;
        border-bottom: 1px solid #452c1e40;
        border-radius: 0;
        padding-top: 0;
        font-size: min(max(4vw, 18px), 20px);
        font-family: var(--primary-font-family);
        line-height: 1.2;
        padding-bottom: 16px;
        padding-left: 0;
        font-weight: var(--font-weight-bold);
      }

      .rolex-row:first-of-type {
        flex-wrap: wrap;

        .field.firstName {
          width: 73%;
        }
      }
    }

    #step3 {
      text-align: center;
    }
  }

  /* Custom checkbox button styling */
  input[type="checkbox"] {
    /* display: none; */
     position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
  }

  /* Outline on the checkbox itself */
  form#contactForm .form-step.active#step2 .rolex-row #acceptTerms:focus-visible,
    form#contactForm .form-step.active#step2 .rolex-row #communicationConsent:focus-visible {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
  }

  /* Outline the label when the checkbox has focus */
  form#contactForm .form-step.active#step2 .rolex-row .field:has(#acceptTerms:focus-visible) label::before,
  form#contactForm .form-step.active#step2 .rolex-row .field:has(#communicationConsent:focus-visible) label::before {
    outline: 2px solid var(--green);
    outline-offset: 2px;
  }

  input[type="checkbox"]+label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    color: var(--brown) !important;
  }

  input[type="checkbox"]+label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 1px solid var(--black);
    border-radius: 50%;
    background: white;
  }

  input[type="checkbox"]:checked+label::before {
    background: var(--green);
    border-color: var(--green);
  }

  input[type="checkbox"]:checked+label::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: var(--green);
    border-radius: 50%;
  }

  #doneButton {
    width: auto;
    margin: 0 auto;

    a {
      color: var(--white);
    }
  }

  #ty-image {
    display: none;
    grid-row: 3;
    grid-column: 1 / 13;
    background-color: var(--light-beige);
  }

  &.contact-form-model .jfj-rolex-section-heading-container {
    row-gap: 0;

    .form-accordion-header {
      grid-row: 1;
      grid-column: 1 / 7;
      text-align: left;
      background-color: var(--light-beige);
      border: none;
      padding: 0;
      letter-spacing: normal;

      &:focus-visible {
        outline-color: var(--green) !important;
      }

      .body-20-b {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      svg {
        height: 12px;
        width: 12px;
      }

      .more {
        display: block;
      }

      .less {
        display: none;
      }
    }

    .form-accordion-header.active {
      .more {
        display: none;
      }

      .less {
        display: block;
      }
    }

    div.l {
      background-color: var(--white);
      grid-column: 1 / 7;
      grid-row: 2;
      display: none;
    }
  }

  &.contact-form-model .contact-section-wrapper {
    display: none;
  }

  @media screen and (min-width: 768px) {
    &.contact-form-model .jfj-rolex-section-heading-container {
      .form-accordion-header {
        grid-row: 1;
        grid-column: 1 / 13;
      }

      div.l {
        background-color: var(--white);
        grid-column: 1 / 13;
        grid-row: 2;
      }
    }

    >div {
      padding: 90px 0 0;

      &.contact-form-model {
        padding: 60px 0 0;
      }
    }

    .jfj-rolex-primary-btn {
      margin-top: 40px;
    }

    .heading-wrapper,
    .body-wrapper {
      grid-column: 2 / 12;

      .section-heading {
        font-size: 24px;
      }
    }

    #contactForm {
      margin-bottom: 50px;

      .form-step {
        padding: 0;
      }

      #step1 {
        label {
          display: none;
        }

        textarea {
          padding: 40px;
        }
      }

      #step2 {
        margin-top: 50px;

        &.active .rolex-row:first-of-type {
          flex-wrap: nowrap;

          .field.firstName {
            width: 35%;
          }
        }
      }
    }
  }

  @media screen and (min-width: 1025px) {

    .heading-wrapper,
    .body-wrapper {
      grid-column: 4 / 10;
    }
  }
}

/* rolex branded slides on home page */
.slideshow.slick-initialized.slick-slider {
  .slick-track {
    .slide.image-overlay.slide-rolex-bespoke.slick-slide {
      .overlay-text {
        .overlay-text__inner .overlay-text__text.overlay-text-rolex-bespoke {
          width: 100%;
          text-align: center;

          .overlay-text__subheading.subheading.subheading--over {
            font-family: "Helvetica Now Text", Helvetica, Arial, sans-serif !important;
            font-weight: bold !important;
            font-size: min(max(2vw, 22px), 26px) !important;
            line-height: 1.2;
          }

          .overlay-text__title.h1-style {
            font-family: "Helvetica Now Text", Helvetica, Arial, sans-serif !important;
            font-weight: bold !important;
            font-size: min(max(4vw, 36px), 70px) !important;
            line-height: 1.2;
            text-transform: none;
          }

          div.overlay-text__button-row {
            margin-top: 0;

            .overlay-text__button.button.altcolour {
              margin-top: 0;
              font-family: "Helvetica Now Text", Helvetica, Arial, sans-serif !important;
              font-weight: bold !important;
              text-transform: none;
              color: #ffffff !important;

              &:hover {
                background-color: #006039 !important;
              }
            }
          }
        }
      }

      .rimage-outer-wrapper.rimage-background.mobile-only.fade-in.lazyloaded {
        padding-bottom: 40px;

        .overlay-text.overlay-text--with-reveal.overlay-text--for-banner.image-overlay__over {
          display: flex;
          align-items: end;
        }
      }
    }

    @media screen and (min-width: 768px) {
      .slide.image-overlay.slide-rolex-bespoke.slick-slide {
        .overlay-text {
          .overlay-text__inner {
            display: flex;
            justify-content: end;

            .overlay-text__text.overlay-text-rolex-bespoke {
              width: 45%;
              text-align: left;
            }
          }
        }
      }
    }
  }
}

.rolex.jfj-rolex-section-heading-container {
  .headline-36 {
    color: var(--brown);
    font-family: var(--primary-font-family);
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--brown);
  }

  .body-20-b {
    padding: 20px 0;
    color: var(--brown);
  }

  @media screen and (min-width: 768px) {
    .headline-36 {
      font-size: 36px;
    }
  }
}

.rolex.jfj-rolex-services {
  .services-heading {
    color: var(--brown);
    font-family: var(--primary-font-family);
    font-weight: var(--font-weight-bold);
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: normal;
    margin: 0 0 30px;
  }

  picture {
    grid-column: 1 / 7;
    grid-row: 2;
  }

  picture img {
    display: block;
    width: 100%;
    height: auto;
  }

  .accordion {
    grid-column: 1 / 7;
    grid-row: 1;
    padding-bottom: 40px;
  }

  .accordion-item {
    border-bottom: 1px solid rgba(69, 44, 30, 0.2);
  }

  .accordion-header {
    align-items: center;
    background-color: transparent;
    border: none;
    color: var(--brown);
    cursor: pointer;
    display: flex;
    font-size: min(max(4vw, 18px), 24px);
    font-family: var(--primary-font-family);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    justify-content: space-between;
    letter-spacing: normal;
    text-align: left;
    padding: 0;
    vertical-align: middle;
    width: 100%;
    height: 60px;

    &:focus-visible {
      outline-color: var(--green) !important;
    }

    svg {
      height: 12px;
      width: 12px;
      flex-shrink: 0;
    }

    .more {
      display: block;
    }

    .less {
      display: none;
    }
  }

  .accordion-header.active {
    .more {
      display: none;
    }

    .less {
      display: block;
    }
  }

  .accordion-content {
    color: var(--black);
    display: none;
    padding-bottom: 20px;

    p {
      line-height: normal;
    }
  }

  @media screen and (min-width: 768px) {
    .services-heading {
      font-size: 40px;
      margin-bottom: 40px;
    }

    picture {
      grid-column: 1 / 13;
      grid-row: 2;
    }

    .accordion {
      grid-column: 1 / 13;
      grid-row: 1;
    }

    .accordion-header {
      height: 80px;
    }

    .accordion-content {
      padding-bottom: 30px;
    }
  }

  @media screen and (min-width: 1025px) {
    .services-heading {
      font-size: 50px;
      margin-bottom: 60px;
    }

    picture {
      grid-column: 1 / 7;
      grid-row: 1;
      align-self: center;
    }

    .accordion {
      grid-column: 8 / 13;
      grid-row: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-bottom: 0;
    }
  }
}

.rolex.model-accordion {
  padding-bottom: 60px;

  picture {
    grid-column: 1 / 7;
    grid-row: 2;
  }

  .accordion {
    grid-column: 1 / 7;
    grid-row: 1;
    padding-bottom: 40px;
  }

  .accordion-item {
    border-bottom: 1px solid rgba(69, 44, 30, 0.2);
  }

  .accordion-header {
    align-items: center;
    background-color: var(--light-beige);
    border: none;
    color: var(--brown);
    cursor: pointer;
    display: flex;
    font-size: min(max(4vw, 18px), 24px);
    font-family: var(--primary-font-family);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    justify-content: space-between;
    letter-spacing: normal;
    text-align: left;
    padding: 0;
    vertical-align: middle;
    width: 100%;
    height: 60px;

    &:focus-visible {
      outline-color: var(--green) !important;
    }

    svg {
      height: 12px;
      width: 12px;
    }

    .more {
      display: block;
    }

    .less {
      display: none;
    }
  }

  .accordion-header.active {
    .more {
      display: none;
    }

    .less {
      display: block;
    }
  }

  .accordion-content {
    color: var(--black);
    display: none;
    padding-bottom: 20px;

    p {
      line-height: normal;
    }
  }

  @media screen and (min-width: 768px) {
    picture {
      grid-column: 1 / 13;
      grid-row: 2;
    }

    .accordion {
      grid-column: 1 / 13;
      grid-row: 1;
    }

    .accordion-header {
      height: 80px;
    }

    .accordion-content {
      padding-bottom: 30px;
    }
  }

  @media screen and (min-width: 1025px) {
    padding-bottom: 90px;

    picture {
      grid-column: 1 / 7;
      grid-row: 1;
    }

    .accordion {
      grid-column: 8 / 13;
      grid-row: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-bottom: 0;
    }
  }
}

.rolex.rolex-cpo-collection-grid {
  margin-top: 0;

  a:focus-visible {
    outline-color: var(--ocean-green) !important;
    outline-offset: 2px !important;
  }

  &.jfj-rolex-bg-light-beige {
    background-color: var(--light-beige);
  }

  h4 {
    text-align: center;
  }

  .product-block .block-inner {
    height: 100%;
    margin: 0;

    .block-inner-inner {
      display: flex;
      flex-direction: column;
      height: 100%;

      .image-cont {
        width: 100%;
      }

      .product-info {
        flex-grow: 2;
      }
    }
  }

  .product-block__subtitle {
    margin-top: 5px;
  }

  .owl-dots {
    margin: 30px 0;
  }

  button.owl-prev, button.owl-next {
    display: none;
  }

  .collection-link {
    display: inline-block;
    text-align: center;
    width: 100%;

    &:focus-visible, button:focus-visible {
      outline-color: var(--green) !important;
      outline-offset: 2px !important;
    }
  }

  .desktop-grid {
    display: none;
  }

  @media screen and (max-width: 679px) {
    .owl-stage {
      .owl-item {
        .block-inner-inner {
          height: 400px;
        }
      }
    }
  }

   @media (min-width: 670px) and (max-width: 1024px) {
    .owl-stage {
      .owl-item {
        .block-inner-inner {
          height: 450px;
        }
      }
    }
  }

  @media screen and (min-width: 1025px) {
    .owl-dots button, .owl-carousel.owl-theme.owl-drag {
      display: none;
    }

    .desktop-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: 1fr;
      margin-bottom: 40px;
    }
  }

  &.collection-grid-product-page .jfj-rolex-margin {
    display: flex;
    gap: var(--grid-gap);
    align-items: stretch;
      
    .product-block .block-inner {
      height: 100%;
      margin: 0;

      .block-inner-inner {
        display: flex;
        flex-direction: column;
        height: 100%;

        .image-cont {
          width: 100%;
        }

        .product-info {
          flex-grow: 2;
        }
      }
    }  

    .product-block.rolex-cpo-product-block {
      display: flex;
      flex-direction: column;
      flex: 1;
      padding-left: 0;
      >div {
        width: 100%;
      }
    }

    .product-block.rolex-cpo-product-block:nth-child(3) {
      display: none;
    }

    @media screen and (min-width: 1025px) {
      grid-template-columns: repeat(3, 1fr);

      .product-block.rolex-cpo-product-block:nth-child(3) {
        display: flex; 
      }
    }
  }
}

.jfj-rolex-product-recommendations {
  .hometitle {
    font-family: Helvetica;
    font-weight: bold;
    font-size: 50px;
    line-height: 1.2;
    margin-bottom: 60px;
    color: var(--brown);
  }

  .collection-listing {
    .product-list {
      justify-content: center;
      gap: 8px;
    }

    .product-block {
      width: 25%;
    }
  }
}

.rolex-cpo-product-block.product-block {
  padding-left: 12px;
  margin-bottom: 12px;

  .product-info {
    padding: 30px 20px 20px !important;
  }

  .block-inner-inner {
    background-color: black;
  }

  .product-block__subtitle {
    margin-top: 5px;
  }

   @media screen and (min-width: 1025px) {
      .product-info {
        padding: 32px !important;
      }
    }
}

.rolex-cpo-product {
  .cpo-product-margin {
    margin-top: 60px;
    margin-bottom: 60px;
    
    @media (max-width: 767px) {
      margin-top: 0;
      margin-bottom: 60px;
      margin-left: 0;
      margin-right: 0;
    }
  }

  @media (min-width: 1025px) {
    .gallery {
      .thumbnails {
        display: flex;
        background-color: var(--light-beige);
        gap: 8px;
        padding-top: 30px;
        padding-inline-end: 0;
        width: 100%;

        .thumbnail {
          margin: 0;
          width: 100%;
        }

        .owl-stage {
          display: grid;
          gap: 8px;
          grid-template-columns: repeat(4, 1fr);
          transform: none !important;
          width: 100% !important;

          .owl-item {
            width: 100% !important;
          }
        }
      }
    }
  }

  .cpo-product-grid {
    @media (max-width: 767px) {
      row-gap: 0;
    }

    @media (max-width: 1024px) {
      .slideshow-controls button {
        top: 50%;
        svg {stroke: white;}

        &:after {
          background: transparent;
        }
      }
    }

    @media (min-width: 1025px) {
      .slideshow-controls { display: none; }
    }
  }

  .detail.product-column-left {
    grid-column: 1 / 7; 
    grid-row: 1; 
    background-color: #000000; 
    display: grid; 
    grid-template-columns: repeat(6, 1fr); 
    grid-gap: 8px;

    @media (max-width: 767px) {
      grid-column: span 6;
      grid-template-columns: auto;
      margin: 0;
      padding: 20px;
      grid-row: 2;
      row-gap: 0;
    }

    .product-form {
      grid-column: 2 / 6; 
      margin-top: auto; 
      margin-bottom: auto;

      @media (max-width: 767px) {
        grid-column: auto;
        padding-top: 50px;
        padding-bottom: 50px;
      }

      @media (max-width: 1024px) {
        padding-top: 60px;
        padding-bottom: 60px;
      }
    }

    .current-price {    
      font-size: 20px;
      color: var(--white);
      
      .prefix {
        font-weight: 200;
      }
    }

    .in-stock-text {
      margin-left: 20px;
      color: var(--green);

      @media (max-width: 1024px) {
        margin-left: 0;
        display: block;
      }
    }

    .quantity-submit-row__submit {
      margin-top: 30px;
      margin-bottom: 40px;

      button {
        width: auto;
        height: 44px;
        padding: 0 30px;
        font-family: Helvetica;
        font-size: 14px;
        font-weight: bold;
        border-radius: 44px;
        color: var(--white) !important;
        background: var(--green) !important;
        border: none !important;
      }
    }

    .detail-links {
      margin: 0;

      li {
        list-style-type: none;
        margin-bottom: 10px;
        
        a {
          color: var(--white);
          padding-left: 8px;
        }

        svg {
          width: 30px;
          height: 30px;
        }
      }
    }

    hr {
      border-bottom: 1px solid rgba(255,255,255,0.3);
    }
  }

  .gallery {
    grid-column: 7 / 13; 
    grid-row: 1;

    @media (max-width: 767px) {
      grid-column: span 6;
      grid-row: 1;

      .thumbnails { display: none; }
    }
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    /* background: #000000; */

    @media (max-width: 1024px) {
       /* display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%; 
      background: #000000; */

      .thumbnails { display: none; }
    }

    @media (max-width: 1360px) {
      background: #000000;
    }

    .main-image {
      position: relative; 

      @media (max-width: 767px) {
        margin-bottom: 0;
      }

      @media (min-width: 769px) {
        .rcpo-product-slideshow {
          .slick-dots {
            display: none !important;
          }
        }
      } 

      .rolex-cpo-viewer {
        position: absolute; 
        bottom: 50px; 
        right: 40px; 
        z-index: 1;

        @media (max-width: 1024px) {
          bottom: 30px;
          right: 20px;
        }

        .develic-spinner-trigger.develic-spinner-trigger-button {
          padding: 10px 20px;
          color: var(--green);
          border: none;
          border-radius: 20px;
        }

        .develic-spinner-trigger.develic-spinner-trigger-button:hover {
          background: var(--green);
          color: var(--white);
        }
      }
    }

    .thumbnail {
      margin-bottom: 0;
      margin-right: 8px;
    }
  }

  h1 {
    color: white;

  }

  .rcpo-full-title .rcpo-subtitle {
    display: block;
    font-size: 20px !important;
    margin-bottom: 0px !important;
    font-weight: 500;
    font-family: Helvetica Now Text, Helvetica, sans-serif;
    color: #fff;

    @media (max-width: 1024px) {
      font-size: 18px !important;
    }

    @media (max-width: 767px) {
      font-size: 16px !important;
    }
  }

  h1.rcpo-full-title .h1 {
    display: block;
    font-size: 50px !important;
    text-transform: none !important;
    font-weight: 700 !important;
    text-align: left;
    font-family: Helvetica, sans-serif;
    color: #fff !important;
    line-height: 1.2;
    margin: 0;
    margin-bottom: 20px;
    letter-spacing: normal !important;

    @media (max-width: 1024px) {
      font-size: 36px !important;
    }

    @media (max-width: 767px) {
      font-size: 32px !important;
    }
  }

  .rolex-cpo-pdp-hero-desc {
    display: block;
    font-size: 20px;
    font-weight: 200;
    font-family: Helvetica Now Text, Helvetica, sans-serif;
    color: #fff;
    margin: 0;

    @media (max-width: 1024px) {
      font-size: 18px;
    }

    @media (max-width: 767px) {
      font-size: 16px;
    }
  }
}

.develic-spinner-size-modal.develic-opened {
  z-index: 10000 !important;
}

.rolex-legend-16 {
  font-family: Helvetica;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  line-height: 1.1;

  @media (max-width: 1024px) {
    font-size: 13px;
  }

  @media (max-width: 767px) {
    font-size: 12px;
    line-height: 1.2;
  }
}

.rolex-legend-16-light {
  font-family: Helvetica;
  font-size: 16px;
  font-weight: light;
  color: #ffffff;
  line-height: 1.1;

  @media (max-width: 1024px) {
    font-size: 13px;
  }

  @media (max-width: 767px) {
    font-size: 12px;
  }
}

.rolex-body-24 {
  font-family: Helvetica;
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  line-height: 1.6;

  @media (max-width: 1024px) {
    font-size: 20px;
  }

  @media (max-width: 767px) {
    font-size: 18px;
    line-height: 1.2;
  }
}

.rolex-container {
  &:has(.rolex.rolex-page__header.rcpo) {
    background-color:  #f9f7f4;
  }

  .collection-listing .product-list {
    align-items: stretch;

    .product-block .block-inner {
      height: 100%;
      margin: 0;

      .block-inner-inner {
        display: flex;
        flex-direction: column;
        height: 100%;

        .image-cont {
          width: 100%;
        }

        .product-info {
          flex-grow: 2;
        }
      }
    }
  }
}

.rolex-container {
  .utility-bar {
    a:focus-visible, button:focus-visible {
      outline-color: var(--green) !important;
    }
  }
}