/*your custom css goes here*/

@import url("./styles/category.css");

#update_button:disabled,
.cx-submit-button:disabled {
    background-color: #e6e6e6 !important;
    color: black;
    border: #e6e6e6;
}

/* utility classes */
.flex {
    display: flex;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}

.justify-end {
    justify-content: flex-end;
}
.flex-col {
    flex-direction: column;
}
.flex-wrap {
    flex-wrap: wrap;
}
.items-center {
    align-items: center;
}
.items-end {
    align-items: flex-end;
}
.items-start {
    align-items: flex-start;
}
.gap-md {
    gap: 18px;
}
.cx-display-in-mobile {
    display: none !important;
}
.cx-display-in-desktop {
    display: inherit !important;
}

@media screen and (max-width: 768px) {
    .cx-display-in-mobile {
        display: initial !important;
    }
    .cx-display-in-desktop {
        display: none !important;
    }
}
.cx-rounded-xs {
    border-radius: 4px;
}
.cx-rounded-sm {
    border-radius: 8px;
}
.cx-rounded-md {
    border-radius: 12px;
}
.cx-rounded-lg {
    border-radius: 16px;
}
.cx-rounded-xl {
    border-radius: 20px;
}

.container {
    max-width: 1240px;
    margin: auto;
}

@media screen and (max-width: 768px) {
    .cx-mobile-remove {
        display: none !important;
    }
}

.cx-slider-img {
    border-radius: 20px;
    overflow: hidden;
}
.cx-slider {
}
.cx-slider-slide {
    padding: 0 10px;
}
@media screen and (max-width: 768px) {
    .cx-slider-img {
        border-radius: 12px;
    }
    .cx-slider-slide {
        padding: 0 5px;
    }

    /* .cx-slider {
        border-radius: 16px;
        overflow: hidden;
    } */
}

/* Products details */
.cx-product-gallery-img {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 3/4;
    object-fit: cover;
    height: 100% !important;
}
.cx-product-img-ratio {
    aspect-ratio: 3/4;
}
.cx-product-details-seller-info {
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 12px;
}
.jssocials-shares .jssocials-share {
    border-radius: 50%;
    overflow: hidden;
}

/* Search Product Route Grid and Cards */
#searchProducts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

#searchProductCard {
    /* border: 1px solid #e6e6e6; */
    /* border-radius: 20px; */
    /* padding: 12px; */
}

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

@media screen and (min-width: 768px) {
    #searchProducts {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* New Product Route Grid and Cards */
#newProducts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 4px;
}

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

@media screen and (min-width: 768px) {
    #newProducts {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (min-width: 992px) {
    #newProducts {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Featured Categories  */
#homeFeaturedCats {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, 1fr);
}

#homeFeaturedCatCard {
    padding: 12px;
    border-radius: 12px;
    min-width: 120px;
}

#homeFeaturedCatImg {
    background-color: #f5f5f7;
    border-radius: 8px;
    padding: 4px;
}

#catImage {
    width: 120px;
    height: 120px;
    aspect-ratio: 1/1;
    object-fit: contain;
    margin: auto;
}

#featuredCatTitle {
    font-size: 14px;
}

@media screen and (max-width: 475px) {
    #homeFeaturedCatCard {
        padding: 12px;
        border-radius: 12px;
        min-width: 72px;
    }

    #homeFeaturedCats {
        display: flex;
        overflow-x: scroll;
        gap: 4px;
    }

    #catImage {
        width: 40px;
        height: 40px;
        overflow: hidden;
        aspect-ratio: 1/1;
        object-fit: contain;
        margin: auto;
    }

    #featuredCatTitle {
        font-size: 10px;
    }
}

@media screen and (max-width: 767px) {
    #homeFeaturedCats {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Homepage Products  */
#homePageProducts > div {
    margin-right: 16px;
}

/* SVG SPECIFIC  */
.svg-active-new svg * {
    stroke: var(--primary) !important;
}