/* 🚧 WIP 🚧: BEM naming convention needs to be completed for these styles */
.content-for-layout:has(.cpap__plp-best-sellers__container) .cpap__plp-header {
  padding: 12px 0 277px 0;

  @media (max-width: 992px) {
    padding: 17px 0 200px 0;
  }
}

.content-for-layout:has(.cpap__plp-best-sellers-part-finder) .cpap__plp-header {
  padding: 12px 0 60px 0;

  @media (max-width: 992px) {
    padding: 17px 0 40px 0;
  }
}

.cpap__plp-header {
  background: var(--cpap-primary-beige);
  padding: 12px 0 60px 0;
  overflow: hidden;

  @media (max-width: 992px) {
    padding: 17px 0 40px 0;
  }

  .cpap__plp-header__container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .cpap__breadcrumbs-generic {
      position: relative;
      z-index: 4;
      @media (max-width: 992px) {
        order: 1;
      }

      .breadcrumbs__list {
        display: flex;
        align-items: center;
        padding: 0;
        margin: 0;
        list-style-type: none;
        .breadcrumbs__item {
          display: flex;
          align-items: center;
          svg {
            margin: 0 8px;
          }
        }
        .breadcrumbs__link {
          margin: 0;

          &::before {
            display: none;
          }
        }
      }
    }
    .cpap__plp-header__title-container {
      width: 69.3%;
      padding-top: 39px;
      padding-right: 40px;
      @media (max-width: 992px) {
        width: 100%;
        order: 3;
        padding: 0;
        text-align: center;
      }
      .back-to {
        color: var(--cpap-text-text-gray);
        font: var(--cpap-typography-font-s-bold);
        text-decoration: underline;
        &:hover {
          @media (min-width: 768.5px) {
            opacity: 0.7;
          }
        }
        &:active {
          opacity: 0.7;
        }
      }
      h1 {
        text-align: left;
        margin-bottom: 16px;
        @media (max-width: 992px) {
          font-size: 48px;
          line-height: 52px;
          text-align: center !important;
        }
      }
      p {
        color: var(--cpap-text-text-gray);
        max-width: 760px;
        margin-bottom: 16px;
        @media (max-width: 992px) {
          max-width: 100% !important;
        }
      }
      .cpap__plp-header__links {
        @media (max-width: 992px) {
          margin: 0 -56px;
          padding: 0 56px;
        }
        @media (max-width: 768px) {
          margin: 0 -20px;
          padding: 0 20px;
        }
        .swiper-pagination {
          display: none !important;
          @media (max-width: 768px) {
            display: flex !important;
          }
        }
        .links-box {
          @media (min-width: 992.5px) {
            display: flex;
            flex-wrap: wrap;
          }
          .swiper-slide {
            width: auto !important;
            margin-right: 16px;
            margin-bottom: 16px;
            @media (max-width: 992px) {
              margin-bottom: 10px;
            }
          }
          .cpap__theme__button--white {
            padding: 10.5px 15.5px;
          }
        }
      }
    }
    .cpap__plp-header__image-container {
      width: 30.7%;
      margin-top: 20px;
      max-width: 305px;
      height: 305px;
      position: relative;
      @media (max-width: 992px) {
        width: 100%;
        order: 2;
        max-width: 194px;
        height: 194px;
        margin: 0 auto;
        margin-top: 21px;
        margin-bottom: 31px;
      }
      &:before {
        content: '';
        width: 638px;
        height: 638px;
        background-image: url('./Rings-3.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        position: absolute;
        top: 50.6%;
        left: 49.2%;
        z-index: 1;
        transform: translate(-50%, -50%);
        pointer-events: none;
        @media (max-width: 992px) {
          width: 406px;
          height: 406px;
        }
      }
      &:after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        top: 20px;
        left: 20px;
        background: linear-gradient(90deg, #ffaa8f 27.15%, #f0c6ff 70.37%);
        opacity: 0.6;
        filter: blur(10.166px);
        transform: rotate(-135deg);
        z-index: 2;
        border-radius: 50%;
      }
      img {
        position: relative;
        z-index: 4;
        border-radius: 50%;
        width: 100%;
        height: 100%;
      }
    }
  }
  .cpap__plp-header__links {
    margin-bottom: 30px;
    @media (max-width: 990px) {
      margin-bottom: 0;
    }
  }
}