.sub_cat_bottom_container{
     display: flex;
     flex-shrink: 1;
     justify-content: space-between;
}
.bottom_icon_container{
     display: flex;
     gap: 1rem;
     align-items: center;
}

.sub_item_cat_container_big{
     display: flex;
     box-shadow: var( --container-shadow);
     
     padding:1rem;
     
     background-color: var(--container-bg);
     
     border-radius: var( --container-outer-border-radius);
     gap: 2rem;
     flex-wrap: wrap;
     align-items: flex-start;
  justify-content: start;
}



.productName{
     white-space:wrap;
     text-align: justify;

}

   
   .sub_item_cat_container:hover {
     transform: translateY(-6px) scale(1.02);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
   }
   

   .sub_item_cat_container:hover picture img.product_image {
     transform: translateY(-4px);
     box-shadow: 0 6px 16px rgba(0,0,0,0.12); 
  }


   .sub_item_cat_container.small picture {
     width: 100%;
     height: auto;
     margin-bottom: 10px;
   }
   


   .sub_item_product{
     background: #fff;
     border-radius: 10px;
     box-shadow: 0 4px 12px rgba(0,0,0,0.08);
     display: flex;
     flex-direction: column;
     text-align: center;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
     position: relative;
     z-index: 2;
     justify-content: space-between;
     flex-grow: 1;
     max-width: 24rem;
     border-radius: 1rem;

     width: 100%;
   }


   
   .sub_item_product .product_image {
     width: 24rem;
     height: 15.8rem;        /* remove fixed height */
     max-height: 20rem;      /* optional max height */
     aspect-ratio: 1.58 / 1; /* maintains ratio */
     object-fit: cover;
     display: block;
     border-radius: 10px;
   }


   .sub_detail {
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
   }
   
   .sub_item_product {
     flex: 1 1 calc(50% - 0.5rem); /* 2 items per row on desktop */
     max-width:24rem;
   }
   
   @media (max-width: 768px) {
     .sub_item_product {
       flex: 1 1 100%; /* 1 item per row on mobile */
       max-width: 100%;
     }
   }
   
   .sub_cat_bottom_container {
     padding: 0.75rem;
     background-color: #f5f5f5;
     width: 100%;
     text-align: center;
     transition: background-color 0.3s ease;
     display: inline;
     border-radius: 0px 0px 1rem 1rem;
   }
   
   .sub_item_cat_container:hover .sub_cat_bottom_container {
     background-color: #e8e8e8;
   }




.sub_item_cat_container{
     background: #fff;
     border-radius: 10px;
     box-shadow: 0 4px 12px rgba(0,0,0,0.08);
     display: flex;
     flex-direction: column;
     text-align: center;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
     position: relative;
     z-index: 2;
     justify-content: space-between;
     flex-grow: 1;
     max-width: inherit;
     border-radius: 1rem;

     min-width: 100%;
     max-width: 25rem;
}

.sub_item_cat_container .autoAdjust {
     object-fit: fill;
     width: auto;
     height: auto;
  --width:auto;
  --height:auto;
}
.sub_item_cat_container.small {
     width: 100%;
     height: 100%;
     aspect-ratio: 1/1;
     min-width: 20rem;
}

.sub_item_cat_container.cat_procduct_list_item {
     width: 18rem;
     height: fit-content;
     aspect-ratio: 4/4;
}
.sub_item_cat_container.mid{
     width:50%;
}

.sub_item_cat_container.full{
     width:100%;
     height:auto;
     padding:0rem;
     aspect-ratio: 1/1;
     width: 16rem;
}




@media (max-width: 600px) {
   
     .sub_item_cat_container.full{
          width: 10rem;

     }

}




.sub_item_cat_container .product_image{
     max-width: 100%;
     max-height: 100%;
     object-fit: cover;
     aspect-ratio: 6.00 / 3.9;
     border-radius: var(--container-inner-border-radius) var(--container-inner-border-radius) 0px 0px;
     width:100%;
}

.sub_item_cat_container .product_image_shop_by_brands{
     max-width: 100%;
     max-height: 100%;
     object-fit: fill;
     aspect-ratio: 6.00 / 5;
     border-radius: var(--container-inner-border-radius) var(--container-inner-border-radius) 0px 0px;
     width:100%;
}


.sub_item_cat_container picture {
     width: 100%;
     height: auto; /* fixed height for consistency */
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
   }

.sub_item_cat_container_big .product_image{
     width:20rem;
     
     flex-shrink: 1;
     border-radius: 1rem;
     object-fit: cover;
     height: auto;
     aspect-ratio: 3.5/3;
}

.right_container_top{
     display: flex;
     justify-content: space-between;
}

.product_mid_container_part{
     display: flex;
     flex-direction: column     ;
          justify-content: start;

          width: max-content;
          width: auto;
     }
.sub_item_cat_container_big .right_container_part{
     width:100%;

     display: flex;
     flex-direction: column;
     flex-shrink: 1;
     flex-grow:1;
     justify-content: space-between;
     flex-basis: fit-content;
     align-items: start;
}

.item_container{
     display: flex;
     flex-direction: column;
     gap:1rem;
}




.cat_top_header_seprate{
     display: flex;
     height:auto;
     justify-content: space-between;
     align-content: start;
     align-items: stretch;
}




.base_items_product{
     padding:1rem 0rem;
}



.info_tag{
     background-color: aliceblue;
     box-shadow: inset 2px ;
     padding:0rem 0.5rem;
     text-transform: capitalize;
}

.main_product_container{
     flex-wrap: wrap;
  display: flex;
  width: 100%;
  gap: 1rem;
}

.inner_product_info_container{
     display:flex; flex-direction:column; 
       max-width: 60%;  
        height: 18rem;
         justify-content:space-between;
       width: 100%;
}

.partial_product_info{
     display: flex;
     width:100%;
     gap:2rem;
     margin:1rem 0px;
}

@media (max-width: 600px) {
     .main_product_container{
          justify-content: center;

     }


     .inner_product_info_container{
           max-width: 100%;  
           height: min-content;
           align-items: center;
     }
}




.price_container {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-top: 6px;
     font-size: 14px;
     flex-wrap: wrap;
   }
   
   .old_price {
     text-decoration: line-through;
     color: #888;
   }
   
   .new_price {
     color: var(--button-cta-bg-color); /* red highlight for discounted price */
     font-weight: bold;
     font-size: 15px;
   }
   
   .discount_tag {
     color: var(--primary-color); /* green */
     font-size: 13px;
     font-weight: 500;
   }
   












   .product-image-wrapper {
     position: relative;
     width: 100%;
     overflow: hidden;
     aspect-ratio: 1 / 1; /* keep square or adjust to your need */
   }
   
   /* Base image styling */
   .product_image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: opacity 0.4s ease, transform 0.4s ease;
     display: block;
   }
   
   /* Stack the hover image on top */
   .product_image.hover {
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0;
     transform: scale(1.05); /* slight zoom-out on hover */
   }
   
   /* Hover effect */
   .sub_item_cat_container:hover .product_image.main {
     opacity: 0;
     transform: scale(1.05);
   }
   
   .sub_item_cat_container:hover .product_image.hover {
     opacity: 1;
     transform: scale(1);
   }
   
   
   
   
   .product_image.hover {
        position: absolute;
        top: 0;
         left: 30rem;
        opacity: 1;
        transition: left 0.4s ease;
      }
      
      .sub_item_cat_container:hover .product_image.main {
        left: -100%;
        position: absolute;
        transition: left 0.4s ease;
      }
      
      .sub_item_cat_container:hover .product_image.hover {
        left: 0;
      }