:root {
    --menu-primary-color: #1F1310;
    --menu-secondary-color: #3A2620;
    --menu-bg-color: #F9FAFB;
    --menu-btn-color: #22C55E;
    --menu-btn-hover-color: #16A34A;
    --menu-btn-text-color: #FFFFFF;
    --menu-btn-shadow: rgba(34, 197, 94, 0.4);
    --menu-btn-light-bg: #E8F8EE;
    --menu-btn-light-border: #A7F3D0;
    --menu-btn-dark-text: #065F46;
    --menu-text-color: #111827;
    --menu-text-muted: #6B7280;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--menu-bg-color, #F9FAFB);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

        ::-webkit-scrollbar {
            width: 5px;
            height: 4px;
        }

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

        ::-webkit-scrollbar-thumb {
            background: #D1D5DB;
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #9CA3AF;
        }

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

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

        .card-hover {
            transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
        }

        .card-hover:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
        }

        @keyframes badge-pulse {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(255, 68, 31, 0.4);
            }

            50% {
                box-shadow: 0 0 0 6px rgba(255, 68, 31, 0);
            }
        }

        .badge-pulse {
            animation: badge-pulse 2s infinite;
        }

        .overlay-bg {
            background: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
        }

        .glass {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .btn-glow {
            box-shadow: 0 4px 20px rgba(255, 68, 31, 0.35);
        }

        .btn-glow:hover {
            box-shadow: 0 6px 28px rgba(255, 68, 31, 0.5);
        }

        .btn-glow-whatsapp {
            box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35);
        }

        .btn-glow-whatsapp:hover {
            box-shadow: 0 6px 28px rgba(37, 211, 102, 0.5);
        }

        .safe-bottom {
            padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px);
        }

        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Admin panel styles */
        .admin-input {
            width: 100%;
            padding: 0.5rem 0.75rem;
            border: 1.5px solid #E5E7EB;
            border-radius: 0.75rem;
            font-size: 1rem;
            font-family: 'Inter', sans-serif;
            transition: border-color 0.2s, box-shadow 0.2s;
            background: white;
            color: #111827;
        }

        .admin-input:focus {
            outline: none;
            border-color: #FF441F;
            box-shadow: 0 0 0 3px rgba(255, 68, 31, 0.1);
        }

        .admin-label {
            display: block;
            font-size: 0.75rem;
            font-weight: 600;
            color: #374151;
            margin-bottom: 0.25rem;
        }

        /* PIN dots */
        .pin-dot {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 2px solid #D1D5DB;
            transition: all 0.2s;
        }

        .pin-dot.filled {
            background: #FF441F;
            border-color: #FF441F;
            transform: scale(1.1);
        }

        .pin-dot.error {
            border-color: #EF4444;
            background: #EF4444;
        }

        /* ==========================================================================
           TURBO / RAPPI FOOD - MODERN THEME STYLES (100% EXPLICIT CSS)
           ========================================================================== */

        /* Main Page Container */
        .food-page-wrapper {
            min-height: 100vh;
            background-color: var(--menu-bg-color, #F9FAFB);
            display: flex;
            flex-direction: column;
            width: 100%;
            overflow-x: hidden;
        }

        .food-mobile-frame {
            width: 100%;
            max-width: 100%;
            background-color: var(--menu-bg-color, #F9FAFB);
            min-height: 100vh;
            position: relative;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
            margin: 0 auto;
        }

        /* Dark Espresso Header Section */
        .food-espresso-header {
            background-color: var(--menu-primary-color, #1F1310) !important;
            color: #FFFFFF !important;
            padding: 16px 16px 42px 16px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .food-top-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            min-height: 70px;
            width: 100%;
        }

        .food-back-circle-btn {
            width: 40px;
            height: 40px;
            min-width: 40px;
            border-radius: 50%;
            background-color: #FFFFFF;
            color: #111827;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
            border: none;
            cursor: pointer;
            transition: transform 0.15s ease;
            flex-shrink: 0;
            z-index: 2;
        }

        .food-back-circle-btn:active {
            transform: scale(0.92);
        }

        .food-brand-header {
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex: 1;
            min-width: 0;
            height: 70px;
            margin: 0 auto;
            text-align: center;
            padding: 0 10px;
            user-select: none;
        }

        .food-brand-logo {
            height: 70px !important;
            max-height: 70px !important;
            width: auto !important;
            max-width: min(300px, calc(100vw - 120px)) !important;
            object-fit: contain !important;
            border-radius: 0 !important;
            border: none !important;
            background: transparent !important;
            display: block !important;
            margin: 0 auto !important;
            filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
            transition: transform 0.2s ease;
        }

        .food-brand-logo:hover {
            transform: scale(1.02);
        }

        .food-brand-title {
            color: #FFFFFF;
            font-size: 19px;
            font-weight: 800;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .food-top-cart-btn {
            width: 40px;
            height: 40px;
            min-width: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.12);
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            border: none;
            cursor: pointer;
            transition: background 0.2s ease;
            flex-shrink: 0;
            z-index: 2;
        }

        .food-top-cart-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .food-top-cart-badge {
            position: absolute;
            top: -2px;
            right: -2px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background-color: #FF441F;
            color: #FFFFFF;
            font-size: 10px;
            font-weight: 900;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }

        /* Delivery Pill */
        .food-delivery-pill-wrapper {
            display: flex;
            justify-content: center;
        }

        .food-delivery-pill {
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 9999px;
            padding: 6px 18px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #FFFFFF;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        .food-delivery-bolt {
            font-size: 14px;
        }

        .food-delivery-label {
            font-size: 12px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.9);
        }

        .food-delivery-time {
            font-size: 13px;
            font-weight: 900;
            font-style: italic;
            color: #FFFFFF;
            letter-spacing: 0.3px;
        }

        /* Search Box Pill */
        .food-search-box {
            background: var(--menu-secondary-color, #2C1E1A) !important;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 9999px;
            padding: 10px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
        }

        .food-search-input {
            width: 100%;
            background: transparent;
            border: none;
            outline: none;
            font-size: 13px;
            color: #FFFFFF;
        }

        .food-search-input::placeholder {
            color: #9CA3AF;
        }

        /* Horizontal Category Tabs Bar & Slider */
        .food-category-tabs-container {
            width: 100%;
            position: relative;
        }

        .cursor-grab {
            cursor: grab;
        }

        .cursor-grabbing {
            cursor: grabbing !important;
            user-select: none !important;
        }

        .food-category-tabs {
            display: flex;
            width: 100%;
            overflow-x: auto;
            padding: 4px 8px 6px 8px;
            scrollbar-width: none;
            -ms-overflow-style: none;
            -webkit-overflow-scrolling: touch;
            justify-content: safe center;
        }

        .food-category-tabs::-webkit-scrollbar {
            display: none;
        }

        .food-category-tabs-track {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin: 0 auto;
            flex-shrink: 0;
            min-width: min-content;
            width: max-content;
        }

        .food-tab-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
            transition: opacity 0.2s ease;
            border: none;
            background: transparent;
            padding: 0;
        }

        .food-tab-label {
            font-size: 12px;
            font-weight: 700;
            margin-top: 4px;
            white-space: nowrap;
        }

        .food-tab-btn.active .food-tab-label {
            color: #FFFFFF;
        }

        .food-tab-btn:not(.active) .food-tab-label {
            color: rgba(255, 255, 255, 0.6);
        }

        .food-tab-indicator {
            height: 3px;
            background-color: #FFFFFF;
            border-radius: 9999px;
            width: 100%;
            margin-top: 5px;
        }

        /* Hero Gastronomic Banner */
        .food-hero-banner {
            background: linear-gradient(135deg, var(--menu-primary-color, #180E0C) 0%, var(--menu-secondary-color, #2A1813) 50%, var(--menu-primary-color, #180E0C) 100%) !important;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 20px;
            position: relative;
            overflow: hidden;
            min-height: 145px;
            display: flex;
            align-items: center;
            margin: 4px 0;
        }

        .food-hero-content {
            padding: 16px;
            width: 55%;
            z-index: 2;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .food-hero-subtitle {
            font-size: 11px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.85);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .food-hero-title {
            font-size: 21px;
            font-weight: 900;
            color: #FFFFFF;
            letter-spacing: -0.5px;
            line-height: 1.15;
            margin-top: 2px;
            text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
        }

        .food-hero-desc {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.7);
            margin-top: 4px;
        }

        .food-hero-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 13px;
            border-radius: 9999px;
            background: #FFFFFF;
            color: #1F1310;
            font-size: 11px;
            font-weight: 800;
            text-decoration: none;
            transition: all 0.2s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
            cursor: pointer;
            border: 0;
            margin-top: 6px;
        }
        .food-hero-btn:hover {
            transform: scale(1.04);
            background: #FAF7F4;
        }

        .food-hero-image-wrap {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 55%;
            overflow: hidden;
        }

        .food-hero-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        .food-hero-gradient-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to right, var(--menu-primary-color, #180E0C) 0%, rgba(24, 14, 12, 0) 100%) !important;
        }

        /* Body Section with Background Variable */
        .food-white-body {
            background-color: var(--menu-bg-color, #F9FAFB) !important;
            color: var(--menu-text-color, #111827);
            border-top-left-radius: 28px;
            border-top-right-radius: 28px;
            margin-top: -30px;
            padding-top: 24px;
            padding-bottom: 120px;
            flex: 1;
            z-index: 10;
            box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
        }

        /* Circular Subcategories Row */
        .food-circles-container {
            padding: 0 16px;
            margin-bottom: 22px;
        }

        .food-circles-scroll {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            overflow-x: auto;
            padding-bottom: 4px;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .food-circles-scroll::-webkit-scrollbar {
            display: none;
        }

        .food-circle-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            flex-shrink: 0;
            width: 72px;
            text-align: center;
        }

        .food-circle-avatar {
            width: 62px;
            height: 62px;
            border-radius: 50%;
            background-color: #EEF2F6;
            padding: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #E5E7EB;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s ease, border-color 0.2s ease;
        }

        .food-circle-avatar.active {
            border: 2.5px solid #FF441F;
            background-color: #FFF0ED;
            transform: scale(1.06);
        }

        .food-circle-avatar img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }

        .food-circle-label {
            font-size: 11px;
            font-weight: 700;
            color: #1F2937;
            margin-top: 6px;
            max-width: 70px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 1.2;
        }

        .food-circle-label.active {
            color: #FF441F;
            font-weight: 800;
        }

        /* Category Section Header */
        .food-section-header {
            padding: 0 16px;
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .food-section-title {
            font-size: 20px;
            font-weight: 900;
            color: #111827;
            letter-spacing: -0.4px;
        }

        .food-section-count {
            font-size: 12px;
            color: #9CA3AF;
            font-weight: 600;
        }

        .food-ver-mas-btn {
            background-color: #F0F2F5;
            color: #374151;
            font-size: 12px;
            font-weight: 700;
            padding: 6px 14px;
            border-radius: 9999px;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: background 0.15s ease;
        }

        .food-ver-mas-btn:hover {
            background-color: #E5E7EB;
        }

        /* Dishes List */
        .food-dishes-list {
            padding: 0 16px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        /* Floating Bottom Navigation Dock */
        .food-bottom-dock {
            position: fixed !important;
            bottom: 18px !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            z-index: 100 !important;
            background: rgba(255, 255, 255, 0.96) !important;
            backdrop-filter: blur(14px) !important;
            -webkit-backdrop-filter: blur(14px) !important;
            border: 1px solid rgba(0, 0, 0, 0.08) !important;
            border-radius: 9999px !important;
            padding: 8px 36px !important;
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 3px 10px rgba(0, 0, 0, 0.06) !important;
            display: flex !important;
            align-items: center !important;
            gap: 44px !important;
        }

        .food-dock-btn {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 3px !important;
            background: transparent !important;
            border: none !important;
            cursor: pointer !important;
            padding: 2px 6px !important;
            transition: transform 0.15s ease, color 0.15s ease !important;
        }

        .food-dock-btn:active {
            transform: scale(0.92) !important;
        }

        .food-dock-label {
            font-size: 11px !important;
            font-weight: 800 !important;
        }

        /* Floating Cart Bar */
        .food-floating-cart-bar {
            position: fixed !important;
            bottom: 84px !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            z-index: 99 !important;
            width: 90% !important;
            max-width: 440px !important;
            background-color: var(--menu-btn-color, #22C55E) !important;
            color: var(--menu-btn-text-color, #FFFFFF) !important;
            border-radius: 18px !important;
            padding: 12px 18px !important;
            box-shadow: 0 12px 28px var(--menu-btn-shadow, rgba(34, 197, 94, 0.4)) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            border: none !important;
            cursor: pointer !important;
            transition: transform 0.15s ease !important;
        }

        .food-floating-cart-bar svg,
        .food-floating-cart-bar * {
            color: var(--menu-btn-text-color, #FFFFFF) !important;
            stroke: var(--menu-btn-text-color, #FFFFFF) !important;
        }

        .food-floating-cart-bar:active {
            transform: translateX(-50%) scale(0.98) !important;
        }

        /* ==========================================================================
           HORIZONTAL PRODUCT GALLERY (DESLIZABLE CON AL MENOS 20 PRODUCTOS)
           ========================================================================== */
        .food-gallery-row {
            display: flex !important;
            gap: 14px !important;
            overflow-x: auto !important;
            padding: 6px 16px 16px 16px !important;
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
        }

        .food-gallery-row::-webkit-scrollbar {
            display: none !important;
        }

        .food-gallery-card {
            width: 156px !important;
            min-width: 156px !important;
            max-width: 156px !important;
            display: flex !important;
            flex-direction: column !important;
            position: relative !important;
            background: transparent !important;
            cursor: pointer !important;
            flex-shrink: 0 !important;
        }

        .food-gallery-img-wrapper {
            width: 100% !important;
            height: 148px !important;
            position: relative !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: rgba(0, 0, 0, 0.04) !important;
            border-radius: 18px !important;
            overflow: hidden !important;
            border: 1px solid rgba(0, 0, 0, 0.06) !important;
        }

        .food-gallery-img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
        }

        .food-card-add-btn {
            position: absolute !important;
            top: 8px !important;
            right: 8px !important;
            width: 34px !important;
            height: 34px !important;
            border-radius: 50% !important;
            background-color: var(--menu-btn-color, #22C55E) !important;
            color: var(--menu-btn-text-color, #FFFFFF) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            box-shadow: 0 4px 10px var(--menu-btn-shadow, rgba(34, 197, 94, 0.4)) !important;
            border: none !important;
            cursor: pointer !important;
            transition: transform 0.15s ease, background-color 0.2s ease !important;
            z-index: 10 !important;
        }

        .food-card-add-btn svg,
        .food-card-add-btn * {
            color: var(--menu-btn-text-color, #FFFFFF) !important;
            stroke: var(--menu-btn-text-color, #FFFFFF) !important;
        }

        .food-card-add-btn:hover {
            background-color: var(--menu-btn-hover-color, #16A34A) !important;
        }

        .food-card-add-btn:active {
            transform: scale(0.9) !important;
        }

        /* Stepper Pill inside card */
        .food-card-stepper-pill {
            position: absolute !important;
            top: 8px !important;
            left: 8px !important;
            right: 8px !important;
            background: #FFFFFF !important;
            border: 1px solid #E5E7EB !important;
            border-radius: 9999px !important;
            padding: 4px 8px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
            z-index: 10 !important;
        }

        .food-card-stepper-btn {
            width: 26px !important;
            height: 26px !important;
            border-radius: 50% !important;
            border: none !important;
            background: transparent !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            cursor: pointer !important;
            color: #374151 !important;
        }

        .food-card-stepper-btn:active {
            background: #F3F4F6 !important;
        }

        .food-card-stepper-qty {
            font-size: 13px !important;
            font-weight: 800 !important;
            color: #111827 !important;
        }

        .food-gallery-price {
            font-size: 16px !important;
            font-weight: 900 !important;
            color: #111827 !important;
            margin-top: 8px !important;
            line-height: 1 !important;
        }

        .food-gallery-title {
            font-size: 13px !important;
            font-weight: 700 !important;
            color: #1F2937 !important;
            margin-top: 4px !important;
            line-height: 1.25 !important;
            display: -webkit-box !important;
            -webkit-line-clamp: 2 !important;
            -webkit-box-orient: vertical !important;
            overflow: hidden !important;
        }

        .food-gallery-subtitle {
            font-size: 12px !important;
            color: #6B7280 !important;
            margin-top: 2px !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }

        .food-gallery-unit-price {
            font-size: 11px !important;
            color: #9CA3AF !important;
            margin-top: 1px !important;
        }

        /* ==========================================================================
           FLOATING CART DOCK (IMAGE 1)
           ========================================================================== */
        .food-cart-floating-wrapper {
            position: fixed !important;
            bottom: 16px !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            z-index: 100 !important;
            width: 92% !important;
            max-width: 440px !important;
            display: flex !important;
            flex-direction: column !important;
            box-shadow: 0 14px 35px var(--menu-btn-shadow, rgba(34, 197, 94, 0.4)) !important;
            border-radius: 28px !important;
            overflow: hidden !important;
        }

        .food-cart-min-banner {
            display: none !important;
        }

        .food-cart-green-bar {
            background-color: var(--menu-btn-color, #22C55E) !important;
            color: var(--menu-btn-text-color, #FFFFFF) !important;
            padding: 10px 16px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
        }

        .food-cart-green-bar svg,
        .food-cart-green-bar * {
            color: var(--menu-btn-text-color, #FFFFFF) !important;
        }

        .food-cart-left-info {
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
        }

        .food-cart-thumb-box {
            position: relative !important;
            width: 42px !important;
            height: 42px !important;
            border-radius: 12px !important;
            background: #FFFFFF !important;
            overflow: hidden !important;
            border: 2px solid #FFFFFF !important;
            box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
        }

        .food-cart-thumb-img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
        }

        .food-cart-thumb-badge {
            position: absolute !important;
            bottom: -2px !important;
            right: -2px !important;
            background: #111827 !important;
            color: #FFFFFF !important;
            font-size: 10px !important;
            font-weight: 900 !important;
            width: 17px !important;
            height: 17px !important;
            border-radius: 50% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            border: 1.5px solid #FFFFFF !important;
        }

        .food-cart-text-qty {
            font-size: 12px !important;
            font-weight: 600 !important;
            color: var(--menu-btn-text-color, #FFFFFF) !important;
            opacity: 0.9 !important;
            line-height: 1.1 !important;
        }

        .food-cart-text-price {
            font-size: 19px !important;
            font-weight: 900 !important;
            color: var(--menu-btn-text-color, #FFFFFF) !important;
            line-height: 1.2 !important;
        }

        .food-cart-ver-canasta-btn {
            background-color: var(--menu-btn-hover-color, #16A34A) !important;
            color: var(--menu-btn-text-color, #FFFFFF) !important;
            font-size: 13.5px !important;
            font-weight: 800 !important;
            padding: 9px 20px !important;
            border-radius: 9999px !important;
            border: none !important;
            cursor: pointer !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
            transition: transform 0.15s ease, background 0.15s ease !important;
        }

        .food-cart-ver-canasta-btn:active {
            transform: scale(0.95) !important;
        }

        /* ==========================================================================
           FULL CART VIEW / CANASTA SCREEN (IMAGE 2)
           ========================================================================== */
        .food-cart-page-overlay {
            position: fixed !important;
            inset: 0 !important;
            z-index: 150 !important;
            background: #FFFFFF !important;
            display: flex !important;
            flex-direction: column !important;
            overflow-y: auto !important;
        }

        .food-cart-page-header {
            display: flex !important;
            align-items: center !important;
            gap: 16px !important;
            padding: 16px 20px !important;
            background: #FFFFFF !important;
            border-bottom: 1px solid #F3F4F6 !important;
            position: sticky !important;
            top: 0 !important;
            z-index: 20 !important;
        }

        .food-cart-back-btn {
            width: 38px !important;
            height: 38px !important;
            border-radius: 50% !important;
            background: #F3F4F6 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            border: none !important;
            cursor: pointer !important;
            color: #111827 !important;
            transition: transform 0.15s ease !important;
        }

        .food-cart-back-btn:active {
            transform: scale(0.92) !important;
        }

        .food-cart-page-title {
            font-size: 18px !important;
            font-weight: 800 !important;
            color: #111827 !important;
        }

        /* Cart Item Row */
        .food-cart-item-row {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            padding: 16px 20px !important;
            border-bottom: 1px solid #F9FAFB !important;
            background: #FFFFFF !important;
        }

        .food-cart-item-left {
            display: flex !important;
            align-items: center !important;
            gap: 14px !important;
            flex: 1 !important;
            min-width: 0 !important;
        }

        .food-cart-item-thumb-box {
            position: relative !important;
            width: 58px !important;
            height: 58px !important;
            border-radius: 14px !important;
            background: #F9FAFB !important;
            overflow: hidden !important;
            flex-shrink: 0 !important;
            border: 1px solid #F3F4F6 !important;
        }

        .food-cart-item-thumb-img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
        }

        .food-cart-edit-badge {
            position: absolute !important;
            top: 4px !important;
            left: 4px !important;
            background: #FFFFFF !important;
            border-radius: 50% !important;
            width: 20px !important;
            height: 20px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
        }

        .food-cart-item-info {
            flex: 1 !important;
            min-width: 0 !important;
        }

        .food-cart-item-title {
            font-size: 14px !important;
            font-weight: 700 !important;
            color: #111827 !important;
            line-height: 1.25 !important;
            display: -webkit-box !important;
            -webkit-line-clamp: 2 !important;
            -webkit-box-orient: vertical !important;
            overflow: hidden !important;
        }

        .food-cart-item-price {
            font-size: 15px !important;
            font-weight: 900 !important;
            color: #111827 !important;
            margin-top: 4px !important;
        }

        /* Stepper on Cart Page */
        .food-cart-stepper-box {
            background: #FFFFFF !important;
            border: 1px solid #E5E7EB !important;
            border-radius: 9999px !important;
            padding: 6px 12px !important;
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
        }

        .food-cart-vaciar-btn {
            display: block !important;
            margin: 18px auto !important;
            color: #EF4444 !important;
            font-size: 13.5px !important;
            font-weight: 700 !important;
            background: transparent !important;
            border: none !important;
            cursor: pointer !important;
            text-align: center !important;
        }

        .food-cart-vaciar-btn:hover {
            text-decoration: underline !important;
        }

        /* Upsell / Frecuentemente con */
        .food-upsell-section {
            padding: 20px 0 !important;
            border-top: 6px solid #F9FAFB !important;
            background: #FFFFFF !important;
        }

        .food-upsell-heading {
            font-size: 16px !important;
            font-weight: 800 !important;
            color: #111827 !important;
            padding: 0 20px 14px 20px !important;
        }

        .food-upsell-row {
            display: flex !important;
            gap: 14px !important;
            overflow-x: auto !important;
            padding: 0 20px 10px 20px !important;
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
        }

        .food-upsell-row::-webkit-scrollbar {
            display: none !important;
        }

        /* Fixed Bottom Checkout Bar in Cart Page */
        .food-cart-page-footer {
            position: sticky !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            background: #FFFFFF !important;
            border-top: 1px solid #F3F4F6 !important;
            z-index: 50 !important;
            box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06) !important;
        }

        .food-cart-page-subtotal-row {
            padding: 14px 20px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
        }

        .food-cart-subtotal-text {
            font-size: 12px !important;
            color: #6B7280 !important;
            font-weight: 600 !important;
            display: block !important;
        }

        .food-cart-subtotal-amount {
            font-size: 22px !important;
            font-weight: 900 !important;
            color: #111827 !important;
            line-height: 1.1 !important;
        }

        .food-cart-pagar-btn {
            background-color: var(--menu-btn-color, #22C55E) !important;
            color: var(--menu-btn-text-color, #FFFFFF) !important;
            font-size: 16px !important;
            font-weight: 900 !important;
            padding: 14px 32px !important;
            border-radius: 16px !important;
            border: none !important;
            cursor: pointer !important;
            box-shadow: 0 6px 20px var(--menu-btn-shadow, rgba(34, 197, 94, 0.4)) !important;
            transition: transform 0.15s ease, background-color 0.2s ease !important;
        }

        .food-cart-pagar-btn svg,
        .food-cart-pagar-btn * {
            color: var(--menu-btn-text-color, #FFFFFF) !important;
            stroke: var(--menu-btn-text-color, #FFFFFF) !important;
        }

        .food-cart-pagar-btn:hover {
            background-color: var(--menu-btn-hover-color, #16A34A) !important;
        }

        .food-cart-pagar-btn:active {
            transform: scale(0.96) !important;
        }

        /* ==========================================================================
           CATEGORY DETAIL PAGE (2-COLUMN GRID - IMAGE 3)
           ========================================================================== */
        .food-category-view-wrapper {
            background-color: var(--menu-bg-color, #F9FAFB) !important;
            color: var(--menu-text-color, #111827);
            min-height: 100vh !important;
            display: flex !important;
            flex-direction: column !important;
        }

        .food-category-view-header {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            padding: 14px 16px !important;
            background: var(--menu-primary-color, #1F1310) !important;
            position: sticky !important;
            top: 0 !important;
            z-index: 40 !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        }

        .food-cat-back-btn {
            width: 40px !important;
            height: 40px !important;
            border-radius: 50% !important;
            background: rgba(255, 255, 255, 0.15) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            border: none !important;
            cursor: pointer !important;
            color: #FFFFFF !important;
            transition: transform 0.15s ease !important;
        }

        .food-cat-back-btn:active {
            transform: scale(0.92) !important;
        }

        .food-cat-header-title {
            font-size: 19px !important;
            font-weight: 800 !important;
            color: #FFFFFF !important;
            flex: 1 !important;
            margin-left: 14px !important;
            line-height: 1.2 !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }

        .food-cat-search-btn {
            width: 40px !important;
            height: 40px !important;
            border-radius: 50% !important;
            background: rgba(255, 255, 255, 0.15) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            border: none !important;
            cursor: pointer !important;
            color: #FFFFFF !important;
            transition: transform 0.15s ease !important;
        }

        .food-cat-search-btn:active {
            transform: scale(0.92) !important;
        }

        /* Filter Chips Bar */
        .food-cat-filter-bar {
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
            padding: 12px 16px 8px 16px !important;
            background: transparent !important;
            overflow-x: auto !important;
            scrollbar-width: none !important;
        }

        .food-cat-filter-bar::-webkit-scrollbar {
            display: none !important;
        }

        .food-cat-filter-icon-btn {
            width: 38px !important;
            height: 38px !important;
            border-radius: 50% !important;
            background: #FFFFFF !important;
            border: 1px solid #E5E7EB !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            cursor: pointer !important;
            color: #374151 !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
            flex-shrink: 0 !important;
            position: relative !important;
            transition: all 0.15s ease !important;
        }

        .food-cat-filter-icon-btn.active {
            background-color: #111827 !important;
            color: #FFFFFF !important;
            border-color: #111827 !important;
        }

        .food-cat-filter-badge {
            position: absolute !important;
            top: -3px !important;
            right: -3px !important;
            width: 18px !important;
            height: 18px !important;
            border-radius: 50% !important;
            background-color: var(--menu-btn-color, #22C55E) !important;
            color: var(--menu-btn-text-color, #FFFFFF) !important;
            font-size: 10px !important;
            font-weight: 900 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            border: 2px solid #FFFFFF !important;
            box-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
        }

        .food-cat-filter-chip {
            padding: 8px 18px !important;
            border-radius: 9999px !important;
            background: #FFFFFF !important;
            border: 1px solid #E5E7EB !important;
            font-size: 13.5px !important;
            font-weight: 700 !important;
            color: #1F2937 !important;
            cursor: pointer !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 5px !important;
            transition: all 0.15s ease !important;
            white-space: nowrap !important;
            flex-shrink: 0 !important;
        }

        .food-cat-filter-chip.active {
            background-color: #111827 !important;
            color: #FFFFFF !important;
            border-color: #111827 !important;
        }

        /* Inline search in category view */
        .food-cat-search-row {
            padding: 6px 16px 10px 16px !important;
            background: transparent !important;
        }

        .food-cat-search-field {
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
            background: rgba(0, 0, 0, 0.05) !important;
            border-radius: 9999px !important;
            padding: 8px 16px !important;
        }

        .food-cat-search-field input {
            flex: 1 !important;
            background: transparent !important;
            border: none !important;
            outline: none !important;
            font-size: 14px !important;
            color: inherit !important;
        }

        /* 2-Column Grid */
        .food-2col-grid {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 16px !important;
            padding: 12px 16px 120px 16px !important;
            background: transparent !important;
        }

        .food-grid-card {
            width: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            position: relative !important;
            background: transparent !important;
            cursor: pointer !important;
        }

        .food-grid-img-wrapper {
            width: 100% !important;
            aspect-ratio: 1 / 1 !important;
            position: relative !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: #F9FAFB !important;
            border-radius: 18px !important;
            overflow: hidden !important;
            border: 1px solid #F3F4F6 !important;
        }

        .food-grid-img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
        }

        /* Quick Category Chips bar in Category Grid */
        .food-cat-chips-scroll {
            display: flex !important;
            gap: 8px !important;
            overflow-x: auto !important;
            padding: 8px 16px 10px 16px !important;
            background: transparent !important;
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
        }

        .food-cat-chips-scroll::-webkit-scrollbar {
            display: none !important;
        }

        .food-cat-pill {
            padding: 7px 15px !important;
            border-radius: 9999px !important;
            background: #F3F4F6 !important;
            border: 1px solid #E5E7EB !important;
            font-size: 12.5px !important;
            font-weight: 700 !important;
            color: #374151 !important;
            cursor: pointer !important;
            white-space: nowrap !important;
            transition: all 0.15s ease !important;
            flex-shrink: 0 !important;
        }

        .food-cat-pill:hover {
            background: #E5E7EB !important;
        }

        .food-cat-pill.active {
            background: #111827 !important;
            color: #FFFFFF !important;
            border-color: #111827 !important;
        }

        /* Quick Access All Products Banner in Todo */
        .food-all-prods-banner {
            margin: 10px 16px 18px 16px !important;
            background: linear-gradient(135deg, var(--menu-primary-color, #1F1310) 0%, var(--menu-secondary-color, #2D1A15) 100%) !important;
            border-radius: 20px !important;
            padding: 14px 18px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            color: #FFFFFF !important;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
            cursor: pointer !important;
            transition: transform 0.15s ease, box-shadow 0.15s ease !important;
        }

        .food-all-prods-banner:active {
            transform: scale(0.98) !important;
        }

        /* ==========================================================================
           RESPONSIVE DESKTOP & TABLET OPTIMIZATIONS (SIN MODIFICAR ESTILO NI MÓVIL)
           ========================================================================== */

        /* TABLETS Y PANTALLAS MEDIANAS (>= 640px) */
        @media (min-width: 640px) {
            .food-2col-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                gap: 20px !important;
                padding: 16px 20px 120px 20px !important;
            }
        }

        /* TABLETS EN MODO HORIZONTAL Y ESCRITORIOS COMPACTOS (>= 768px) */
        @media (min-width: 768px) {
            .food-espresso-header {
                padding: 24px 32px 56px 32px !important;
                gap: 16px !important;
            }

            .food-top-bar,
            .food-delivery-pill-wrapper,
            .food-search-box,
            .food-category-tabs,
            .food-hero-banner {
                max-width: 1240px;
                margin-left: auto;
                margin-right: auto;
                width: 100%;
            }

            .food-search-box {
                max-width: 580px !important;
            }

            .food-category-tabs {
                padding: 8px 16px 12px 16px !important;
            }

            .food-category-tabs-track {
                gap: 28px !important;
            }

            .food-hero-banner {
                min-height: 190px !important;
                margin: 8px auto !important;
                border-radius: 24px !important;
            }

            .food-hero-content {
                padding: 28px 40px !important;
                width: 50% !important;
            }

            .food-hero-title {
                font-size: 30px !important;
            }

            .food-hero-subtitle {
                font-size: 13px !important;
            }

            .food-hero-desc {
                font-size: 13px !important;
            }

            .food-white-body {
                border-top-left-radius: 36px !important;
                border-top-right-radius: 36px !important;
                margin-top: -38px !important;
                padding-top: 32px !important;
                padding-bottom: 130px !important;
            }

            .food-all-prods-banner,
            .food-section-header,
            .food-gallery-row,
            .food-dishes-list,
            .food-circles-container {
                max-width: 1240px;
                margin-left: auto;
                margin-right: auto;
                width: 100%;
            }

            .food-all-prods-banner {
                margin: 12px auto 26px auto !important;
                padding: 18px 26px !important;
                border-radius: 22px !important;
            }

            .food-section-header {
                padding: 0 4px !important;
                margin-bottom: 16px !important;
            }

            .food-section-title {
                font-size: 24px !important;
            }

            .food-ver-mas-btn {
                font-size: 13px !important;
                padding: 7px 18px !important;
            }

            .food-gallery-row {
                padding: 8px 4px 20px 4px !important;
                gap: 18px !important;
            }

            .food-gallery-card {
                width: 185px !important;
                min-width: 185px !important;
                max-width: 185px !important;
                transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
            }

            .food-gallery-card:hover {
                transform: translateY(-4px) !important;
            }

            .food-gallery-img-wrapper {
                height: 175px !important;
                border-radius: 20px !important;
            }

            .food-gallery-price {
                font-size: 18px !important;
            }

            .food-gallery-title {
                font-size: 14px !important;
            }

            /* Vista de Categoría / Cuadrícula en Escritorio */
            .food-category-view-header,
            .food-cat-chips-scroll,
            .food-cat-filter-bar,
            .food-cat-search-row,
            .food-2col-grid {
                max-width: 1240px;
                margin-left: auto;
                margin-right: auto;
                width: 100%;
            }

            .food-category-view-header {
                padding: 18px 24px !important;
            }

            .food-cat-header-title {
                font-size: 24px !important;
            }

            .food-cat-chips-scroll {
                padding: 12px 24px 14px 24px !important;
                gap: 10px !important;
            }

            .food-cat-filter-bar {
                padding: 12px 24px 12px 24px !important;
            }

            .food-cat-pill {
                padding: 8px 18px !important;
                font-size: 13px !important;
            }

            /* Elementos Flotantes Centrados */
            .food-bottom-dock {
                bottom: 24px !important;
                padding: 10px 48px !important;
                gap: 52px !important;
            }

            .food-cart-floating-wrapper {
                bottom: 24px !important;
                max-width: 480px !important;
                box-shadow: 0 16px 40px var(--menu-btn-shadow, rgba(34, 197, 94, 0.45)) !important;
            }

            /* Pantalla de Canasta / Carrito en Escritorio */
            .food-cart-page-header,
            .food-cart-page-overlay > div.flex-1,
            .food-cart-item-row,
            .food-upsell-heading,
            .food-upsell-row,
            .food-cart-vaciar-btn,
            .food-cart-page-subtotal-row {
                max-width: 720px;
                margin-left: auto;
                margin-right: auto;
                width: 100%;
            }

            .food-cart-page-header {
                padding: 20px 24px !important;
            }

            .food-cart-page-title {
                font-size: 22px !important;
            }

            .food-cart-item-row {
                padding: 18px 24px !important;
            }
        }

        /* PANTALLAS GRANDES Y MONITORES DE ESCRITORIO (>= 1024px) */
        @media (min-width: 1024px) {
            .food-2col-grid {
                grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
                gap: 24px !important;
                padding: 20px 24px 120px 24px !important;
            }

            .food-grid-card {
                transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
            }

            .food-grid-card:hover {
                transform: translateY(-4px) !important;
            }

            .food-hero-banner {
                min-height: 220px !important;
            }

            .food-hero-title {
                font-size: 34px !important;
            }

            .food-hero-content {
                padding: 32px 48px !important;
            }
        }

        /* ==========================================================================
           TRANSITION & ENTRANCE ANIMATIONS (SMOOTH & MODERN)
           ========================================================================== */
        @keyframes viewFadeSlideIn {
            0% {
                opacity: 0;
                transform: translateY(14px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes cardFadeSlideUp {
            0% {
                opacity: 0;
                transform: translateY(16px) scale(0.97);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @keyframes overlayFadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        @keyframes sheetSlideUp {
            0% {
                opacity: 0;
                transform: translateY(40px) scale(0.98);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @keyframes cartSlideInRight {
            0% {
                opacity: 0;
                transform: translateX(100%);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* View and Container Classes */
        .food-animate-view {
            animation: viewFadeSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
            will-change: opacity;
        }

        .food-main-menu-view {
            display: flex;
            flex-direction: column;
            width: 100%;
        }

        .food-horizontal-section {
            animation: viewFadeSlideIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
        }

        /* Card Staggered Entrance */
        .food-grid-card {
            animation: cardFadeSlideUp 0.32s cubic-bezier(0.16, 1, 0.3, 1) both !important;
            animation-delay: calc(var(--item-delay, 0) * 35ms) !important;
            will-change: transform, opacity;
        }

        .food-gallery-card {
            animation: cardFadeSlideUp 0.32s cubic-bezier(0.16, 1, 0.3, 1) both !important;
            animation-delay: calc(var(--item-delay, 0) * 35ms) !important;
            will-change: transform, opacity;
        }

        /* Modal and Overlay Animations */
        .overlay-bg,
        .animate-fade-in {
            animation: overlayFadeIn 0.22s ease-out both !important;
        }

        .animate-slide-up {
            animation: sheetSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) both !important;
            will-change: transform, opacity;
        }

        .food-cart-page-overlay {
            animation: cartSlideInRight 0.28s cubic-bezier(0.16, 1, 0.3, 1) both !important;
            will-change: transform, opacity;
        }

        /* Micro-interactions: Buttons, Tabs and Chips */
        .food-tab-btn {
            transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
        }
        .food-tab-btn:active {
            transform: scale(0.92) !important;
        }
        .food-tab-indicator {
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        .food-cat-filter-chip,
        .food-cat-pill,
        .food-cat-filter-icon-btn,
        .food-ver-mas-btn,
        .food-cat-back-btn,
        .food-cat-search-btn {
            transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
        }
        .food-cat-filter-chip:active,
        .food-cat-pill:active,
        .food-cat-filter-icon-btn:active,
        .food-ver-mas-btn:active,
        .food-cat-back-btn:active,
        .food-cat-search-btn:active {
            transform: scale(0.92) !important;
        }

        /* ==========================================================================
           PERSONALIZACIÓN DINÁMICA DE BOTONES Y ELEMENTOS VERDES DEL MENÚ DIGITAL
           ========================================================================== */
        .bg-\[\#22C55E\],
        button.bg-\[\#22C55E\],
        div.bg-\[\#22C55E\],
        .peer:checked ~ .peer-checked\:bg-\[\#22C55E\],
        .menu-btn-themed {
            background-color: var(--menu-btn-color, #22C55E) !important;
            color: var(--menu-btn-text-color, #FFFFFF) !important;
        }

        .hover\:bg-\[\#16A34A\]:hover,
        button.hover\:bg-\[\#16A34A\]:hover {
            background-color: var(--menu-btn-hover-color, #16A34A) !important;
        }

        .text-\[\#10B981\],
        .menu-text-themed {
            color: var(--menu-btn-color, #10B981) !important;
        }

        .bg-green-50 {
            background-color: var(--menu-btn-light-bg, #F0FDF4) !important;
        }

        .border-green-100 {
            border-color: var(--menu-btn-light-border, #DCFCE7) !important;
        }

        .selection\:bg-\[\#22C55E\]::selection,
        .selection\:bg-\[\#22C55E\] *::selection {
            background-color: var(--menu-btn-color, #22C55E) !important;
            color: var(--menu-btn-text-color, #FFFFFF) !important;
        }

        /* ==========================================================================
           PANTALLA DE BIENVENIDA / SPLASH SCREEN (2s Fade Out)
           ========================================================================== */
        .food-splash-screen {
            position: fixed !important;
            inset: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            background-color: var(--menu-primary-color, #1F1310) !important;
            z-index: 999999 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            opacity: 1;
            visibility: visible;
            transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s ease;
            pointer-events: all;
            overflow: hidden;
        }

        .food-splash-screen.food-splash-fade-out {
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }

        .food-splash-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            animation: food-splash-pop 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            padding: 24px;
            max-width: 90vw;
            text-align: center;
        }

        .food-splash-logo {
            max-width: min(340px, 80vw) !important;
            max-height: 180px !important;
            width: auto !important;
            height: auto !important;
            object-fit: contain !important;
            filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.35));
        }

        .food-splash-title {
            color: #FFFFFF !important;
            font-size: 26px !important;
            font-weight: 900 !important;
            letter-spacing: 0.5px !important;
            text-transform: uppercase !important;
            text-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
        }

        @keyframes food-splash-pop {
            0% {
                opacity: 0;
                transform: scale(0.88);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* ==========================================================================
           BOTÓN FLOTANTE VOLVER ARRIBA (Sticky / Fixed en la parte superior)
           ========================================================================== */
        .food-scroll-top-wrapper {
            position: fixed !important;
            top: 14px !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            z-index: 9999 !important;
            pointer-events: auto !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            animation: fadeInDown 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
        }

        .food-scroll-top-btn {
            display: inline-flex !important;
            align-items: center !important;
            gap: 7px !important;
            background-color: rgba(17, 24, 39, 0.94) !important;
            backdrop-filter: blur(12px) !important;
            -webkit-backdrop-filter: blur(12px) !important;
            color: #FFFFFF !important;
            font-size: 11.5px !important;
            font-weight: 800 !important;
            padding: 8px 18px !important;
            border-radius: 9999px !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 3px 8px rgba(0, 0, 0, 0.15) !important;
            cursor: pointer !important;
            transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
        }

        .food-scroll-top-btn:hover {
            background-color: #000000 !important;
            transform: scale(1.04) !important;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
        }

        .food-scroll-top-btn:active {
            transform: scale(0.94) !important;
        }

        @keyframes fadeInDown {
            0% {
                opacity: 0;
                transform: translate(-50%, -12px);
            }
            100% {
                opacity: 1;
                transform: translate(-50%, 0);
            }
        }