/* Скрыть debug indicator от Tailwind Play CDN */
        [data-tailwind-cdn-indicator] {
            display: none !important;
        }

        .fixed.right-4.bottom-4 {
            display: none !important;
        }

        /* Скрыть индикатор размера экрана (правый верхний угол) */
        .fixed.top-0.right-0,
        body>div:last-child[style*="fixed"] {
            display: none !important;
        }

        html {
            scroll-behavior: auto;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8fafc;
            /* Цвет прелоадера для safe area */
        }

        ::selection {
            background-color: #22c55e;
            /* green-500 */
            color: white;
        }

        * {
            -webkit-tap-highlight-color: transparent;
        }

        .glass-panel {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
        }

        .hl-green {
            color: #78be20;
        }

        .hl-bg-green {
            background-color: #78be20;
        }

        .hl-bg-dark {
            background-color: #242424;
        }

        /* Custom Scrollbar */
        @media (min-width: 1025px) {
            ::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }

            ::-webkit-scrollbar-track {
                background: transparent;
            }

            ::-webkit-scrollbar-thumb {
                background-color: transparent;
                border-radius: 10px;
                border: 2px solid transparent;
                background-clip: content-box;
            }

            ::-webkit-scrollbar-thumb:hover {
                background-color: transparent;
            }
        }

        /* Полная прозрачность/скрытие скроллбара для PWA и мобильных устройств */
        @media (max-width: 1024px),
        (display-mode: standalone) {
            ::-webkit-scrollbar {
                display: none !important;
                width: 0 !important;
                height: 0 !important;
            }

            html,
            body,
            #app,
            * {
                scrollbar-width: none !important;
                -ms-overflow-style: none !important;
            }

            /* Убираем резерв места под скроллбар для нативного вида приложения */
            [style*="scrollbar-gutter: stable"] {
                scrollbar-gutter: auto !important;
            }
        }

        .fade-enter-active,
        .fade-leave-active {
            transition: opacity 0.3s ease;
        }

        .fade-enter-from,
        .fade-leave-to {
            opacity: 0;
        }

        /* Hide spin buttons */
        input[type=number]::-webkit-outer-spin-button,
        input[type=number]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        input[type=number] {
            -moz-appearance: textfield;
            appearance: textfield;
        }

        /* Анимация элементов списка */
        .list-move {
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }


        .list-leave-active {
            transition: none !important;
            position: absolute !important;
            width: 100% !important;
            z-index: -1;
            pointer-events: none;
            opacity: 0 !important;
            visibility: hidden !important;
        }


        .list-leave-to {
            opacity: 0 !important;
        }

        /* Живая линия под категориями (Smart Underline) */
        .category-pill-highlight {
            position: absolute;
            height: 3px;
            bottom: 4px;
            /* Прижимаем к низу кнопок */
            border-radius: 2px;
            z-index: 0;
            transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
            pointer-events: none;
            /* Убираем тень, она не нужна линии */
        }

        .discount-pill-active {
            position: absolute;
            height: calc(100% - 8px);
            /* Учитываем p-1 (4px) сверху и снизу */
            top: 4px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
            transition: all 0.35s cubic-bezier(0.32, 0.72, 0, 1);
            z-index: 0;
            pointer-events: none;
        }

        /* Текст кнопок с эффектом Bloom (плавное наливание жирности) */
        .category-btn {
            color: #64748b;
            /* slate-500 */
            transition: color 0.4s ease, text-shadow 0.4s ease, opacity 0.1s ease;
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            font-weight: 500;
            cursor: pointer;
        }

        .category-btn:active {
            opacity: 0.5;
            /* iOS style tap feedback */
        }

        /* Техника Invisible Shadow: резервируем место под жирный текст */
        .category-btn::after {
            content: attr(data-text);
            content: attr(data-text) / "";
            height: 0;
            visibility: hidden;
            overflow: hidden;
            user-select: none;
            pointer-events: none;
            font-weight: 700;

            @media speech {
                display: none;
            }
        }

        .category-btn-active {
            color: #0f172a !important;
            /* slate-900 */
            /* Плавный Bloom эффект вместо прыжка font-weight */
            text-shadow: 0.4px 0 0.1px currentColor, -0.1px 0 0.1px currentColor;
        }

        /* Скрытие скроллбара */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

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

        /* Cart specific animation (fix duplication glitch) */
        /* Cart specific animation (fix duplication glitch) */
        /* Cart specific animation (iOS style) */
        .cart-list-container {
            /* Контейнер списка */
            position: relative;
        }

        .cart-list-move {
            transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
            transition-delay: 0.1s;
            /* Даем товару время начать исчезать */
        }

        .cart-list-enter-active {
            transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .cart-list-leave-active {
            transition: all 0.3s ease-in;
            /* Быстрое растворение */
            position: absolute !important;
            z-index: 50 !important;
            pointer-events: none;
        }

        /* Эффект Bloom: мягкое появление из глубины с легким блюром */
        .cart-list-enter-from {
            opacity: 0;
            transform: scale(0.85);
            filter: blur(8px);
        }

        /* Плавное исчезновение в глубину */
        .cart-list-leave-to {
            opacity: 0;
            transform: scale(0.9);
            filter: blur(4px);
        }

        /* Скрытие визуального скроллбара при сохранении функциональности */
        .cart-scroll-container {
            overflow-y: auto;
            overflow-anchor: none !important;
            -ms-overflow-style: none;
            /* IE and Edge */
            scrollbar-width: none;
            /* Firefox */

            /* Умная маска растворения: 16px сверху, 24px снизу */
            -webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 16px, black calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0px, black 16px, black calc(100% - 24px), transparent 100%);
        }

        .cart-scroll-container::-webkit-scrollbar {
            display: none;
            /* Chrome, Safari and Opera */
        }

        /* Безопасный отступ для скролла, чтобы товар не прижимался к подвалу */
        [key-sku] {
            scroll-margin-bottom: 80px;
        }

        .cart-spacer-transition {
            transition: height 0.4s ease-out;
        }

        /* Staggered Entrance Animation */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

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

        .stagger-appear {
            opacity: 0;
            animation: fadeInUp 0.4s ease-out forwards;
        }

        @keyframes subtle-shine {
            0% {
                background-position: 200% center;
            }

            100% {
                background-position: -200% center;
            }
        }

        .shine-effect {
            background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
            background-size: 200% 100%;
            animation: subtle-shine 4s infinite linear;
        }

        /* Mobile Hover Fixes */
        @media (hover: hover) {
            .btn-minus:hover {
                color: #ef4444;
            }

            .btn-plus:hover {
                color: #16a34a;
            }

            .btn-copy:not(.is-copied):hover {
                transform: scale(1.03) translateY(-2px);
                box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.4);
            }

            .btn-delete:not(.is-clearing):hover {
                color: #ef4444;
                border-color: #ef4444;
                box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.2);
                /* shadow-red-500/20 */
                transform: scale(1.05) translateY(-2px);
            }

            /* Add generic shadow-lg on hover for delete if needed, but the above shadow covers it */
            .btn-delete:not(.is-clearing):hover {
                box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.2), 0 4px 6px -4px rgba(239, 68, 68, 0.1);
            }

            .btn-receipt:hover {
                color: #16a34a;
                border-color: #16a34a;
                box-shadow: 0 10px 15px -3px rgba(22, 163, 74, 0.2), 0 4px 6px -4px rgba(22, 163, 74, 0.1);
                transform: scale(1.05) translateY(-2px);
            }

            .btn-receipt:hover .receipt-icon {
                transform: scale(1.1);
            }

            .btn-receipt:hover .receipt-lines {
                opacity: 1;
            }
        }

        /* Force Active States (Touch Feedback) */
        .btn-minus:active {
            color: #ef4444 !important;
            background-color: #e2e8f0;
        }

        .btn-plus:active {
            color: #16a34a !important;
            background-color: #e2e8f0;
        }

        /* Remove default tap highlight on mobile to let custom colors show */
        button {
            -webkit-tap-highlight-color: transparent;
        }

        /* Premium Logo Shine Animation */
        @keyframes logo-shine {
            0% {
                transform: translateX(-150%) skewX(-25deg);
                opacity: 0;
            }

            10% {
                opacity: 1;
            }

            90% {
                opacity: 1;
            }

            100% {
                transform: translateX(150%) skewX(-25deg);
                opacity: 0;
            }
        }

        .logo-container {
            position: relative;
            overflow: hidden;
        }

        .logo-container::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            height: 100%;
            background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
            transform: translateX(-150%) skewX(-25deg);
            animation: logo-shine 7s infinite ease-in-out;
            pointer-events: none;
        }

        /* Spotlight Effect for Product Cards */
        /* Spotlight Effect for Product Cards - Desktop Only */
        .spotlight-card {
            position: relative;
            overflow: hidden;
            --mouse-x: 50%;
            --mouse-y: 50%;
        }

        @media (hover: hover) {
            .spotlight-card::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),
                        rgba(120, 190, 32, 0.15),
                        transparent 40%);
                opacity: 0;
                transition: opacity 0.5s;
                pointer-events: none;
                z-index: 1;
            }

            .spotlight-card:hover::before {
                opacity: 1;
            }
        }

        /* Shake Animation for Error */
        @keyframes shake {

            0%,
            100% {
                transform: translateX(0);
            }

            20% {
                transform: translateX(-5px);
            }

            40% {
                transform: translateX(5px);
            }

            60% {
                transform: translateX(-5px);
            }

            80% {
                transform: translateX(5px);
            }
        }

        .animate-shake {
            animation: shake 0.4s cubic-bezier(.36, .07, .19, .97) both;
        }

        /* Heartbeat Animation for Price - Increase (green) */
        @keyframes heartbeat-up {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
                color: #16a34a;
            }

            100% {
                transform: scale(1);
            }
        }

        /* Heartbeat Animation for Price - Decrease (red) */
        @keyframes heartbeat-down {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
                color: #ef4444;
            }

            100% {
                transform: scale(1);
            }
        }

        .price-pulse-up {
            animation: heartbeat-up 0.25s ease-in-out infinite;
        }

        .price-pulse-down {
            animation: heartbeat-down 0.25s ease-in-out infinite;
        }

        /* Fade masks for smooth scroll edges */
        .mask-fade-bottom {
            -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
        }

        /* Горизонтальный fade через overlay - не используем mask чтобы не затрагивать кнопки */
        /* .mask-fade-x убран — CSS маска "тает" сами кнопки, а не только края скролла */

        /* Цветная тень для кнопки (Glow Effect) */
        .shadow-glow-green {
            box-shadow: 0 10px 40px -10px rgba(22, 163, 74, 0.5);
        }

        /* Класс для ограничения текста 2 строками с троеточием */
        .product-title-clamp {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-word;
            /* Перенос по словам */
        }

        /* Градиентный текст для итоговой цены (Premium) */
        .text-gradient-premium {
            background: linear-gradient(135deg, #16a34a 0%, #059669 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 2px 10px rgba(22, 197, 94, 0.2));
        }

        /* Animated Trash Lid */
        /* Only apply hover effects on devices that support hover */
        @media (hover: hover) {
            .btn-delete:hover .trash-lid {
                transform: rotate(-12deg) translateY(-2px);
            }

            .btn-delete:hover svg {
                color: #ef4444;
            }
        }

        .btn-delete.is-clearing .trash-lid {
            transform: rotate(-30deg) translateY(-4px);
        }

        /* Mobile Scroll Optimization */
        @media (hover: hover) {
            .product-card-interactive:hover {
                transform: scale(1.02);
                box-shadow: 0 8px 30px rgba(120, 190, 32, 0.15);
                border-color: #22c55e !important;
                background-color: white;
                z-index: 10;
            }
        }

        /* Active Card Feedback (Mobile Touch) */
        .active-card-feedback {
            transform: scale(1.02);
            box-shadow: 0 8px 30px rgba(120, 190, 32, 0.15);
            border-color: #22c55e !important;
            background-color: white;
            z-index: 10;
        }

        .btn-add-interactive {
            background-color: #0f172a;
            /* slate-900 */
        }

        .btn-add-interactive:active {
            transform: scale(0.75);
        }

        .btn-add-last-active {
            background-color: #15803d;
            /* green-700 */
        }

        .btn-add-last-active:active {
            transform: scale(0.95);
        }

        @media (hover: hover) {
            .btn-add-interactive:hover {
                background-color: #16a34a;
                /* green-600 */
            }

            .btn-add-last-active:hover {
                background-color: #166534;
                /* green-800 */
            }

            /* Group hover effect: scale button when card is hovered */
            .group:hover .btn-add-interactive {
                transform: scale(1.1);
            }
        }

        .product-card-interactive {
            user-select: none;
            -webkit-user-select: none;
            touch-action: pan-y;
            /* Explicitly allow vertical scroll */
        }

        /* Active Card Feedback (Mobile Touch) */
        .active-card-feedback {
            transform: scale(1.02);
            box-shadow: 0 8px 30px rgba(120, 190, 32, 0.15);
            border-color: #22c55e !important;
            background-color: white;
            z-index: 10;
        }

        /* iOS Toggle Switch */
        .ios-switch {
            position: relative;
            display: inline-block;
            width: 36px;
            height: 20px;
            flex-shrink: 0;
        }

        .ios-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #e2e8f0;
            transition: .4s;
            border-radius: 34px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            transition: .4s cubic-bezier(0.25, 0.8, 0.25, 1);
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        input:checked+.slider {
            background-color: #22c55e;
        }

        input:checked+.slider:before {
            transform: translateX(16px);
        }

        /* Film Grain Texture */
        .bg-noise {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 50;
            opacity: 0.03;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        }

        /* Анимация мягкого дыхания логотипа */
        @keyframes pulse-slow {

            0%,
            100% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.05);
                opacity: 0.9;
            }
        }

        .animate-pulse-slow {
            animation: pulse-slow 2s infinite ease-in-out;
        }

        /* Класс для скрытия прелоадера */
        .preloader-hidden {
            opacity: 0;
            pointer-events: none;
        }

        /* PWA Safe Area - паддинг для шапки */
        .pwa-header-padding {
            padding-top: calc(1.25rem + env(safe-area-inset-top, 0px));
        }

        /* Sticky элементы сдвигаются на высоту safe-area */
        .pwa-sticky-offset {
            top: env(safe-area-inset-top, 0px);
        }

        /* Компактный отступ для липкого поиска в ПВА */
        .search-bar-pwa-safe {
            padding-top: calc(1rem + env(safe-area-inset-top, 0px)) !important;
        }

        /* Desktop Island Cart Design */
        @media (min-width: 1024px) {
            .desktop-island-cart {
                position: fixed !important;
                top: 1rem !important;
                right: 1rem !important;
                bottom: 1rem !important;
                width: 400px !important;
                height: auto !important;
                border-radius: 2rem !important;

                /* Glassmorphism Premium: Gradient + Noise */
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6)) !important;
                backdrop-filter: blur(40px) saturate(180%) !important;
                -webkit-backdrop-filter: blur(40px) saturate(180%) !important;

                /* Borders & Shadows */
                border: 1px solid rgba(255, 255, 255, 0.6) !important;
                box-shadow:
                    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
                    inset 0 0 30px rgba(255, 255, 255, 0.3),
                    0 30px 60px -10px rgba(0, 0, 0, 0.12) !important;

                z-index: 50 !important;
                transform: none !important;
                left: auto !important;
                overflow: hidden !important;
                /* Force children to respect border-radius */
                /* Reset mobile left positioning */
            }

            /* Frosted Grain Texture Overlay */
            .desktop-island-cart::after {
                content: "";
                position: absolute;
                inset: 0;
                opacity: 0.04;
                pointer-events: none;
                z-index: 1;
                background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
            }

            /* Interactive Levitating Cart Items */
            .desktop-island-cart .cart-list-container>div {
                transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
                transform-origin: center center;
                backface-visibility: hidden;
            }

            .desktop-island-cart .cart-list-container>div:hover {
                /* 1. СВЕТ: Карточка становится ярче (почти белой) */
                background: rgba(255, 255, 255, 0.95) !important;

                /* 2. ДВИЖЕНИЕ: Легкий подъем и приближение */
                transform: translateY(-2px) scale(1.01);

                /* 3. ОБЪЕМ: Мягкая высокая тень + акцентный зеленый блик (border) */
                box-shadow:
                    0 12px 30px -8px rgba(0, 0, 0, 0.08),
                    0 0 0 1px rgba(22, 163, 74, 0.2) !important;

                border-color: transparent !important;
                /* Убираем стандартную рамку */
                z-index: 20 !important;
                /* Всплывает над соседями */
            }

            .main-content-island-adjust {
                /* Reserve space for the fixed cart (400px + 1rem gap + 1rem padding of cart position = 432px approx) */
                margin-right: 432px !important;

                /* Gradient Mask to fade content before it hits the cart */
                -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - 40px), transparent 100%);
                mask-image: linear-gradient(to right, black 0%, black calc(100% - 40px), transparent 100%);
            }
        }