body {
    font-family: 'Inter', sans-serif;
    background-color: #FDFBF7;
    color: #4A3E3D;
    scroll-behavior: smooth;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Quicksand', sans-serif;
}
.soft-shadow {
    box-shadow: 0 15px 35px -10px rgba(229, 169, 158, 0.25);
}
.bounce-slow {
    animation: bounce 3s infinite;
}
@keyframes bounce {
    0%, 100% { transform: translateY(-5%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
    50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1); }
}
.blob-bg {
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
}

/* Pattern Previews for Live Mattress Customizer */
.pat-awan {
    background-color: #E0F2FE;
    background-image: radial-gradient(#bae6fd 20%, transparent 20%), radial-gradient(#bae6fd 20%, transparent 20%);
    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;
}
.pat-sakura {
    background-color: #FFE4E6;
    background-image: radial-gradient(#fecdd3 20%, transparent 20%), radial-gradient(#fecdd3 20%, transparent 20%);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
}
.pat-teddy {
    background-color: #FEF3C7;
    background-image: radial-gradient(#fde68a 20%, transparent 20%);
    background-size: 25px 25px;
}
.pat-dino {
    background-color: #DCFCE7;
    background-image: radial-gradient(#bbf7d0 20%, transparent 20%), radial-gradient(#bbf7d0 20%, transparent 20%);
    background-size: 35px 35px;
    background-position: 0 0, 17.5px 17.5px;
}
.pat-stars {
    background-color: #F3E8FF;
    background-image: radial-gradient(#e9d5ff 20%, transparent 20%);
    background-size: 30px 30px;
}

/* Babymama polish: active category and modal UX */
.category-card.is-active {
    border-color: #E5A99E;
    background: #fff7f4;
    transform: translateY(-4px);
}
.product-card.is-hidden {
    display: none;
}
.product-card.is-highlighted {
    outline: 3px solid rgba(229, 169, 158, 0.4);
    outline-offset: 4px;
}
.no-products-note {
    display: none;
}
.no-products-note.is-visible {
    display: block;
}
body.modal-open {
    overflow: hidden;
}
.addon-row:has(input:checked) {
    border-color: #E5A99E;
    background: #fff7f4;
    box-shadow: 0 8px 18px -12px rgba(229, 169, 158, 0.65);
}
#liveOrderSummary strong {
    font-weight: 800;
}
#configModal > div {
    max-width: 34rem;
}

/* Mobile-first Babymama version polish */
@media (max-width: 640px) {
    body {
        font-size: 15px;
        background: #FDFBF7;
    }

    nav {
        padding: 0.75rem 1rem !important;
    }

    nav .text-2xl {
        font-size: 1.25rem !important;
    }

    nav svg {
        width: 2rem !important;
        height: 2rem !important;
    }

    header {
        padding: 1.75rem 1rem 2.25rem !important;
        gap: 1.5rem !important;
    }

    header h1 {
        font-size: 2.1rem !important;
        line-height: 1.08 !important;
        letter-spacing: -0.03em;
    }

    header p {
        font-size: 1rem !important;
        line-height: 1.55 !important;
    }

    #mattressCanvas {
        height: 13.5rem !important;
    }

    #kategori,
    #katalog,
    #testimoni,
    section.bg-gradient-to-br {
        padding: 2.5rem 1rem !important;
    }

    #kategori .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.85rem !important;
    }

    .category-card {
        padding: 1rem 0.75rem !important;
        border-radius: 1.15rem !important;
    }

    .category-card h3 {
        font-size: 0.95rem !important;
    }

    .product-card {
        border-radius: 1.35rem !important;
    }

    .product-card .h-60 {
        height: 10.5rem !important;
    }

    .product-card .p-6 {
        padding: 1rem !important;
    }

    .product-card h3 {
        font-size: 1.05rem !important;
    }

    .product-card p {
        font-size: 0.82rem !important;
    }

    .product-card button,
    .product-card a,
    header a,
    section.bg-gradient-to-br a {
        min-height: 46px;
    }

    #testimoni .rounded-2xl {
        border-radius: 1rem !important;
    }

    #configModal {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    #configModal > div {
        width: 100% !important;
        max-width: none !important;
        border-radius: 1.5rem 1.5rem 0 0 !important;
        max-height: 92vh;
        overflow-y: auto;
        padding: 1.25rem !important;
    }

    .fixed.bottom-6.right-6 {
        bottom: 1rem !important;
        right: 1rem !important;
        padding: 0.9rem !important;
        font-size: 1.35rem !important;
    }
}