/* General text styling */
p {
    font-family: 'Open Sans', sans-serif;
}

#banner_message {
    color: var(--bannerfontcolor);
    background-color: black;
    margin-bottom: 0;
    padding-bottom: 10px;
    text-align: center;
    font-size: 2.0em;
    font-weight: bold;
    width: 100%;
}

.sale_price {
    min-height: 20px;
    font-size: 14px;
    margin-left: 0;
    padding-left: 0;
    color: red;
    font-weight: 600;
    text-decoration: line-through;
    text-align: center;

}

.edlp {
    min-height: 20px;
    font-size: 14px;
    margin-left: 0;
    padding-left: 0;
    color: red;
    font-weight: 600;
    text-align: center;

}

li {
    margin-left:40px;
}

.clear-float            {
    clear:both;
        }
.text-info {
    color:black !important;
}
.multiple_product_container{
    width:80%;
    margin-left:10%;
}

.expandable-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: unset;
  -webkit-box-orient: vertical;
  transition: max-height 0.3s ease;
  margin: 0;       /* Removes space above/below the container */
  padding: 0;      /* Removes inner padding */
  line-height: 1.4; /* Optional: control vertical spacing */
}

.read-more-button {
  display: none;
}

    .breadcrumbs{
        margin-top:10px;
        text-align: center;
        width:100%;
        margin-left:-2.5%;
    }

    .breadcrumbs a{
        color:darkgrey;
    }

    .breadcrumbs a:visited{
        color:darkgrey;
    }

    .breadcrumbs a:hover{
    color:var(--themecolor)!important;
    }


    #center{
        text-align: center;
        width:100%;
        margin-left:-5%;
        margin-bottom:-14px;

    }

       .banner-image-container {
            height: 400px; /* Set the height of the div */
            width: calc(100% + 16px); /* Adjust width to account for the outer container's margin */
            margin-left: -8px; /* Offset the left margin */
            margin-right: -8px; /* Offset the right margin */
            overflow: hidden; /* Hide overflow to cut off sides */
            position: relative;
        }

        .banner-image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensure the image covers the entire div */
            display: block; /* Ensure no extra space below the image */
        }


.product_container{
    width: 25%;
    min-height: 300px;
    margin-bottom:0px;
    margin-right:0%;
    float:left;
    color:var(--fontcolor);
    padding-bottom:5px;
    display: block;
}

.link {
  position: absolute;
  width: 18%;
  height: auto;
  top: 0;
  left: 0;
  z-index: 1;
}

.product_container a{
  color:black;
}

.product_container a:hover{
    color:var(--themecolor)!important;
    font-weight: 600;
}

#categorylink_container {
    margin: auto;
    width:100%;
    margin-bottom:50px;
    margin-top:-70px;
}

#inner_categorylink_container a {
    text-decoration: none;
    color:var(--bannerfontcolor)!important;
    background-color:var(--bannerbackgroundcolor)!important;
}

#inner_categorylink_container a:visited{
    color:var(--bannerfontcolor)!important;
}
#inner_categorylink_container a:hover{
    color:var(--themecolor)!important;
}
#inner_categorylink_container a:visited:hover{
    color:var(--themecolor)!important;
}

#inner_categorylink_container {
    width:150px;
    float:left;
    margin-right:1px;
    margin-bottom:5px;
    text-align: center;

}

.product_container_pds{
    width: 18%;
    height: auto;
    margin-bottom:10px;
    margin-right:1.8%;
    float:left;
    background-color:var(--backgroundcolor);
    color:var(--fontcolor);
    padding-bottom:5px;
}
    #mpnproduct_button {
        width:180px;
        height:260px;
        float:left;
        border:none;
        background-color: transparent;
        position: relative;
        font-size: 18px;
        margin-left:-5px;
        margin-top:-300px;
        cursor: pointer;
    }
    #skuproduct_button {
        width:180px;
        height:300px;
        float:left;
        border:none;
        background-color: transparent;
        position: relative;
        font-size: 18px;
        margin-left:-5px;
        margin-top:-300px;
        cursor: pointer;
    }

.inner_product_container{
    width: 90%;
    padding:5%;
  }

.image_container{
    height:auto;
}



.list_image_width{
    height:200px;
    width:200px;
    margin-left:10%;
    margin-right:10%;
}

.list_product_description {
    font-size: 24px;
    margin-top: -16px;
    height: 110px; /* Ensure a consistent minimum height */
    text-align: center;
    overflow: hidden; /* Still hides overflow if content exceeds the container */
    display: flex;
    flex-direction: column; /* Ensures alignment */
}


.list_product_description p {
    font-size:13px; 
    padding-top:20px;

}

.price_box{
    margin: auto;
    width: 70%;
    margin-top:-20px;
}
.from p {
    font-weight: 500;
    font-size:16px; 
    text-align:center;
    margin-top:25px;
    margin-bottom:-30px;
}

.list_product_price p {
    font-weight: 600;
    font-size:24px; 
    text-align:center;
}

.learn_more {
    text-align: center;
    margin-top:-14px;
    margin-left:25%;
    margin-right:125%;
    border:none;
    background:var(--themecolor);
    color:white;
    width:50%;
    height:30px;
    font-weight: 600;
}

.learn_more p {
    padding-top:4px;
    font-size:16px;
}

/* Multiple product container layout */
.multiple_product_container {
    width: 70%;
    margin: 0 auto;
}

/* Product container layout */
.product_container {
    width: 25%;
    margin-bottom: 10px;
    float: left;
    padding-bottom: 5px;
    text-align: center;
    min-height: 300px;
}

.product_container img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 10px;
}

/* Product description */
.list_product_description {
    font-size: 10px;
    padding-left: 10px;
    padding-right: 10px;
    height: 88px;
    overflow: hidden;
    color: black;
}

.sale_price {
    min-height: 20px;
    font-size: 14px;
    margin-left: 0;
    padding-left: 0;
    color: red;
    font-weight: 600;
    text-decoration: line-through;
}

.edlp {
    min-height: 20px;
    font-size: 14px;
    margin-left: 0;
    padding-left: 0;
    color: red;
    font-weight: 600;
}

.standard_price {
    min-height: 20px;
    font-size: 14px;
    margin-left: 0;
    padding-left: 0;
    color: blue;
    font-weight: 900 !important;
}

/* Price box */
.price_box {
    margin-top: -20px;
    color: black;
    font-weight: 600;
}

/* "More Info" button */
.learn_more {
    background-color: var(--themecolor);
    color: white;
    font-size: 10px;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    height: 34px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 34px;
}

/* Promo message */
.promo-message {
    text-align: center;
    color: red;
    font-style: italic;
    font-size: 1rem;
}


@media only screen and (max-width:1600px) {



.image_container{
    height:140px;
}

.list_product_description{
    margin-top:10px;
    height: 90px; /* Ensure a consistent minimum height */

}

.learn_more {
    margin-left:15%;
    margin-right:15%;
    width:70%;
    height:30px;
    font-weight: 600;
}

.list_image_width{
    height:180px;
    width:180px;
}

}

@media only screen and (max-width: 768px) {
    .banner-image-container img.full-width {
        width: 396px;
        height: 200px;
        object-fit: cover;
    }

      .expandable-text.collapsed {
    -webkit-line-clamp: 4;
    max-height: 20em; 
  }

  .read-more-button {
    display: inline-block;
    margin-top: 5px;
    font-size: 0.9rem;
    color: blue;
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    padding-top: 10px;
    padding-bottom: 10px;


  }
}


@media only screen and (min-width : 320px) and (max-width : 480px){

    #center{
        text-align: center;
        margin-left:0%;

    }
.multiple_product_container{
    width:95%;
    margin-left:2.5%;
    margin-right:2.5%;
    padding:0%;
}
  

#categorylink_container {
    margin-top:-110px;
}
.image_container{
    height:140px;
}


.product_container_pds{
    width:50%;
    margin-bottom:6px;
    margin-right:0%;
    margin-left:0%;
    padding-bottom:20px;
}


.product_container{
    width:49%;
    margin-bottom:0px;
    margin-right:0%;
    margin-left:0%;
    padding:0px;
}

.list_product_description{
        min-height: 70px; /* Ensure a consistent minimum height */

    height:70px;
    margin-top:5px;
    margin-bottom:10px;
    overflow: hidden;

}
.list_product_description p {
    padding-top:0px;
    font-size:14px; 


}

.price_box{
    margin-top:0px;
}
.from p {
    font-weight: 500;
    margin-top:8px;
    margin-bottom:-10px;
}

.learn_more {
    margin-left:15%;
    margin-right:15%;
    width:70%;
    height:30px;
    font-weight: 600;
    margin-bottom: 10px;
}

.list_product_price p {
    font-weight: 600;
    font-size:24px; 
    text-align:center;
    margin-top:-5px;
    margin-bottom:25px;
}

    #skuproduct_button {
        margin-top:-300px;
        width:166px;
        height:320px;
        margin-left:-10px;
        cursor: pointer;
    }
    
        #mpnproduct_button {
        margin-top:-280px;
        width:166px;
        height:240px;
        margin-left:-10px;
        cursor: pointer;
    }

.banner-image-container{
    height: 200px;
   
}

.list_image_width{
    height:140px;
    width:140px;
}
}

/* Responsive design */
@media only screen and (max-width: 1000px) {




    .product_container {
        width: 30%;
    }
}

@media only screen and (max-width: 480px) {
    .product_container {
        width: 50%;


    }


    .multiple_product_container {
        width: 95%;
    }

    .list_product_description {
        height: 100px;
        padding-top: 5px;
    }

    .list_product_description p {
    font-size:14px; 


}

    .price_box {
    margin-top: -22px;
    color: black;
    font-weight: 600;
}

.learn_more {
    background-color: var(--themecolor);
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
    margin-top: -4px;
} 

.inner_product_container{
    width: 100%;
    padding:5%;
  }

}