.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 {
            // Replaced all % margin-top with fixed px units for consistency
            margin-top: 20px;

            @include small {
                margin-top: 40px;
            }

            @include xlsmall {
                margin-top: 50px;
            }

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

            @include large {
                margin-top: 70px;
            }

            @include xxlarge {
                margin-top: 80px;
            }

            @include xxlarge-1680 {
                margin-top: 90px;
            }
        }

        .no-category-title {
            margin-top: 20px;

            @include small {
                margin-top: 40px;
            }

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

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

            @include large {
                margin-top: 70px;
            }

            @include xxlarge {
                margin-top: 80px;
            }

            @include xxlarge-1680 {
                margin-top: 90px;
            }
        }
    }

    .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;
                }
            }
        }
    }
}