.category_page {
  position: relative;

  &.sidebar-open {
    overflow: hidden;
  }

  .no-sub-category {
    .page {
      margin-top: 30px;

      @include medium {
        margin-top: 60px;
      }

      @include xmedium {
        margin-top: 30px;
      }
    }

    .heading-section {
      .heading-main {
        .heading-inner {
          .main-heading-subcategory {
            .heading-and-subcategory {
              .filter {
                border-top: none;
              }
            }
          }
        }
      }
    }
  }

  .sub-category {
    .page {
      // Responsive margin-top using % for fluid scaling
      margin-top: 3%;

      @include small {
        margin-top: 5%;
      }

      @include xlsmall {
        margin-top: 6%;
      }

      @include xmedium {
        margin-top: 8%;
      }

      @include large {
        margin-top: 10%;
      }

      @include xxlarge {
        margin-top: 12%;
      }

      @include xxlarge-1680 {
        margin-top: 15%;
      }
    }

    .no-category-title {
      margin-top: 3%;

      @include small {
        margin-top: 5%;
      }

      @include medium {
        margin-top: 6%;
      }

      @include xmedium {
        margin-top: 8%;
      }

      @include large {
        margin-top: 10%;
      }

      @include xxlarge {
        margin-top: 12%;
      }

      @include xxlarge-1680 {
        margin-top: 15%;
      }
    }
  }

  .page-heading {
    margin: 0 0 10px 0;
    color: stencilColor("category-page-heading-color");
    font-family: stencilFontFamily("headings-font");
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: -1.92px;

    @include small {
      font-size: 35px;
    }

    @include medium {
      font-size: 40px;
      line-height: 45px;
      padding: 0;
    }

    @include large {
      margin-bottom: 20px;
    }

    @include xlarge {
      font-size: 48px;
      line-height: 58px;
    }
  }

  .page {
    &.custom_heading_section {
      .category-page-main-img {
        padding: 0 15px;
      }

      p {
        img {
          width: auto;
        }
      }

      .top-banner p {
        color: stencilColor("category-sub-heading-color");
        padding-top: 20px;
      }
    }

    .banners {
      background-color: transparent;
      padding: 0 0.75rem 10px 0.75rem;

      .banner {
        max-width: 100%;
      }
    }

    .description-text {
      padding: 0 0.75rem 1.5rem 0.75rem;

      .text .description {
        padding-bottom: 10px;

        @include large {
          padding-bottom: 15px;
        }

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

        h2 {
          color: stencilColor("category-page-heading-color");
          font-family: stencilFontFamily("headings-font");
          font-weight: $fontWeight-medium;
          margin: 0;
          padding-bottom: 5px;
          font-size: 18px;

          @include medium {
            font-size: 20px;
          }

          @include large {
            font-size: 24px;
            padding-bottom: 10px;
          }
        }

        p {
          color: stencilColor("category-description");
          font-family: stencilFontFamily("headings-font");
          margin: 0;
          font-size: 14px;
          line-height: 16px;

          @include medium {
            font-size: 16px;
            line-height: 24px;
          }
        }
      }
    }

    .page-content {
      p[data-no-products-notification] {
        font-size: 16px;
        color: stencilColor("category-description");
        font-family: stencilFontFamily("body-font");
        text-align: center;
        font-weight: 600;

        @include small {
          font-size: 20px;
        }

        @include medium {
          font-size: 24px;
        }
      }
    }
  }
}