main#MainContent::before {
    content: "";
    display: block;
    width: 100%;
    height: 120px; /* Adjust wave height */
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="%238fd0dd" d="M0,96 C120,160,240,256,360,256 C480,256,600,160,720,128 C840,96,960,128,1080,160 C1200,192,1320,224,1440,192 L1440,320 L0,320 Z"></path></svg>') no-repeat bottom center / cover;
    
    position: relative;
    top: 0;
    left: 0;
    z-index: 2;
}

main#MainContent::after {
    content: "";
    display: block;
    width: 100%;
    height: 120px; /* Adjust wave height */
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="%238fd0dd" d="M0,96 C120,160,240,256,360,256 C480,256,600,160,720,128 C840,96,960,128,1080,160 C1200,192,1320,224,1440,192 L1440,320 L0,320 Z"></path></svg>') no-repeat bottom center / cover;
    position: relative;
    top: 0;
    left: 0;
    z-index: 2;
  transform: scaleY(-1)
}




/* ✅ Fix: Wrap the whole section inside a container */
.loop-your-box-container {
    background-color: #f3e6d3 !important;
    border: 2px solid #283849 !important;
    border-radius: 30px !important;
    padding: 20px !important;
    max-width: 700px !important;
    margin: 0 auto 20px auto !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* ✅ Fix: Ensure "Your Box" title is inside the container */
.loop-your-box-container .loop-bundle-size-selector-label {
    font-size: 28px !important;
    font-weight: bold !important;
    color: #283849 !important;
    text-align: center !important;
}

/* ✅ Fix: Selector Button Background */
.loop-btn-size-md.mx-2.mt-1 {
    background-color: #EABF86 !important; /* Change background */
    color: #283849 !important; /* Ensure text is readable */
    border: 2px solid #f3e6d3; /* Optional: Adds a border */
    font-weight: bold;
}

/* ✅ Fix: Selected Button Styling */
.loop-btn-size-md.mx-2.mt-1.loop-btn-selected {
    background-color: #283849 !important; /* Different background when selected */
    color: #EABF86 !important;
    border: 2px solid #283849;
}

/* ✅ Fix: Hover Effect */
.loop-btn-size-md.mx-2.mt-1:hover {
    background-color: #283849 !important; /* Slightly darker on hover */
    transition: background 0.3s ease-in-out;
}

/* ✅ Ensure size selector buttons stay in one row */
.loop-bundle-size-selector-wrapper {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: nowrap !important; /* Prevents wrapping */
    gap: 5px; /* Adds spacing between buttons */
}

.loop-bundle-size-selector {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    width: 100%;
}

/* ✅ Restrict max width ONLY on mobile & ensure buttons fit */
@media (max-width: 768px) {
    .loop-bundle-size-selector-wrapper {
        max-width: 400px !important;
        margin: 0 auto !important;
    }

    .loop-bundle-size-selector {
        flex-wrap: nowrap !important;
        display: flex !important;
        justify-content: center !important;
    }

    .loop-bundle-size-selector .loop-btn {
        flex: 1 !important; /* Make buttons equal width */
        min-width: 30% !important; /* Prevent overflow */
        max-width: 33% !important; /* Keep them aligned */
        text-align: center !important;
        white-space: nowrap !important; /* Prevent text from breaking */
    }
}

/* ✅ Fix: Free Shipping + Subscription Benefits Text */
.loop-bundle-progress-bar-container::after {
    content: "🥄Free Shipping on subscription orders in the US\A 🥄Ships monthly. Change products or cancel anytime";
    display: block !important;
    font-size: 13px !important;
    font-weight: bold !important;
    text-align: center !important;
    color: #283849 !important;
    margin-top: 5px !important;
    white-space: pre-line !important; /* Ensures line break */
}

/* ✅ Fix: Free Item Styling (Ensures Consistency) */
#free-item {
    max-width: 120px; /* Match other products */
    width: 100%; /* Ensure responsiveness */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#free-item img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

#free-item .loop-card-body {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}

/* ✅ Fix: Add "BONUS: Flavor in Development Included" Message */
.loop-selected-products::before {
    content: "🥄FREE: Exclusive Test Flavor Included Every Month!";
    display: block;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: #283849;
    margin-bottom: 10px;
    white-space: pre-line; /* Ensures the second line appears below the first */
}

/* ✅ Fix: Styling for Selected Items Counter */
.loop-bundle-number-of-products-quantity-added-text {
    font-size: 16px; /* Default size for normal text */
    font-weight: bold;
}

/* ✅ Hide the image container */
.loop-bundle-image-container {
    display: none !important;
}

/* ✅ Ensure the title is larger & aligned properly */
.loop-bundle-title-wrapper.pt-3 {
    font-size: 28px !important;
    font-weight: bold;
    text-align: left !important; /* Desktop: Left */
}

@media (max-width: 768px) {
    .loop-bundle-title-wrapper.pt-3 {
        text-align: center !important; /* Mobile: Center */
    }
}


/* Ensure "Monthly Subscription Box" fits on one line on mobile */
@media (max-width: 768px) {
    .loop-h1.loop-bundle-title {
        font-size: 28px !important;  /* Reduce font size for smaller screens */
  font-weight: bold;
        white-space: nowrap !important;  /* Prevent text from wrapping */
        overflow: hidden !important;  /* Hide overflow if necessary */
        text-overflow: ellipsis !important;  /* Add "..." if text overflows */
        max-width: 100% !important;  /* Ensure it does not exceed container width */
        display: block !important;  /* Ensure proper rendering */
        text-align: center !important;  /* Keep it centered */
    }
}
.loop-text-p2.m-0.loop-bundle-discount {
    display: none !important;
}
.loop-bundle-size-selector-wrapper {
    background-color: #f3e6d3 !important;
    border-radius: 30px !important;
    padding: 0px !important; /* Optional: Adds padding for better spacing */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Subtle shadow for depth */
}
.loop-bundle-size-selector-label {
    color: #283849 !important;
  font-size: 24px;
  font-weight: bold;
  }
.loop-products-available {
    background-color: #f3e6d3 !important;
    border-radius: 30px !important;
    padding: 20px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow */
    margin-bottom: 20px !important;
}

/* Ensure the background spans both containers seamlessly */
.loop-products-align {
    border-radius: inherit !important;
    overflow: hidden;
}

/* Adjust individual product cards */
.loop-bundle-product-card {
    background: #EABF86 !important;
  border: 4px solid #283849 !important;
  border-radius: 30px !important;
  Padding: 5px !important;
    text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
/* Positioning the title correctly near the products */
.loop-bundle-select-product-title {
    background-color: transparent !important;
    margin-top: 5px !important;
    margin-bottom: -18px !important;
    padding-top: 0 !important;
  padding-bottom: 10 !important;
    text-align: center;
    font-size: 24px;
    color: #283849;
    font-weight: bold;
    display: block;
    z-index: 2;
    position: relative;
}
.loop-bundle-product-title {
    font-weight: bold !important; /* Ensures bold text */
    color: #283849 !important; /* Dark blue color */
    font-size: 1.2em !important;
    text-align: center !important;
}

/* Ensure the background wraps around the title and products */
.loop-products-available {
    background-color: #f3e6d3 !important;
    border-radius: 30px !important;
    padding: 30px 20px 20px 20px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.loop-bundle-description {
    background-color: #f3e6d3 !important;
    border-radius: 30px !important;
  max-width: 90% !important;
}
/* Increase space between product-description and selector-label */
.loop-bundle-size-container-wrapper {
    margin-bottom: 25px !important; /* Adjust the value as needed */
}

.loop-bundle-size-selector-wrapper {
    margin-top: 25px !important; /* Adjust the value as needed */
}
/* ✅ Main Container Styling */
.loop-bundle-description {
    display: grid !important;
    grid-template-columns: auto auto !important;  /* Two columns that shrink to fit */
    justify-content: center !important;
    gap: 10px 20px !important;
    background-color: #f3e6d3 !important;
    border-radius: 30px !important;
    padding: 10px 15px !important;
    max-width: 800px;
    margin: 0 auto;
    list-style-type: none;
    text-align: left !important;
    box-sizing: border-box;
}

/* ✅ General Text Styling */
.loop-bundle-description h4,
.loop-bundle-description h3,
.loop-bundle-description div {
    color: #283849 !important;
    font-size: 16px !important;
    font-weight: bold !important;
    line-height: 1.5;
    margin: 0 0 10px 0;
    padding-left: 30px;
    position: relative;
    list-style: none;
    text-align: left !important;
    word-break: break-word;
}
.loop-product-title {
    font-weight: bold !important; /* Ensures bold text */
    color: #283849 !important; /* Dark blue color */
    font-size: 1.2em !important;
    text-align: center !important;
}

/* ✅ Custom Checkmark Styling */
.loop-bundle-description h4::before,
.loop-bundle-description h3::before,
.loop-bundle-description div::before {
    content: "🥜";
    font-size: 16px;
    position: absolute;
    left: 0;
    top: 0;
}

/* ✅ Optional: Adjust Heading Styles */
.loop-bundle-description h2 {
    grid-column: span 2 !important;
    text-align: center !important;
    font-size: 24px !important;
    color: #283849 !important;
    margin-bottom: 5px;
}

/* ✅ Responsive Shrink-to-Fit */
@media (max-width: 768px) {
    .loop-bundle-description {
        grid-template-columns: auto auto !important;  /* Keeps two columns */
        gap: 5px 10px !important;
    }

    .loop-bundle-description h4,
    .loop-bundle-description h3,
    .loop-bundle-description div {
        font-size: 14px !important;  /* Adjust font size for smaller screens */
        padding-left: 25px;
    }
}

/* Keep the list in two columns on mobile */
@media (max-width: 768px) {
    .loop-bundle-description ul {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .loop-bundle-description li {
        flex: 1 1 45% !important; /* Shrink to fit */
        list-style-position: inside !important;
    }
}
.loop-drawer-body {
  background-color: #f3e6d3 !important;
}
.loop-drawer-header {
  background-color: #f3e6d3 !important;
}
.loop-drawer-footer {
  background-color: #f3e6d3 !important;
}
.loop-product-title {
    font-weight: bold !important; /* Ensures bold text */
    color: #283849 !important; /* Dark blue color */
    font-size: 1.2em !important;
    text-align: center !important;
}
.loop-drawer-body p {
  color: #283849 !important;  /* Your dark navy for contrast */
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

.loop-bundle-discount-text-box {
  display: none
} 

.loop-bundle-size-selector-wrapper {
    margin-top: 25px !important;
    padding: 25px !important;
} 

.loop-bundle-select-product-title {
    margin: 16px 0px -36px 0px !important;
    padding-top: 1px !important; 
}