/* General styles for the bundle products container */
    .bundle-products {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* Default 4 columns (for larger screens like laptops) */
        gap: 20px; /* Space between products */
    }
    
    /* Styles for individual bundle products */
    .bundle-product {
        display: flex;
        flex-direction: column; /* Stack the image, name, price, and button vertically */
        background-color: #F2E2D5;
        padding: 20px;
        /*border: 1px solid #ddd;*/
        text-align: center;
        height: 100%; /* Allow product card to expand to fit content */
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Distribute space evenly between elements */
    }
    
    /* Flexbox layout for image, name, and price */
    .bundle-product img {
        width: 100%;
        height: auto;
        object-fit: cover;
        margin-bottom: 15px; /* Space between image and text */
    }
    
    .bundle-product .product-info {
        display: flex;
        flex-direction: column; /* Stack name and price vertically */
        justify-content: flex-start;
        flex-grow: 1; /* Let the product info grow to fill available space */
    }
    
    .bundle-product h3 {
        margin: 0;
        font-size: 1.1rem;
        margin-bottom: 8px; /* Space between name and price */
        height: auto;
    }
    
    .bundle-product p {
        margin: 0;
        font-size: 1rem;
        color: #ba864a;
    }
    
    .bundle-product button.add-to-bundle {
        margin-top: 15px; /* Space above the button */
        padding: 10px 20px;
        background-color: #cd9452;
        color: white;
        border: none;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    
    .bundle-product button.add-to-bundle:hover {
        background-color: #ba864a;
        color:black;
    }
    
    /* Responsive Breakpoints */
    
    /* Tablet: 3 columns */
    @media (max-width: 1024px) {
        .bundle-products {
            grid-template-columns: repeat(3, 1fr); /* 3 columns for tablet-sized screens */
        }
    }
    
    /* Mobile: 2 columns */
    @media (max-width: 768px) {
        .bundle-products {
            grid-template-columns: repeat(3, 1fr); /* 3 columns for mobile-sized screens */
        }
    }
    
    /* Extra small screens: 1 column */
    @media (max-width: 480px) {
        .bundle-products {
            grid-template-columns: 1fr; /* 1 column for very small screens */
        }
    }
    
    .fixed-bottom {
        position: sticky;
        bottom: 10px;
        left: 0;
        width: 95%;
        border: solid 2px grey;
        background: #f2e2d5;
        padding: 15px;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        display: flex;
        z-index: 5;
        transform: translateY(-3px);
        align-items: center;
        justify-content: center;    
        margin-left: 2.5%;
        margin-top: 20px;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 8px 16px 0px, rgba(0, 0, 0, 0.21) 0px 24px 24px 0px, rgba(0, 0, 0, 0.13) 0px 50px 30px 0px, rgba(0, 0, 0, 0.04) 0px 90px 36px 0px, rgba(0, 0, 0, 0) 0px 140px 40px 0px;
    }
    
    .bundle-preview {
        align-items: center;
        width: 70%; /* Take up the full left side */
        display: flex;
        flex-wrap: wrap;
    }
    
    .bundle-pricing {
        width: 30%; /* Take up the right side */
        text-align: left;
    }
    .bundle-pricing p{
        margin-bottom: 0;
    }
    .bundle-pricing p strong{
          font-size: 1.2rem;
    }
    
    .remove-item {
        position: absolute;
        top: -5px;
        right: -5px;
        background: red;
        color: white;
        border-radius: 50%;
        cursor: pointer;
        font-size: 12px;
        width: 16px;
        height: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    
    .bundle-item-slot {
        display: inline-block;
        width: 150px;
        height: 150px;
        background: #cd9452;
        margin: 5px;
        position: relative;
        overflow: hidden; /* Ensures images don't overflow the slot */
        border: 1px solid ##d3d3d3;
    }
    
    
    .bundle-item-slot img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: none;  /* Initially hide the image */
    }
    
    .remove-item {
        position: absolute;
        top: 5px;  /* Adjust to move the button slightly inside the slot */
        right: 5px;  /* Move it to the top-right corner */
        background: red;
        color: white;
        border-radius: 50%; /* Make it a circle */
        cursor: pointer;
        font-size: 14px; /* Increase font size slightly for better visibility */
        width: 20px;  /* Set width of the circle */
        height: 20px; /* Set height of the circle */
        z-index: 10; /* Ensures it stays on top of the image */
        display: flex;  /* Use flexbox to center the "X" */
        justify-content: center;  /* Horizontally center the "X" */
        align-items: center;  /* Vertically center the "X" */
    }
    
    .remove-item::before {
        content: '';  /* Using the "times" symbol */
    }
    button.add-bundle-to-cart{
            background-color: #f2e2d5;
            color: white;
        }
    
     /* CSS other than mobile for Bundle Summary Sticky Box */
    @media (min-width: 480px) {
         .bundle-items{
            display: flex;
            flex-direction: row;
            column-gap: 2px;
            justify-content: flex-start;
            overflow-x: auto;
            padding-bottom: 2px;
            max-width: 95%;
        }
        
        .bundle-item-slot{
            /*border: 1px solid rgb(211, 211, 211);*/
            justify-content: center;
            align-items: center;
            text-align: center;
            display: flex;
            flex-shrink: 0;
        }
        
    }    
    
    @media (min-width: 480px) and (max-width: 1024px) {
        .bundle-summary{
          bottom: 4.2em;
        }
        .bundle-item-slot{
            width: 100px;
            height: 100px;
        }
    }
    @media (min-width: 480px) and (max-width: 692px) {
    .bundle-pricing p strong{
          font-size: 0.8rem;
    }
    .bundle-product{
          padding: 10px;
        }
    }
    
  /* Mobile CSS for Bundle Summary Sticky Box */
    @media (max-width: 480px) {
  /* Your CSS rules for mobile devices go here */
    .bundle-items{
            display: flex;
            flex-direction: row;
            column-gap: 2px;
            justify-content: flex-start;
            overflow-x: auto;
            padding-bottom: 2px;
        }
        
        .bundle-item-slot{
            width: 70px;
            height: 70px;
            /*border: 1px solid rgb(211, 211, 211);*/
            justify-content: center;
            align-items: center;
            text-align: center;
            display: flex;
            flex-shrink: 0;
        }
        
        .bundle-summary{
          display: flex; 
          flex-direction: column;
          bottom: 4.2em;
        }
        .bundle-preview{
          width: 100%;
        justify-content: center;
        }
        .bundle-pricing{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
        }
        
        button.add-bundle-to-cart{
            width: 100%;
        }
    }
    
    
  /* Mobile CSS for Bundle Products */
  @media (max-width: 480px) {
        .bundle-product img{
              height: auto;
        }
        .bundle-products{
          display: flex;
          flex-shrink: 0;
          flex-flow: wrap;
          width: 100%;
          gap: 15px;
          justify-content: space-between;
        }
        
        .bundle-product{
          width: 47%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 10px;
        }
        .add-to-bundle{
            margin-top: 0 !important;
        }
        .bundle-product h3{
            margin-bottom: 0 !important;
        }
  }