/*-----------------------------------Collection Page Styles--------------------------------------*/
.featured_image_section_collection {
    -webkit-mask-image: radial-gradient(58% 58px at 50% 100%, transparent 99%, var(--term-color) 100%) !important;
    mask-image: radial-gradient(58% 58px at 50% 100%, transparent 99%, var(--term-color) 100%) !important;
    background-color: var(--term-color) !important;
}


.collection-image-background::before {
    background-image: linear-gradient(90deg, var(--term-color) 4%, rgba(255, 255, 255, 0) 20%) !important;
    background-color: transparent !important;
    opacity: 1 !important;
}

.elementor-post__thumbnail {
    margin: auto !important;
}


@media (max-width: 767px) {
    .collection-image-background::before {
        background-image: linear-gradient(360deg, var(--term-color) 4%, rgba(255, 255, 255, 0) 20%) !important;
    }

    .featured_image_section_collection {
        -webkit-mask-image: radial-gradient(76% 74px at 50% 100%, transparent 99%, var(--term-color) 100%) !important;
        mask-image: radial-gradient(76% 74px at 50% 100%, transparent 99%, var(--term-color) 100%) !important;
        padding-bottom: 50px !important;
        height: auto !important;
        min-height: unset !important;
    }

    .elementor-post__thumbnail {
        margin: auto !important;
    }

}

/* We target the ::before pseudo-element specifically as seen in the inspector */
.collection-image-background::before {
    background-image: linear-gradient(90deg, var(--term-color) 4%, rgba(255, 255, 255, 0) 20%);
    background-color: transparent !important;
    /* Matches your current setting */
    opacity: 1 !important;
}

/* If you have a background color set on the main container as well */
.collection-image-background {
    background-color: transparent !important;
}

@media (min-width: 767px) and (max-width: 1024px) {
    .featured_image_section_collection {
        min-height: 500px !important;
        height: auto !important;
        -webkit-mask-image: radial-gradient(60% 60px at 50% 100%, transparent 99%, var(--term-color) 100%) !important;
        mask-image: radial-gradient(60% 60px at 50% 100%, transparent 99%, var(--term-color) 100%) !important;
    }


    .collection-image-background::before {
        background-image: linear-gradient(90deg, var(--term-color) 4%, rgba(255, 255, 255, 0) 20%) !important;
    }
}

@media (max-width:767px) {
    .collection-image-background::before {
        background-image: linear-gradient(360deg, var(--term-color) 4%, rgba(255, 255, 255, 0) 20%) !important;
    }
}


@media (min-width: 1920px) {
    .collection-image-background {
        margin-right: -5px !important;
    }

    .collection-content-section .e-con-inner {
        float: right;
        max-width: 626px !important;
        margin: 0px !important;
        align-items: end;
        align-self: flex-end;
    }

}

@media (min-width:767px) {
    .collection-image-background {
        margin-left: -2px !important;
    }

}

@media (min-width: 2600px) {
    .collection-image-background {
        position: relative;
        overflow: hidden;
        background-size: 1320px auto !important;
        background-position: left center !important;
        background-repeat: no-repeat !important;
        background-color: var(--term-color) !important;
    }

    .collection-image-background::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 14vw !important;
        height: 100%;
        pointer-events: none;
        z-index: 2;
        background: linear-gradient(to left, var(--term-color) 15vw, rgba(201, 198, 127, 0) 100%) !important;
    }

    .collection-content-section .e-con-inner {
        float: right;
        max-width: 626px !important;
        margin: 0px !important;
        align-items: end;
        align-self: flex-end;
    }
}

@media (min-width: 3200px) {
    .content-section-inner {
        max-width: 1000px !important;
        align-self: flex-end !important;
    }

    .collection-image-background::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 15vw !important;
        height: 100%;
        pointer-events: none;
        z-index: 2;
        background: linear-gradient(to left, var(--term-color) 12vw, rgba(201, 198, 127, 0) 100%) !important;
    }
}

/* Mobile Grid/List view Styles */
/* Only apply these layout overrides on Mobile */
@media (max-width: 767px) {

    /* ==========================================================================
       DEFAULT STATE: Grid / Large View (When .list-view-active is NOT present)
       ========================================================================== */
    #collection-product-grid {
        .elementor-post__card {
            display: grid !important;
            grid-template-columns: repeat(1, 1fr) !important;
            gap: 10px !important;
            text-align: center !important;
        }

        .e-loop-item {
            flex-direction: column !important;
            align-items: center !important;
            text-align: center !important;

            .e-con,
            .e-con-inner,
            .product-card-details * {
                width: 100% !important;
                align-items: center !important;
                justify-content: center !important;
                margin: auto !important;
                text-align: center !important;
            }

            .elementor-post__thumbnail {
                width: 353px !important;
                max-width: 100% !important;
                margin-right: 0 !important;
                margin: auto !important;
                padding-bottom: 20px;
            }

            .elementor-post__title {
                width: 100% !important;
                text-align: center !important;
            }

            a.elementor-post__thumbnail__link {
                margin-bottom: 0px;
            }
        }
    }

    /* ==========================================================================
       MODIFIER STATE: List / Condensed View (When .list-view-active IS present)
       ========================================================================== */
    #collection-product-grid.list-view-active {
        .elementor-post__card {
            display: flex !important; /* Overrides the grid layout */
            flex-direction: row !important;
            justify-content: center !important;
            column-gap: 20px !important;
        }

        .elementor-post__text {
            align-self: center !important;
            padding: 0px !important;
        }

        .elementor-post__thumbnail__link {
            margin-bottom: 0px !important;
        }

        h3.elementor-post__title {
            text-align: left !important;
            display: -webkit-box !important;
            -webkit-line-clamp: 2 !important;
            -webkit-box-orient: vertical !important;
            overflow: hidden !important;
        }
    }

    /* Toggle Icon Styles */
    .list-icon-trigger,
    .grid-icon-trigger {
        cursor: pointer;

        i,
        svg path {
            stroke: #A0A0A0;
        }

        &.is-active i,
        &.is-active svg path {
            stroke: var(--e-global-color-primary) !important;
        }
    }
}

/* Optional: Hide the toggle icons on Desktop if they are only for mobile */
@media (min-width: 768px) {
    .grid-icon-trigger,
    .list-icon-trigger {
        display: none !important;
    }

    #collection-product-grid h3.elementor-post__title {
        text-align: center;
    }
}