/*----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------- CATEGORIES -----------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------
PROMOBLOCK SECTION
------------------------------------*/
.category-banner .g-padding-y-150--xs{
	padding-top: 5rem;
	padding-bottom: 5rem;
}
.category-banner .g-font-size-60--md{
    font-size: 2.9rem !important;
    font-weight: 600;
}

/*MAKE THE CATEGORIES HAVE EQUAL HEIGHT*/
.categories .row{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}
.categories .row > [class*="col-"]{
    display: flex;
    flex-direction: column;
}

/*---------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------- IMAGE HOVER ON PRODUCTS, CATEGORIES AND MAIN CATEGORIES SECTION --------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------*/
.img-container {
    position: relative;
    width: 100%;
}

.img-container img {
    width: 100%;
    transition: opacity 0.3s ease;
}

.img-primary {
    display: block;
}

.img-secondary {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.image-hover-wrapper:hover .img-primary {
    opacity: 0;
}

.image-hover-wrapper:hover .img-secondary {
    opacity: 1;
}

/* Extra small devices (phones, less than 576px) */
@media screen and (max-width: 364.98px) {
    /* Styles for extra small devices */
    /*----------------------------------
    BANNER SECTION
    ------------------------------------*/
    .category-banner .g-padding-y-150--xs{
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
	.category-banner .g-margin-b-25--xs {
		margin-bottom: .1rem;
	}
    .category-banner .g-font-size-60--md{
        font-size: 1.8rem !important;
    }
    .category-banner .g-font-size-14--xs{
        font-size: 0.7rem !important;
    }
    .js__parallax-window.category-banner{
        background-size: 150% !important;
    }
}


/* Extra small devices (phones, less than 576px) */
@media screen and (min-width: 365px) and (max-width: 575.98px) {
    /* Styles for extra small devices */
    /*----------------------------------
    BANNER SECTION
    ------------------------------------*/
	.category-banner .g-padding-y-150--xs{
		padding-top: 4rem;
		padding-bottom: 4rem;
	}
    .js__parallax-window.category-banner{
        background-size: 120% !important;
        background-position-y: -20px !important;
    }
    .category-banner .g-padding-y-150--xs{
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .category-banner .g-font-size-60--md{
        font-size: 2rem !important;
    }
}


/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
    /* Styles for medium devices */
     /*----------------------------------
    PROMOBLOCK SECTION
    ------------------------------------*/
    .category-banner .g-font-size-60--md{
        font-size: 3.5rem !important;
    }
    .category-banner .g-font-size-14--xs{
        font-size: 1rem !important;
    }
    .js__parallax-window.category-banner{
        background-size: 120% !important;
        background-position-y: 0px !important;
    }
    
    /*----------------------------------
    MAIN SECTION
    ------------------------------------*/
    .products.categories .article{
        padding-left: 5px;
        padding-right: 5px;
    }
}


/*---------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------- ALL CATEGORIES SECTION -------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------*/
/* Prevent content from overflowing the article container */
.all-categories .col-lg-4, .all-categories .col-xl-4, .all-categories .col-md-4, .all-categories .col-sm-6, .all-categories .col-xs-6, .all-categories .col-6 {
    overflow: hidden; /* This prevents content from overflowing */
}

/* Ensure all content within the article is contained */
.all-products .article,
.categories .article,
.main-categories .article,
.product-list .article,
.sub-categories .article {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Make sure the anchor tag doesn't cause overflow */
.all-products .article a,
.categories .article a,
.main-categories .article a,
.product-list .article a,
.sub-categories .article a {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* Constrain images to their container */
.all-products .img-container,
.categories .img-container,
.main-categories .img-container,
.product-list .img-container,
.sub-categories .img-container {
    position: relative;
    overflow: hidden;
    flex-shrink: 0; /* Prevent image container from shrinking */
}

.all-products .img-responsive,
.categories .img-responsive,
.main-categories .img-responsive,
.product-list .img-responsive,
.sub-categories .img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Ensure text content doesn't cause overflow */
.all-products .g-bg-color--white,
.categories .g-bg-color--white,
.main-categories .g-bg-color--white,
.product-list .g-bg-color--white,
.sub-categories .g-bg-color--white {
    flex: 1; /* Allow this element to grow and take available space */
    display: flex;
    flex-direction: column;
}

/* Specifically target the inner content divs */
.all-categories .col-sm-8, .all-categories .col-sm-4 {
    width: 100%;
    overflow: hidden; /* Prevent text overflow */
}

/* Ensure text doesn't cause horizontal overflow */
.all-products .g-padding-x-50--xs,
.categories .g-padding-x-50--xs,
.main-categories .g-padding-x-50--xs,
.product-list .g-padding-x-50--xs,
.sub-categories .g-padding-x-50--xs {
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
}



.container.all-products,
.container.categories,
.container.main-categories,
.container.product-list,
.container.sub-categories {
    width: 100%;
    max-width: 1440px;
    padding: 5rem 1.5rem 2rem 1.5rem;
    margin: 0 auto;
}

/*MAKE THE PRODUCTS HAVE EQUAL HEIGHT*/
.all-products .row,
.categories .row,
.main-categories .row,
.product-list .row,
.sub-categories .row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}

.all-products .row > [class*="col-"],
.categories .row > [class*="col-"],
.main-categories .row > [class*="col-"],
.product-list .row > [class*="col-"],
.sub-categories .row > [class*="col-"] {
    display: grid;
    flex-direction: column;
}

.all-products h3,
.categories h3,
.main-categories h3,
.product-list h3,
.sub-categories h3 {
	margin-bottom: 0rem;
    font-weight: 500;
}

.all-products .g-padding-x-40--xs.g-padding-y-40--xs,
.categories .g-padding-x-40--xs.g-padding-y-40--xs,
.main-categories .g-padding-x-40--xs.g-padding-y-40--xs,
.product-list .g-padding-x-40--xs.g-padding-y-40--xs,
.sub-categories .g-padding-x-40--xs.g-padding-y-40--xs {
    padding-left: 0rem;
    padding-right: 0rem;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
    background-color: transparent !important;
}

.all-products .g-padding-x-40--xs.g-padding-y-40--xs .col-sm-8,
.categories .g-padding-x-40--xs.g-padding-y-40--xs .col-sm-8,
.main-categories .g-padding-x-40--xs.g-padding-y-40--xs .col-sm-8,
.product-list .g-padding-x-40--xs.g-padding-y-40--xs .col-sm-8,
.sub-categories .g-padding-x-40--xs.g-padding-y-40--xs .col-sm-8 {
    padding-left: 0px;
    overflow: hidden; 
    white-space: nowrap;
}

.all-products .g-padding-x-40--xs.g-padding-y-40--xs .col-sm-4,
.categories .g-padding-x-40--xs.g-padding-y-40--xs .col-sm-4,
.main-categories .g-padding-x-40--xs.g-padding-y-40--xs .col-sm-4,
.product-list .g-padding-x-40--xs.g-padding-y-40--xs .col-sm-4,
.sub-categories .g-padding-x-40--xs.g-padding-y-40--xs .col-sm-4 {
    padding-left: 0px;
    padding-right: 0px;
    overflow: hidden; 
    white-space: nowrap;
    text-align: end;
}

.all-products .article .g-padding-x-40--xs.g-padding-y-40--xs,
.categories .article .g-padding-x-40--xs.g-padding-y-40--xs,
.main-categories .article .g-padding-x-40--xs.g-padding-y-40--xs,
.product-list .article .g-padding-x-40--xs.g-padding-y-40--xs,
.sub-categories .article .g-padding-x-40--xs.g-padding-y-40--xs {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.all-products .article,
.categories .article,
.main-categories .article,
.product-list .article,
.sub-categories .article {
    padding-bottom: 3rem;
}

.all-products .article p,
.categories .article p,
.main-categories .article p,
.product-list .article p,
.sub-categories .article p {
    font-weight: 600;
    color: #222324;
    margin-bottom: .25rem;
    text-align: left;
    padding-left: 0rem;
    padding-right: 0rem;
    overflow: hidden; 
    text-overflow: ellipsis;
}

.all-products .article p:hover,
.categories .article p:hover,
.main-categories .article p:hover,
.product-list .article p:hover,
.sub-categories .article p:hover {
  color: #9ACD32; /* Change to your preferred hover color */
  cursor: pointer; /* Optional: Changes cursor to pointer */
}

.all-products .article .sub-text,
.categories .article .sub-text,
.main-categories .article .sub-text,
.product-list .article .sub-text,
.sub-categories .article .sub-text {
    display: block;
    color: #646464;
    font-size: .7rem;
    text-align: left;
    overflow: hidden; 
    text-overflow: ellipsis;
}

.all-products .article .icons,
.categories .article .icons,
.main-categories .article .icons,
.product-list .article .icons,
.sub-categories .article .icons {
    display: inline-block;
    color: #646464;
    font-size: .7rem;
    text-align: right;
}

.all-products .article .g-bg-color--white,
.categories .article .g-bg-color--white,
.main-categories .article .g-bg-color--white,
.product-list .article .g-bg-color--white,
.sub-categories .article .g-bg-color--white {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
}

.all-products .g-font-size-22--xs,
.categories .g-font-size-22--xs,
.main-categories .g-font-size-22--xs,
.product-list .g-font-size-22--xs,
.sub-categories .g-font-size-22--xs {
    font-size: 1rem !important;
	line-height: 1.5;
}

.no-products .alert-danger{
	font-size: 1.5rem !important;
	font-weight: 600;
	color: #2e2e2e;
	background-color: transparent;
    border-color: transparent;
}

/* 1. Tiny devices (0 - 359px) */
@media (max-width: 359.98px) {
    /* Stack content vertically */
    .all-products .article .g-bg-color--white,
    .categories .article .g-bg-color--white,
    .main-categories .article .g-bg-color--white,
    .product-list .article .g-bg-color--white,
    .sub-categories .article .g-bg-color--white {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 2px;
    }
    
     /* Make both columns full width */
    .all-products .article .g-bg-color--white > [class^="col-"],
    .categories .article .g-bg-color--white > [class^="col-"],
    .product-list .article .g-bg-color--white > [class^="col-"],
    .sub-categories .article .g-bg-color--white > [class^="col-"] {
        width: 100%;
        flex: 0 0 100%;
    }
    
    .all-products .article .g-bg-color--white .col-sm-4,
    .categories .article .g-bg-color--white .col-sm-4,
    .main-categories .article .g-bg-color--white .col-sm-4,
    .product-list .article .g-bg-color--white .col-sm-4,
    .sub-categories .article .g-bg-color--white .col-sm-4 {
        margin-top: 10px;
    }

    /* Adjust spacing between stacked elements */
    .all-products .article .col-sm-4,
    .categories .article .col-sm-4,
    .main-categories .article .col-sm-4,
    .product-list .article .col-sm-4,
    .sub-categories .article .col-sm-4 {
        margin-top: 15px;
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
    
    .all-categories .article p{
        font-size: 0.75rem;
    }
    .all-categories .article .sub-text{
        font-size: 0.6rem;
    }
    .all-categories .article .icons{
        font-size: 0.6rem;
    }
}

/* 2. Small phones (360px - 575px) */
@media (min-width: 360px) and (max-width: 575.98px) {
    /* Keep content inline but adjust proportions */
    .all-products .article .g-bg-color--white,
    .categories .article .g-bg-color--white,
    .main-categories .article .g-bg-color--white,
    .product-list .article .g-bg-color--white,
    .sub-categories .article .g-bg-color--white{
        flex-wrap: nowrap;
        padding: 20px 2px;
    }
    
    .all-products .article .col-sm-4,
    .categories .article .col-sm-4,
    .product-list .article .col-sm-4,
    .sub-categories .article .col-sm-4 {
        flex: 0 0 35%;
        max-width: 35%;
        display: flex;
        justify-content: flex-end;
        gap: 15px; /* Space between icons */
    }
    
    /* Slightly smaller text for mobile */
    .all-categories .article p {
        font-size: 0.9rem;
    }
}

@media (max-width: 575.98px){
    
}

@media (min-width: 576px){
    
}

/* 3. Small tablets (576px - 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    
}

@media (max-width:767.98px){
    .container.all-products,
    .container.categories,
    .container.main-categories,
    .container.product-list,
    .container.sub-categories {
        padding: 4rem 1.3rem 1.5rem 1.3rem;
    }
    
    .all-products .article,
    .categories .article,
    .product-list .article,
    .sub-categories .article {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .main-categories .article{
        padding-left: .3rem;
        padding-right: .3rem;
    }
    
    .all-categories .article .g-padding-x-50--xs {
        padding-left: 2px;
        padding-right: 15px;
    }
    
    /* Keep columns inline but adjust their ratios */
    .all-categories .article .col-sm-8 {
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 0px;
    }
    
    .main-categories .article .icons{
        text-align: left;
    }
    
    .main-categories .article .col-sm-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .main-categories .g-padding-x-40--xs.g-padding-y-40--xs .col-sm-4{
        text-align: left;
    }
}

@media (min-width: 768px){
    
}

/* 4. Medium tablets (768px - 899px) */
@media (min-width: 768px) and (max-width: 899.98px) {
    
}

/* 5. Large tablets / small laptops (900px - 991px) */
@media (min-width: 900px) and (max-width: 991.98px) {}

/* 6. Small desktops (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {}

/* 7. Large desktops (1200px - 1439px) */
@media (min-width: 1200px) and (max-width: 1439.98px) {}

/* 8. Extra large desktops (1440px and up) */
@media (min-width: 1440px) {}