/* Add custom CSS stylebody, .main-content, .store-home, .store-container {
    background-color: #e0f5e0 !important;
    background-image: linear-gradient(to bottom right, #f0fff0, #d0f0d0) !important;
    position: relative;
    overflow-x: hidden;
}

s below */

body, .main-content, .store-home, .store-container {
    background-color: #e0f5e0 !important;
    background-image: linear-gradient(to bottom right, #f0fff0, #d0f0d0) !important;
    position: relative;
    overflow-x: hidden;
}

.store-container::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background-image: 
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 24 24' fill='%2386efac' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21,4c0,0-2.5,4-10,4C6.5,8,3,10,3,13c0,2,1,3,1,3s-0.5-1,0-2c0.5-1,1.5-2,4-2c4,0,10-3,13-8'%3E%3C/path%3E%3Cpath d='M21,4c0,0-2.5,4-10,4C6.5,8,3,10,3,13c0,2,1,3,1,3s-0.5-1,0-2c0.5-1,1.5-2,4-2c4,0,10-3,13-8' stroke='%234ade80' stroke-width='1' fill='none'%3E%3C/path%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 24 24' fill='%2386efac' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,2c0,0-8,4-8,10c0,4,3,8,8,8s8-4,8-8C20,6,12,2,12,2z'%3E%3C/path%3E%3Cpath d='M12,2c0,0-8,4-8,10c0,4,3,8,8,8s8-4,8-8C20,6,12,2,12,2z' stroke='%234ade80' stroke-width='1' fill='none'%3E%3C/path%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='70' height='70' viewBox='0 0 24 24' fill='%2386efac' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,21.5c0,0,8-3,8-10c0-3-2-6-8-6s-8,3-8,6C4,18.5,12,21.5,12,21.5z'%3E%3C/path%3E%3Cpath d='M12,21.5c0,0,8-3,8-10c0-3-2-6-8-6s-8,3-8,6C4,18.5,12,21.5,12,21.5z' stroke='%234ade80' stroke-width='1' fill='none'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 
        10% 20%,
        80% 60%,
        30% 70%;
    animation: floatLeaves 20s infinite ease-in-out;
    opacity: 0.7;
}

.store-container::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background-image: 
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 24 24' fill='%2386efac' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21,4c0,0-2.5,4-10,4C6.5,8,3,10,3,13c0,2,1,3,1,3s-0.5-1,0-2c0.5-1,1.5-2,4-2c4,0,10-3,13-8'%3E%3C/path%3E%3Cpath d='M21,4c0,0-2.5,4-10,4C6.5,8,3,10,3,13c0,2,1,3,1,3s-0.5-1,0-2c0.5-1,1.5-2,4-2c4,0,10-3,13-8' stroke='%234ade80' stroke-width='1' fill='none'%3E%3C/path%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 24 24' fill='%2386efac' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,2c0,0-8,4-8,10c0,4,3,8,8,8s8-4,8-8C20,6,12,2,12,2z'%3E%3C/path%3E%3Cpath d='M12,2c0,0-8,4-8,10c0,4,3,8,8,8s8-4,8-8C20,6,12,2,12,2z' stroke='%234ade80' stroke-width='1' fill='none'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 
        70% 15%,
        20% 50%;
    animation: floatLeaves 25s infinite ease-in-out reverse;
    opacity: 0.5;
}

.bubble {
    position: fixed;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.5);
    z-index: 0;
    pointer-events: none;
}

.bubble:nth-child(1) {
    width: 20px;
    height: 20px;
    left: 10%;
    bottom: -20px;
    animation: rise 12s infinite ease-in;
}

.bubble:nth-child(2) {
    width: 15px;
    height: 15px;
    left: 30%;
    bottom: -15px;
    animation: rise 10s infinite ease-in 2s;
}

.bubble:nth-child(3) {
    width: 25px;
    height: 25px;
    left: 50%;
    bottom: -25px;
    animation: rise 15s infinite ease-in 1s;
}

.bubble:nth-child(4) {
    width: 18px;
    height: 18px;
    left: 70%;
    bottom: -18px;
    animation: rise 13s infinite ease-in 3s;
}

.bubble:nth-child(5) {
    width: 22px;
    height: 22px;
    left: 90%;
    bottom: -22px;
    animation: rise 14s infinite ease-in 0.5s;
}

.product-card, .category-card {
    background: rgba(255, 255, 255, 0.85) !important;
    border-radius: 15px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(8px) !important;
    transition: all 0.3s ease !important;
}

.product-card:hover, .category-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
}

.btn-primary, .add-to-cart-btn {
    background-color: #4ade80 !important;
    border-color: #4ade80 !important;
    color: white !important;
    border-radius: 50px !important;
    padding: 10px 20px !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover, .add-to-cart-btn:hover {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    transform: scale(1.05) !important;
}

@keyframes floatLeaves {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-20px) rotate(5deg);
    }
    50% {
        transform: translateY(-10px) rotate(-3deg);
    }
    75% {
        transform: translateY(-25px) rotate(2deg);
    }
}

@keyframes rise {
    0% {
        transform: translateY(100vh) scale(0.5);
        opacity: 0.7;
    }
    100% {
        transform: translateY(-100px) scale(1.2);
        opacity: 0;
    }
}

<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>