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

        :root {
            --brand-blue: #2B3D51;
            --brand-bg: #F8FAFC;
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: var(--brand-bg);
            color: var(--brand-blue);
            -webkit-tap-highlight-color: transparent;
            overflow-x: hidden;
        }

        .category-pill.active {
            background-color: var(--brand-blue);
            color: white;
        }

        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        .modal-blur {
            backdrop-filter: blur(12px);
            background-color: rgba(255, 255, 255, 0.7);
        }

        .selection-card:active {
            transform: scale(0.96);
        }

        .modal-open {
            overflow: hidden;
            height: 100vh;
        }

        .promo-slide {
            min-width: 100%;
        }

        .tab-active {
            background: rgba(255,255,255,0.1);
            color: white;
        }

        .tab-inactive {
            color: rgba(255,255,255,0.5);
        }

        .view-loading-enter {
            animation: viewFadeIn 160ms ease-out;
        }

        .lazy-skeleton {
            position: relative;
            overflow: hidden;
            background: #e2e8f0;
        }

        .lazy-skeleton::after {
            content: '';
            position: absolute;
            top: 0;
            left: -150%;
            width: 140%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
            animation: lazyShimmer 1.05s ease-in-out infinite;
        }

        @keyframes lazyShimmer {
            100% { left: 150%; }
        }

        @keyframes viewFadeIn {
            from { opacity: 0; transform: translateY(6px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .cart-flyer {
            position: fixed;
            width: 32px;
            height: 32px;
            border-radius: 9999px;
            background: #0f172a;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 150;
            pointer-events: none;
            transition: transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 620ms ease;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.35);
        }

        .cart-bump {
            animation: cartBump 260ms ease-out;
        }

        @keyframes cartBump {
            0% { transform: scale(1); }
            45% { transform: scale(1.16); }
            100% { transform: scale(1); }
        }