@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Outfit', sans-serif;
    background-color: #F8F9FA; /* Soft white/gray background for the app */
    -webkit-tap-highlight-color: transparent;
}

/* Hide scrollbar for horizontal scrolling elements */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Mobile App Frame constraint (for desktop view to look like a phone) */
.app-container {
    max-width: 480px;
    margin: 0 auto;
    background-color: #FFFFFF;
    min-height: 100vh;
    position: relative;
    box-shadow: 0 0 40px rgba(0,0,0,0.05);
    padding-bottom: 90px; /* Space for bottom nav */
}
.app-container-nospacing {
    max-width: 480px;
    margin: 0 auto;
    background-color: #FFFFFF;
    min-height: 100vh;
    position: relative;
    box-shadow: 0 0 40px rgba(0,0,0,0.05);
}

/* Soft backgrounds for products */
.bg-pastel-blue { background-color: #E6F0F9; }
.bg-pastel-green { background-color: #E2F2E9; }
.bg-pastel-pink { background-color: #F9E6E6; }
.bg-pastel-gray { background-color: #F3F4F6; }

/* Custom shadow for buttons/cards */
.shadow-soft {
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}
.shadow-float {
    box-shadow: 0 -10px 30px rgba(0,0,0,0.04);
}

/* Heart Icon interaction */
.heart-btn.active i {
    color: #FF3B30;
}
.heart-btn.active i.ph {
    display: none;
}
.heart-btn.active i.ph-fill {
    display: inline-block;
}
.heart-btn i.ph-fill {
    display: none;
}

/* Remove default appearance from inputs */
input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}