/* Moved from app/Views/social/business_profile.php (inline <style>). Edit here, not in the view. */
        html {
            scroll-behavior: smooth;
        }
        body {
            font-family: "Proxima Nova", "Neue Helvetica", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #FAFAFA;
        }
        
        /* Modern Entrance Transitions & Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(24px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .animate-fade-in-up {
            opacity: 0;
            animation: fadeInUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
        .animation-delay-100 {
            animation-delay: 100ms;
        }
        .animation-delay-200 {
            animation-delay: 200ms;
        }
        .animation-delay-300 {
            animation-delay: 300ms;
        }
        html, body {
            max-width: 100%;
            overflow-x: hidden !important;
            width: 100%;
            -webkit-text-size-adjust: 100%;
            touch-action: pan-y;
        }

        /* Responsive typography scaling across devices */
        @media (max-width: 640px) {
            .text-\[7px\], .text-\[8px\] {
                font-size: 10px !important;
                letter-spacing: 0.03em !important;
            }
            .text-\[9px\] {
                font-size: 11px !important;
            }
            .text-\[10px\] {
                font-size: 12px !important;
                line-height: 1.4 !important;
            }
            .text-\[11px\] {
                font-size: 12.5px !important;
                line-height: 1.4 !important;
            }
            .text-xs {
                font-size: 13px !important;
                line-height: 1.5 !important;
            }
            .text-sm {
                font-size: 14px !important;
                line-height: 1.55 !important;
            }
            .text-base {
                font-size: 15px !important;
                line-height: 1.6 !important;
            }
            /* Hide desktop arrow buttons on touch screens in favor of natural swipe */
            .group:hover > button.absolute,
            .group > button.absolute {
                display: none !important;
            }
        }

        @media (min-width: 641px) {
            .text-\[7px\], .text-\[8px\] {
                font-size: 11px !important;
                letter-spacing: 0.05em !important;
            }
            .text-\[9px\] {
                font-size: 12px !important;
                letter-spacing: 0.04em !important;
            }
            .text-\[10px\] {
                font-size: 13px !important;
                line-height: 1.5 !important;
            }
            .text-\[11px\] {
                font-size: 13.5px !important;
                line-height: 1.5 !important;
            }
            .text-xs {
                font-size: 14px !important;
                line-height: 1.6 !important;
            }
            .text-sm {
                font-size: 15.5px !important;
                line-height: 1.65 !important;
            }
            .text-base {
                font-size: 17px !important;
                line-height: 1.7 !important;
            }
        }

        /* Improved text contrast */
        .text-gray-400 {
            color: #4B5563 !important; /* Slate-600 */
        }
        .text-gray-500 {
            color: #374151 !important; /* Slate-700 */
        }
        .text-slate-500 {
            color: #475569 !important;
        }

        /* Mobile touch scrolling enhancements */
        .overflow-x-auto {
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-x: contain;
            scroll-snap-type: x mandatory;
        }
        .overflow-x-auto > * {
            scroll-snap-align: start;
        }

        /* Safe area support for notch devices */
        @supports (padding: max(0px)) {
            header {
                padding-left: max(1rem, env(safe-area-inset-left));
                padding-right: max(1rem, env(safe-area-inset-right));
            }
            #floating-cart-btn-wrapper {
                bottom: max(1.5rem, calc(1.5rem + env(safe-area-inset-bottom)));
                right: max(1.5rem, calc(1.5rem + env(safe-area-inset-right)));
            }
            footer {
                padding-bottom: max(3.5rem, calc(3.5rem + env(safe-area-inset-bottom)));
            }
        }