/* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
        
        .fade-in { animation: fadeIn 0.15s ease-out; }
        @keyframes fadeIn {
            from { opacity: 0.75; }
            to { opacity: 1; }
        }
        .nav-hidden { transform: translateY(-100%); }
        
        /* Cart Drawer Backdrop */
        .drawer-backdrop { background-color: rgba(0,0,0,0.5); }

        /* Page skeleton (static in HTML shells; replaced by switchTab) */
        .page-skeleton { pointer-events: none; }
        .page-skeleton .skel {
            background: #e8eef5;
            border-radius: 12px;
            position: relative;
            overflow: hidden;
        }
        .page-skeleton .skel::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.75) 50%, transparent 100%);
            transform: translateX(-100%);
            animation: skel-shimmer 1.35s ease-in-out infinite;
        }
        @keyframes skel-shimmer {
            100% { transform: translateX(100%); }
        }
        .skel-hero {
            height: min(60vh, 520px);
            border-radius: 24px;
            background: #1a2332 !important;
        }
        @media (min-width: 768px) {
            .skel-hero { height: 65vh; }
        }
        .skel-hero::after {
            background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%) !important;
        }
        .skel-h1 { height: 2.75rem; width: min(420px, 70%); }
        .skel-h2 { height: 2rem; width: min(280px, 55%); }
        .skel-line { height: 0.9rem; width: 100%; margin-top: 0.65rem; }
        .skel-line.w-80 { width: 80%; }
        .skel-line.w-60 { width: 60%; }
        .skel-line.w-40 { width: 40%; }
        .skel-card {
            aspect-ratio: 1 / 1.15;
            border-radius: 16px;
            background: #f1f5f9 !important;
        }
        .skel-card-body {
            height: 4.5rem;
            border-radius: 0 0 16px 16px;
            background: #f8fafc !important;
            margin-top: -4px;
        }
        .skel-block { height: 8rem; border-radius: 20px; }
        .skel-sidebar { min-height: 280px; border-radius: 20px; }
        .skel-summary { min-height: 360px; border-radius: 20px; }
        @media (prefers-reduced-motion: reduce) {
            .page-skeleton .skel::after { animation: none; }
            .fade-in { animation: none; }
        }