@font-face {
            font-family: 'Google Sans Display';
            src: local('Google Sans Display'), local('GoogleSansDisplay-Regular');
            font-weight: normal;
        }

        @font-face {
            font-family: 'Google Sans Display';
            src: local('Google Sans Display Bold'), local('GoogleSansDisplay-Bold');
            font-weight: bold;
        }

        body {
            background-color: #e5e7eb;
            
            margin: 0;
            font-family: 'Google Sans Display', 'Outfit', sans-serif;
            color: #3F2516;
            -webkit-tap-highlight-color: transparent;
        }

        
        #app-wrapper {
            max-width: 28rem;
            
            margin: 0 auto;
            height: 100vh;
            max-height: 100vh;
            background-color: #F9E9D3;
            position: relative;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        
        .screen {
            display: none !important;
            
            flex: 1;
            flex-direction: column;
            width: 100%;
            background-color: #F9E9D3;
            animation: fadeIn 0.3s ease-in-out;
            overflow-y: auto;
        }

        .screen.active {
            display: flex !important;
            
            flex-direction: column;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        
        .custom-radio:checked+div {
            border-color: #3F2516;
            background-color: #3F2516;
            color: #FFFFFF;
        }

        .landing-bg {
            background-color: #F9E9D3;
            background-image: linear-gradient(to bottom, rgba(249, 233, 211, 0) 20%, #F9E9D3 55%), url('./background-bijicokelat.png');
            background-size: 100% auto;
            background-position: top center;
            background-repeat: no-repeat;
        }

        
        #bottom-sheet-overlay {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(4px);
            z-index: 40;
            opacity: 0;
            transition: opacity 0.3s;
        }

        #bottom-sheet-overlay.active {
            display: block;
            opacity: 1;
        }

        #bottom-sheet {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: #FFFFFF;
            border-top-left-radius: 1.5rem;
            border-top-right-radius: 1.5rem;
            z-index: 50;
            transform: translateY(100%);
            visibility: hidden;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
            box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
            max-height: 85vh;
            overflow-y: auto;
        }

        #bottom-sheet.active {
            transform: translateY(0);
            visibility: visible;
        }

        
        .screen.active {
            animation: fadeIn 0.4s ease-out forwards !important;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(15px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeOut {
            from {
                opacity: 1;
                transform: translateY(0);
            }

            to {
                opacity: 0;
                transform: translateY(-15px);
            }
        }

        
        @keyframes fadeInUpStagger {
            from {
                opacity: 0;
                transform: translateY(25px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        
        .stagger-1 {
            animation: fadeInUpStagger 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both;
        }

        .stagger-2 {
            animation: fadeInUpStagger 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both;
        }

        .stagger-3 {
            animation: fadeInUpStagger 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.7s both;
        }

        
        #product-list {
            transition: opacity 0.25s ease-out, transform 0.25s ease-out;
            will-change: opacity, transform;
        }

        
        .product-card {
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .product-card:active {
            transform: scale(0.96);
            background-color: #fcfaf7;
        }

        .logo-animate {
            opacity: 0;
            animation: logoFadeIn 1.2s ease-out forwards;
        }

        @keyframes logoFadeIn {
            from {
                opacity: 0;
                transform: scale(0.95);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .page-screen {
            transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
            opacity: 1;
        }

        .page-hidden {
            opacity: 0;
            transform: translateY(10px);
            display: none !important;
        }