.carousel-control-prev-icon {
    background-color: #1e1e1d;
}
.carousel-control-next-icon {
    background-color: #1e1e1d;
}
/* Container for the image */
.image-container {
    position: relative;
    width: 100%;
    max-width: 25em;
    aspect-ratio: 1 / 1;
    margin-top: 3px;
}

/* Original image */
.image-container .original-image,
.image-container .hover-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

/* Initially show only the original image */
.image-container .hover-image {
    opacity: 0;
    cursor: pointer;
}

/* On hover, show the hover image and hide the original image */
.image-container:hover .original-image {
    opacity: 0;
}

.image-container:hover .hover-image {
    opacity: 1;
}
.quantity-input {
    width:15%;
}
.favorite-btn {
  font-size: 1.5rem;
  background: transparent;
  border: none;
  color: #dc3545; /* Red color for heart */
  font-size: 1.2em;
}
.products-space{
    padding-top:3em;
}
.product-card {
    width: 100%;
    align-items: center;
}
.product-title{
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 25em;
}

.product-cost{
    font-size: 1.25em;
    margin-bottom: 2px;
    font-weight: 600;
    padding-right: 1em;
    color: #212529;
    font-family: serif;
}
.discount-product-cost{
    font-size: 1.25em;
    margin-bottom: 2px;
    font-weight: 600;
    padding-right: 1em;
    color: #21a321;
    font-family: serif;
}
.product-off-per {
    font-size: 1.25em;
    margin-bottom: 2px;
    font-weight: 200;
    padding-right: 8px;
    color: #f44747;
    font-family: serif;
}
.old-product-cost{
    font-size: 1.25em;
    margin-bottom: 2px;
    font-weight: 200;
    padding-right: 8px;
    font-style: italic;
    text-decoration: line-through;
    font-family: serif;
}
.product-description {
    font-size:15px;	
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 25em;		
}
.product-brand {
    font-size: 10px;
    margin-bottom: 5px;
    color: #565959;
    font-weight: 500;
    margin-top: -5px;
}
.quantity-controls {
    padding-top: 0;
    margin-top: -7px;
}
.modal-title{
    margin-bottom: -3px;
}
.modal-close{
    background-color: transparent;
    border: 2px solid #ccc;
    border-radius: 50%;
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #7c0909;
    padding: 0;
}
.add-cart-btn{
    background-color: #ffd814;
    color: #0f1111;
    border-color: #ffd814;
    font-size: 14px;
    margin-left: 1em;
}
.minus-btn {
    border-radius: 3px;
    padding: 2px 10px 5px 10px;
    border: none;
    background-color: #eadbc5;
}
.plus-btn {
    border-radius: 3px;
    padding: 2px 10px 5px 10px;
    border: none;
    background-color: #eadbc5;
}
.discounted-price {
  font-size: 1em;
  color: green;
}

.original-price {
  text-decoration: line-through;
  color: gray;
}

.productView-title {
    text-transform: uppercase;
    font-size: 1.5rem;
}
.productView-add-to-cart {
    padding: 0.7em 5em;
    background-color: black;
    border: black;
    margin-left: 2em;
}
.modal-flex{
    display: flex;
}
.modal-description {
    margin-left: 4.5rem !important; 
    width:45%;
}
.modal-quantity-input {
    width: 6em;
    height: 2.9em;
    text-align: center;
}
@media (min-width: 375px) and (max-width: 767.98px) {
    .modal-flex{
        display: block;
    }
    .modal-description {
        margin-left: 0.5rem !important;
        width: 100%;
    }
    .modal-quantity-input {
        padding: 0.5em 1em;
        width:3em;
    }
    .product {
        padding-bottom:3em;
    }
    .products-space{
        padding-top:0em;
    }
    .productView-add-to-cart {
        padding: 0.7em 0.5em;        
    }
    .image-container {
        width: 100%;
        max-width: 21em;
        aspect-ratio: 1 / 1;
    }
    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
        width: 100%;
    }

    thead {
        display: none; // hide the table header on mobile
    }

    tr {
        margin-bottom: 1rem;
        border-bottom: 1px solid #ccc;
    }

    td {
        display: flex;
        align-items: center;
        padding-left: 1rem; /* no more 50% padding */
        position: relative;
      }
    
      td::before {
        content: attr(data-label);
        font-weight: bold;
        margin-right: 0.5rem;
        min-width: 100px; /* optional: align labels nicely */
        flex-shrink: 0;
      }
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 75%;
        margin-right: auto;
        margin-left: auto;
    }
}