html {
    scroll-behavior: smooth; /* Faz com que todo link interno (#) role suavemente */
}
/* Animação Sênior: Entrada suave do Sticky */
@keyframes stickySlideIn {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.category-sticky-bar.visible {
    display: flex !important; /* Sobrescreve o display:none */
    animation: stickySlideIn 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
        /* Product Grid Mode Styles */
        .product-grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            /* Desktop: 3 por linha fixo */
            gap: 20px;
            padding: 10px 0;
        }

        /* Tablet (ex: ipad vertical ou notes menores) */
        @media (max-width: 992px) {
            .product-grid-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Mobile */
        @media (max-width: 600px) {
            .product-grid-container {
                grid-template-columns: 1fr;
            }
        }

        /* Badge Styles */
        .product-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.7rem;
            font-weight: 800;
            color: white;
            z-index: 10;
            text-transform: uppercase;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            letter-spacing: 0.5px;
        }

        .badge-HOT {
            background: #ff4757;
        }

        .badge-LANÇAMENTO {
            background: #2ed573;
        }

        .badge-NOVO {
            background: #2ed573;
        }

        .badge-PROMOÇÃO {
            background: #ff4757;
        }

        .badge-OFERTA {
            background: #ffa502;
        }

        .badge-NOVIDADE {
            background: #3742fa;
        }

        .badge-BOM {
            background: #ff6b81;
        }

        .badge-BOM\ DEMAIS {
            background: #ff6b81;
        }

        .badge-DELICIOSO {
            background: #e056fd;
        }

        .badge-POPULAR {
            background: #ffd32a;
            color: #333;
        }

        .badge-DESTAQUE {
            background: #a29bfe;
        }

        .badge-GELADINHO {
            background: #00d2d3;
            color: #fff;
        }

        /* Ajustes Específicos para LISTA (Padrão) */
        .product-item .product-badge {
            font-size: 0.6rem;
            padding: 2px 8px;
            top: -8px;
            /* Saindo pra fora */
            left: 50%;
            transform: translateX(-50%);
            border-radius: 4px;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
            width: auto;
            white-space: nowrap;
            z-index: 20;
        }

        .product-item .product-image-container {
            overflow: visible !important;
            position: relative;
        }

        /* Arredondamento das Imagens */
        .product-item .product-img {
            border-radius: 12px !important;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        /* Reforço para Grid (opcional, já que o card tem overflow hidden) */
        .card-view .img-wrap img {
            /* Mantém o topo arredondado pelo container pai */
        }

        .featured-header {
            margin-bottom: 5px;
            margin-top: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .featured-header h2 {
            color: #d63031;
            font-weight: 800;
            text-transform: uppercase;
            font-size: 1.6rem;
            margin: 0;
        }

        .card-view {
            border: none;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
            border-radius: 16px;
            background: #fff;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 100%;
            transition: transform 0.2s, box-shadow 0.2s;
            border: 1px solid #f0f0f0;
        }

        .card-view:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .card-view .img-wrap {
            width: 100%;
            height: 180px;
            position: relative;
            overflow: hidden;
            background: #f9f9f9;
        }

        .card-view .img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
        }

        .card-view:hover .img-wrap img {
            transform: scale(1.05);
            /* Zoom effect */
        }

        .card-view .content-wrap {
            padding: 15px;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .card-view h3 {
            font-size: 1.1rem;
            margin-bottom: 8px;
            font-weight: 700;
            color: #333;
        }

        .card-view p.desc {
            font-size: 0.85rem;
            color: #666;
            margin-bottom: 15px;
            flex: 1;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .card-view .footer-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: auto;
            border-top: 1px solid #f5f5f5;
            padding-top: 15px;
        }

        .card-view .price {
            font-size: 1.2rem;
            font-weight: 800;
            color: var(--primary-color);
        }

        .card-view .add-btn {
            background: var(--primary-color);
            color: var(--primary-color-text, #fff);
            border: none;
            padding: 8px 20px;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
            transition: 0.2s;
        }

        .card-view .add-btn:hover {
            filter: brightness(1.1);
            transform: scale(1.05);
        }

        /* Mobile adjustment for grid */
        @media (max-width: 600px) {
            .product-grid-container {
                grid-template-columns: 1fr;
            }
        }

        /* Notification Marquee Style - Multi Message */
        .notification-bar {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            margin: 15px 0;
            position: relative;
            display: flex;
            align-items: center;
            z-index: 5;
            background: #f8f9fa;
            border-top: 1px solid rgba(0, 0, 0, 0.05);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .marquee-container {
            display: flex;
            animation: marquee 30s linear infinite;
        }

        .marquee-item {
            display: flex;
            align-items: center;
            padding: 12px 40px;
            font-weight: 700;
            font-size: 0.95rem;
            white-space: nowrap;
        }

        .marquee-item i {
            margin-right: 10px;
        }

        @keyframes marquee {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        .notification-bar:hover .marquee-container {
            animation-play-state: paused;
        }

        /* Checkout Loyalty Banner */
        .loyal-banner-premium {
            background: linear-gradient(135deg, #fff9db 0%, #fff3bf 100%);
            border: 2px solid #f1c40f;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 20px;
            box-shadow: 0 8px 20px rgba(241, 196, 15, 0.15);
            animation: slideDownFade 0.6s ease-out forwards;
            position: relative;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .loyal-banner-premium.clickable {
            cursor: pointer;
        }

        .loyal-banner-premium.clickable:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 25px rgba(241, 196, 15, 0.3);
            background: linear-gradient(135deg, #fffceb 0%, #fff6cf 100%);
        }

        .loyal-banner-premium.clickable:active {
            transform: translateY(-1px);
        }

        .loyal-banner-premium::after {
            content: '🎁';
            position: absolute;
            right: -10px;
            bottom: -10px;
            font-size: 5rem;
            opacity: 0.1;
            transform: rotate(-15deg);
        }

        .loyal-banner-icon {
            width: 60px;
            height: 60px;
            background: #f1c40f;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.8rem;
            flex-shrink: 0;
            box-shadow: 0 4px 10px rgba(241, 196, 15, 0.3);
            animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .loyal-banner-content h4 {
            margin: 0;
            color: #856404;
            font-size: 1.1rem;
            font-weight: 800;
            letter-spacing: -0.5px;
        }

        .loyal-banner-content p {
            margin: 5px 0 0;
            color: #947600;
            font-size: 0.95rem;
            line-height: 1.4;
        }

        @keyframes bounceIn {
            0% {
                transform: scale(0);
            }

            70% {
                transform: scale(1.1);
            }

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

        @keyframes slideDownFade {
            0% {
                transform: translateY(-20px);
                opacity: 0;
            }

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

        /* Daily Offer Badge Styling */
        .daily-offer-container {
            position: absolute;
            top: -90px;
            /* Positioned just behind the top edge of the card */
            left: 50%;
            transform: translateX(-50%);
            z-index: 5;
            /* Behind the white card box */
            display: flex;
            flex-direction: column;
            align-items: center;
            pointer-events: none;
            width: 100%;
        }

        .offer-transition-wrap {
            position: relative;
            width: 100%;
            display: flex;
            justify-content: center;
            height: 100px;
            /* Fixed height to prevent jump */
        }

        .daily-offer-badge {
            position: absolute;
            /* Overlap during transition */
            background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
            color: white;
            padding: 12px 25px;
            border-radius: 15px;
            font-weight: 800;
            font-size: 0.95rem;
            text-transform: uppercase;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            gap: 15px;
            cursor: pointer;
            pointer-events: auto;
            border: 2px solid rgba(255, 255, 255, 0.8);
            max-width: 95%;
            width: max-content;
            /* Remove genetic transition to avoid conflicts */
        }

        .daily-offer-badge:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 30px rgba(255, 65, 108, 0.7);
        }

        .daily-offer-badge img {
            width: 65px;
            height: 65px;
            border-radius: 12px;
            /* Square with rounded corners */
            object-fit: cover;
            border: 2px solid rgba(255, 255, 255, 0.5);
            background: white;
        }

        .offer-text-wrapper {
            display: flex;
            flex-direction: column;
            line-height: 1.3;
        }

        .offer-label {
            font-size: 0.7rem;
            opacity: 0.9;
            letter-spacing: 1.5px;
            font-weight: 700;
        }

        .offer-product-name {
            font-size: 1.1rem;
            white-space: normal;
            /* Full title */
            word-break: break-word;
            font-weight: 800;
        }

        @media (max-width: 600px) {
            .daily-offer-badge {
                padding: 10px 15px;
                gap: 12px;
            }

            .daily-offer-badge img {
                width: 55px;
                height: 55px;
            }

            .offer-product-name {
                font-size: 0.95rem;
            }
        }

        /* Addon Group Styles (Dynamic) */

        /* Hide the browser's default radio/checkbox */
        .addon-option input[type="radio"],
        .addon-option input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        .check-indicator.is-radio {
            border-radius: 50%;
            transition: all 0.2s ease;
        }

        /* Radio Selection State */
        .addon-option.selected .check-indicator.is-radio {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            box-shadow: inset 0 0 0 4px white;
        }

        /* Adjust name positioning if needed */
.addon-name {
    user-select: none;
    line-height: 1.25;
    overflow-wrap: normal;
}

.addon-thumb-img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 7px;
    flex-shrink: 0;
    background: #f5f5f5;
    border: 1px solid #eee;
}

.addon-option .addon-info {
    min-width: 0;
    flex: 1;
    gap: 8px;
}

.addon-option .addon-qty-controls {
    flex-shrink: 0;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    max-width: fit-content;
}

.addon-price-inline {
    margin-left: 2px !important;
    white-space: nowrap;
    font-size: 0.9rem;
    line-height: 1;
}

.addon-option > .addon-price {
    flex-shrink: 0;
    min-width: 62px;
    text-align: right;
    line-height: 1.15;
}

        /* Transition Efx */
        /* Pure CSS Animations for Transitions - No conflicts with transform */
        /* 1. Fade */
        .fade-enter {
            opacity: 0;
        }

        .fade-enter-active {
            opacity: 1;
            transition: opacity 0.5s ease;
        }

        .fade-exit-active {
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        /* 2. Slide */
        .slide-enter {
            transform: translateX(100vw);
            opacity: 0;
        }

        .slide-enter-active {
            transform: translateX(0);
            opacity: 1;
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .slide-exit-active {
            transform: translateX(-100vw);
            opacity: 0;
            transition: all 0.5s ease;
        }

        /* 3. Zoom */
        .zoom-enter {
            transform: scale(0);
            opacity: 0;
        }

        .zoom-enter-active {
            transform: scale(1);
            opacity: 1;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .zoom-exit-active {
            transform: scale(0);
            opacity: 0;
            transition: all 0.5s ease;
        }

        /* 4. Flip */
        .flip-enter {
            transform: rotateY(90deg);
            opacity: 0;
        }

        .flip-enter-active {
            transform: rotateY(0deg);
            opacity: 1;
            transition: all 0.6s ease;
        }

        .flip-exit-active {
            transform: rotateY(-90deg);
            opacity: 0;
            transition: all 0.6s ease;
        }

        /* 5. Bounce */
        .bounce-enter {
            transform: translateY(-100px);
            opacity: 0;
        }

        .bounce-enter-active {
            transform: translateY(0);
            opacity: 1;
            transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .bounce-exit-active {
            transform: translateY(100px);
            opacity: 0;
            transition: all 0.5s ease;
        }

        @keyframes pulse-badge {

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

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

        /* Apply pulse ONLY after entrance is done to avoid clashing with transition transforms */
        .daily-offer-badge.ready {
            animation: pulse-badge 3s infinite ease-in-out;
        }

        /* Mini Badge Pulse for individual products */
        .badge-daily-offer {
            background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
            color: white;
            font-size: 0.6rem;
            padding: 4px 8px;
            border-radius: 6px;
            font-weight: 900;
            text-transform: uppercase;
            position: absolute;
            top: 5px;
            right: 5px;
            z-index: 10;
            box-shadow: 0 2px 10px rgba(255, 65, 108, 0.4);
            animation: MiniPulse 2s infinite ease-in-out;
            border: 1px solid rgba(255, 255, 255, 0.5);
        }

        @keyframes MiniPulse {
            0% {
                transform: scale(1);
                box-shadow: 0 2px 10px rgba(255, 65, 108, 0.4);
            }

            50% {
                transform: scale(1.1);
                box-shadow: 0 2px 15px rgba(255, 65, 108, 0.6);
            }

            100% {
                transform: scale(1);
                box-shadow: 0 2px 10px rgba(255, 65, 108, 0.4);
            }
        }

        .img-clickable {
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .img-clickable:hover {
            transform: scale(1.08);
            filter: brightness(1.1);
        }

        /* Auth Modal Styles */
        .auth-tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 2px solid #f0f0f0;
        }

        .auth-tab {
            flex: 1;
            padding: 10px;
            text-align: center;
            cursor: pointer;
            font-weight: 700;
            color: #999;
            transition: 0.3s;
        }

        .auth-tab.active {
            color: var(--primary-color);
            border-bottom: 2px solid var(--primary-color);
        }

        .auth-form-container {
            display: none;
        }

        .auth-form-container.active {
            display: block;
        }

        .auth-input-group {
            margin-bottom: 12px;
        }

        .auth-input-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 0.85rem;
            font-weight: 600;
            color: #555;
        }

        .auth-input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 0.9rem;
            box-sizing: border-box;
        }

        .auth-btn {
            width: 100%;
            padding: 12px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: 700;
            cursor: pointer;
            margin-top: 10px;
            transition: 0.2s;
        }

        .auth-btn:hover {
            filter: brightness(1.1);
            transform: translateY(-2px);
        }

        /* Grid Padrao (Lado a Lado) - Usado na Entrega/Retirada */
        .option-grid {
            display: grid !important;
            grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
            gap: 10px !important;
        }

        /* Grid de Pagamento (Empilhado/Sanduiche) */
        .payment-grid {
            display: flex !important;
            flex-direction: column !important;
            gap: 10px !important;
        }

        .option-card {
            border: 1px solid #ddd !important;
            border-radius: 12px !important;
            padding: 10px 20px !important;
            cursor: pointer !important;
            background: white !important;
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 10px !important;
            min-height: 50px !important;
            width: 100% !important;
            position: relative !important;
        }

        .option-card i {
            font-size: 1.2rem !important;
            color: #888 !important;
            margin: 0 !important;
        }

        .option-card span {
            font-size: 1rem !important;
            font-weight: 600 !important;
            color: #444 !important;
        }

        .option-card:has(input:checked) {
            border-color: var(--primary-color) !important;
            background-color: #fff8f6 !important;
        }

.addon-qty-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f1f1f1;
    padding: 5px 12px;
    border-radius: 20px;
    margin-left: auto; /* Empurra para a direita */
    flex-shrink: 0;
}
/* Prevenção de rolagem do fundo (background lock) */
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

.addon-qty-btn {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    border: none;
    background: var(--primary-color);
    color: white;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

        .addon-qty-btn:hover {
            background: var(--primary-color);
            color: white;
            transform: scale(1.1);
        }

        .addon-qty-btn.minus {
            color: #999;
        }

        .addon-qty-btn.minus:hover {
            background: #e74c3c;
            color: white;
        }

        .addon-qty-val {
            font-size: 0.95rem;
            color: #333;
            padding: 0 5px;
        }
        @keyframes borderPulse {
    0% { border-color: #ddd; box-shadow: none; }
    50% { border-color: #e74c3c; box-shadow: 0 0 10px rgba(231, 76, 60, 0.5); }
    100% { border-color: #ddd; box-shadow: none; }
}
.field-error-highlight {
    animation: borderPulse 1s infinite ease-in-out;
    border-width: 2px !important;
}
/* 1. CONTAINER DO MODAL (Responsivo: Centralizado no Desktop / Full no Mobile) */
#product-modal .modal-card.full-screen-clean {
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    background: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Ajuste para Desktop: Se a tela for maior que 600px, o modal centraliza */
@media (min-width: 601px) {
    #product-modal .modal-card.full-screen-clean {
        width: 500px !important; /* Largura fixa no desktop */
        height: 85vh !important;
        max-height: 800px !important;
        margin: auto !important;
        border-radius: 20px !important;
        overflow: hidden;
    }
    .btn-close-modal-clean {
        top: 20px !important;
        right: 20px !important;
    }
}

/* VERSÃO SÊNIOR REFINADA: Bottom-Sheet com Respiro de Segurança */
#product-modal .modal-card.full-screen-clean {
    width: 100% !important;
    height: 90vh !important;       /* Aumentado o espaço no topo (agora sobra 10%) */
    max-height: 85vh !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    background: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 25px 25px 0 0 !important; /* Cantos superiores mais arredondados */
    overflow: hidden;
    /* Ajuste para não colar no fundo e não cortar botões */
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important; 
    box-shadow: 0 -8px 30px rgba(0,0,0,0.2);
}

/* --- PERFIL DA LOJA (MODAL & INFO) --- */
.store-city-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #666;
    margin-top: 8px;
    justify-content: center;
}

.btn-open-profile {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f2f6;
    color: #2f3542;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    margin-left: 10px;
}

.btn-open-profile:hover {
    background: #dfe4ea;
}

/* Modal de Perfil */
.profile-modal-card {
    max-width: 500px !important;
    padding: 0 !important;
    overflow: hidden;
}

.profile-nav-tabs {
    display: flex;
    background: #f8fafc;
    border-bottom: 1px solid #eee;
}

.p-nav-item {
    flex: 1;
    padding: 15px 10px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #94a3b8;
    cursor: pointer;
    transition: 0.3s;
}

.p-nav-item.active {
    color: var(--primary-color);
    border-bottom: 3px solid var(--primary-color);
    background: #fff;
}

.p-tab-pane { display: none; padding: 20px; }
.p-tab-pane.active { display: block; animation: fadeIn 0.3s; }

/* Redes Sociais no Modal */
.social-links-flex {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.social-circle {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
    transition: 0.3s;
}

.social-circle:hover { transform: scale(1.1); }

/* Horários e Pagamento */
.hours-list, .pay-methods-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hour-row, .pay-row {
    display: flex;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px dashed #eee;
    font-size: 0.9rem;
}

.map-miniature {
    width: 100%;
    height: 150px;
    border-radius: 12px;
    margin-top: 15px;
    border: 1px solid #eee;
}

/* Ajuste do rodapé do modal para garantir visibilidade total dos botões */
#product-modal .modal-footer-clean {
    padding: 15px 20px calc(20px + env(safe-area-inset-bottom)) 20px !important;
    background: #fff;
    border-top: 1px solid #eee;
}
/* Ajuste de simetria no rodapé do modal */
#product-modal .modal-footer-clean {
    /* Padding superior e inferior iguais (15px) + a zona de segurança do iPhone/Android */
    padding: 15px 20px calc(15px + env(safe-area-inset-bottom)) 20px !important;
    background: #fff;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: row-reverse; /* Mantém sua lógica de Adicionar na direita */
    align-items: center;
    gap: 12px;
}

/* Remova também qualquer padding-bottom excessivo do card pai para não somar espaços */
#product-modal .modal-card.full-screen-clean {
    padding-bottom: 0 !important; /* Deixamos o respiro apenas para o footer acima */
}
/* Ajuste para Desktop */
@media (min-width: 601px) {
    #product-modal .modal-card.full-screen-clean {
        width: 500px !important;
        height: 85vh !important;
        max-height: 800px !important;
        margin: auto !important;
        border-radius: 20px !important;
        padding-bottom: 0 !important; /* Reset do padding de segurança no desktop */
    }
}

/* Botão Fechar (X) fixado no card */
.btn-close-modal-clean {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    z-index: 10002 !important;
    background: rgba(0,0,0,0.5) !important;
    width: 38px !important;
    height: 38px !important;
    color: #fff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
}
/* --- CORREÇÃO DEFINITIVA: IMAGEM E BOTÃO FECHAR --- */

/* 1. Garante que o corpo do modal não deixe o conteúdo subir para debaixo da barra do celular */
#product-modal .modal-body-clean {
    position: relative !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    overflow-x: hidden !important;
}

/* 2. Ajuste da Imagem: Usamos object-fit 'contain' ou 'cover' com altura controlada */
#modal-product-image {
    width: 100% !important;
    height: 35vh !important; /* Altura fixa relativa à tela */
    min-height: 220px !important;
    max-height: 350px !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    background-color: #f8f9fa !important;
    border-radius: 0 !important;
}

/* 3. Botão Fechar (X): Posicionamento absoluto fixo e Z-INDEX máximo */
.btn-close-modal-clean {
    position: fixed !important; /* Muda de absolute para fixed para travar na tela */
    top: 20px !important;
    right: 20px !important;
    width: 40px !important;
    height: 40px !important;
    background: rgba(0, 0, 0, 0.6) !important; /* Fundo mais escuro para destaque */
    color: #fff !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 50% !important;
    z-index: 99999 !important; /* Valor extremo para ganhar de qualquer elemento */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    font-weight: bold !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
    cursor: pointer !important;
}

/* 4. Ajuste para Android/iOS com Notch (Entalhe) */
@supports (padding-top: env(safe-area-inset-top)) {
    .btn-close-modal-clean {
        top: calc(20px + env(safe-area-inset-top)) !important;
    }
}

/* 5. Ajuste no cabeçalho do conteúdo para não encostar na imagem */
.modal-header-main {
    margin-top: 15px !important;
    padding: 0 20px !important;
}
/* CONTEÚDO AMPLO */
.modal-content-wide { padding: 0 0 20px 0; }
.modal-header-main { padding: 15px 20px 5px; }
.modal-header-main h2 { font-size: 1.5rem; font-weight: 800; color: #2d3436; margin: 0; }
.product-desc-clean { padding: 0 20px; font-size: 0.95rem; color: #636e72; margin: 10px 0; line-height: 1.4; }
.price-box-clean { padding: 0 20px 15px; font-size: 1.25rem; font-weight: 800; color: var(--primary-color); }

/* 3. TÍTULOS E AVISOS (Recuo das bordas) */
.addon-group-header-clean {
    background: #f8f9fa;
    padding: 12px 20px; /* Padding generoso para não cortar nas bordas */
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: #333;
}
/* Garante o afastamento lateral de avisos como "(Escolha até 2)" e títulos de grupos */
.addon-group-header-clean {
    padding-left: 20px !important;
    padding-right: 20px !important;
}
/* Ajuste de respiro para o aviso de escolha máxima se houver um span separado */
.addon-group-header-clean span.max-limit-info {
    margin-right: 5px;
}
/* ADICIONAIS (NOME ESQUERDA, SELETOR MEIO, CHECK DIREITA) */
.addon-row-clean {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee; /* Linha separadora */
    gap: 15px;
    background: #fff;
}
/* Afasta os itens da lista de adicionais das bordas */
.addon-row-clean {
    padding-left: 20px !important;
    padding-right: 20px !important;
}
.addon-label-area {
    flex: 1; /* Alinha nome à esquerda */
    display: flex;
    flex-direction: column;
}

.addon-name-txt { font-size: 0.95rem; font-weight: 600; color: #2d3436; }
.addon-price-txt { font-size: 0.8rem; color: #27ae60; font-weight: 700; margin-top: 3px; }

/* SELETOR DE ADICIONAL CENTRALIZADO REDUZIDO */
.addon-qty-center {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f1f2f6;
    padding: 4px 10px;
    border-radius: 20px;
}
.addon-qty-center button {
    background: none; border: none; font-size: 1.1rem; color: #2f3542; font-weight: bold; cursor: pointer; padding: 0 5px;
}
.addon-qty-center span { font-size: 0.9rem; font-weight: 800; min-width: 15px; text-align: center; }

/* CHECKBOX DIREITO EXTREMIDADE */
.addon-check-right {
    width: 22px; height: 22px; border: 2px solid #dfe4ea; border-radius: 50%; flex-shrink: 0;
}
.selected .addon-check-right { background: var(--primary-color); border-color: var(--primary-color); box-shadow: inset 0 0 0 4px #fff; }

/* 5. RODAPÉ (Posição trocada: Seletor Esquerda | Adicionar Direita) */
.modal-footer-clean {
    display: flex;
    flex-direction: row-reverse; /* INVERTE A POSIÇÃO: Adicionar fica na direita */
    align-items: center;
    padding: 12px 20px 30px; /* Mais espaço no fundo */
    gap: 12px;
    border-top: 1px solid #eee;
    background: #fff;
}

.btn-add-final {
    flex: 1.5; /* Botão adicionar maior */
    height: 48px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
}

.qty-selector-final {
    flex: 1; /* Seletor menor na esquerda */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: #f1f2f6;
    height: 48px;
    border-radius: 12px;
}
.qty-selector-final button { background: none; border: none; font-size: 1.3rem; font-weight: 900; color: var(--primary-color); }
.qty-selector-final span { font-weight: 800; font-size: 1.1rem; min-width: 25px; text-align: center; }

/* OBSERVAÇÃO */
/* 4. CAMPO DE OBSERVAÇÃO (Fonte igual ao grupo de adicionais) */
.obs-section-clean label {
    font-size: 0.9rem !important; 
    font-weight: 700;
    color: #333;
    display: block;
    margin-bottom: 10px;
    padding: 0 20px; /* Alinhado com o padding lateral do modal */
}
/* Padroniza o campo de texto da observação */
#modal-item-obs {
    width: calc(100% - 40px);
    margin: 0 20px 20px;
    padding: 12px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fdfdfd;
    font-size: 0.9rem;
    resize: none;
    box-sizing: border-box;
}
/* BOTÃO FECHAR (X) */
.btn-close-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    z-index: 10001;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CONTEÚDO */
.modal-content-padding { padding: 15px; }
.modal-header-new h2 { font-size: 1.4rem; margin: 0; font-weight: 800; color: #333; }
.product-description-text { font-size: 0.95rem; color: #666; margin: 10px 0; }
.modal-price-tag-new { font-size: 1.2rem; font-weight: 800; color: var(--primary-color); display: block; margin-bottom: 20px; }

/* ADICIONAIS RESPONSIVOS */
.addon-option-new {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 5px; /* Redução de padding para ganhar espaço */
    border-bottom: 1px solid #f2f2f2;
    gap: 8px;
}
.addon-details {
    flex: 1; /* Ocupa todo o espaço disponível na esquerda */
    display: flex;
    flex-direction: column;
    min-width: 0; /* Permite que o texto quebre se for muito longo */
}
.addon-name-new { 
    font-weight: 600; 
    font-size: 0.85rem !important; /* Fonte reduzida */
    color: #333;
    line-height: 1.2;
    word-break: break-word;
}
.addon-price-new { 
    color: #27ae60; 
    font-size: 0.75rem !important; /* Fonte menor para o preço */
    font-weight: 700;
    margin-top: 2px;
}

/* COLUNA DA DIREITA (CONTROLES) */
.addon-controls-wrapper {
    display: flex;
    align-items: center;
    gap: 12px; /* Espaço entre seletor e checkbox */
    flex-shrink: 0; /* Impede que os botões diminuam de tamanho */
}

/* SELETOR DE QUANTIDADE ADICIONAL (REDUZIDO) */
.addon-qty-mini button {
    width: 20px !important; 
    height: 20px !important;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: #333;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.addon-qty-mini span {
    font-size: 0.8rem;
    font-weight: 800;
    min-width: 14px;
    text-align: center;
}

/* CHECKBOX DIREITO */
.check-indicator-new {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #ddd;
    border-radius: 50%;
    flex-shrink: 0;
}
.selected .check-indicator-new { background: var(--primary-color); border-color: var(--primary-color); }
.selected .check-indicator-new:after {
    content: '✓'; position: absolute; color: white; font-size: 14px; top: -1px; left: 4px;
}

/* RODAPÉ ALINHADO (QUANTIDADE + ADICIONAR) */
.modal-footer-new {
    margin-top: auto;
    padding: 10px 15px 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid #eee;
    background: white;
}
.btn-add-cart-new {
    flex: 1;
    height: 48px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
}
.qty-selector-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8f9fa;
    padding: 0 10px;
    height: 48px;
    border-radius: 12px;
    border: 1px solid #eee;
}
.qty-selector-footer button {
    background: none; border: none; font-size: 1.2rem; font-weight: bold; color: var(--primary-color); padding: 5px;
}
.qty-selector-footer span { font-weight: 800; font-size: 1.1rem; min-width: 25px; text-align: center; }

/* PREVENIR ZOOM NO IOS */
input, textarea, button { font-size: 16px !important; touch-action: manipulation; }
/* --- AJUSTE DE LARGURA: LISTA DE ADICIONAIS --- */

/* Reduz a largura do container da lista e centraliza */
#modal-addons-list {
    width: 92% !important; /* Redução estratégica para criar respiro lateral */
    margin: 0 auto !important; /* Centraliza o bloco no modal */
    display: block !important;
}

/* Ajusta os cabeçalhos dos grupos (ex: "Escolha o sabor") para alinhar com a nova largura */
.addon-group-header-clean {
    width: 100% !important;
    padding: 12px 15px !important; /* Espaçamento interno mantido */
    box-sizing: border-box !important;
    border-radius: 8px !important; /* Arredondamento opcional para visual premium */
    margin-bottom: 5px !important;
}

/* Ajusta as linhas de adicionais individuais */
.addon-row-clean {
    width: 100% !important;
    padding: 15px 10px !important;
    box-sizing: border-box !important;
    background: #fff !important;
}

/* Ajusta o campo de observação para seguir a mesma largura da lista */
.obs-section-clean {
    width: 92% !important;
    margin: 20px auto !important;
}

#modal-item-obs {
    width: 100% !important; /* Ocupa 100% do pai que já tem 92% */
    margin: 10px 0 !important;
}
/* --- MENU INFERIOR: VISUAL ORIGINAL COM FIX PARA IOS --- */
.mobile-nav-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* Retorna a altura original de 65px */
    height: 65px; 
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 999;
    border-top: 1px solid #f0f0f0;
    
    /* A mágica sênior: criamos um espaço extra apenas no fundo, 
       sem empurrar os ícones para cima de forma errada */
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: content-box; /* Garante que a altura seja 65px + Safe Area */
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #888;
    flex: 1;
    cursor: pointer;
    background: none;
    border: none;
    /* Altura fixa para os itens não "dançarem" no scroll */
    height: 65px; 
}

.nav-item i {
    font-size: 1.2rem;
    margin-bottom: 4px;
    color: var(--primary-color);
}

.nav-item span {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Regra vital para anular o comportamento de esconder quando o modal abre */
body.modal-open .mobile-nav-bottom {
    display: none !important;
}

/* Ajuste do botão do carrinho para o visual original */
.floating-cart-bar {
    bottom: calc(75px + env(safe-area-inset-bottom)) !important;
}

/* Ajuste no botão flutuante do carrinho para não cobrir o menu */
.floating-cart-bar {
    bottom: calc(75px + env(safe-area-inset-bottom)) !important;
}

/* Espaço no footer para o conteúdo não ficar escondido atrás do menu */
.main-footer {
    padding-bottom: 90px !important;
}
/* --- LISTA DE CATEGORIAS COMPACTA E SEM QUEBRAS --- */
.category-dropdown-container {
    position: relative;
    width: 92%;
    margin: 10px auto; /* Reduzido margem vertical */
    text-align: left;
}

.btn-category-list {
    display: inline-flex; /* Muda para inline para não ocupar a linha toda */
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #ddd;
    padding: 8px 12px; /* Reduzido padding para diminuir altura/largura */
    border-radius: 10px;
    width: auto; /* Largura automática baseada no conteúdo */
    min-width: 180px;
    cursor: pointer;
    font-weight: 600; /* Peso levemente reduzido */
    font-size: 0.85rem; /* Texto menor */
    color: #444;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    white-space: nowrap; /* Impede quebra de linha no botão */
}

.category-list-wrapper {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    width: auto; /* Largura automática */
    min-width: 220px; /* Largura mínima garantida */
    max-width: 300px; /* Limite máximo para não cobrir a tela */
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    z-index: 1000;
    display: none;
    overflow: hidden;
    border: 1px solid #eee;
}

.category-dropdown-container.active .category-list-wrapper {
    display: block;
}

.category-list-scroll {
    max-height: 250px; /* Aproximadamente 6 itens */
    overflow-y: auto;
}

.cat-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px; /* Reduzido para ser mais compacto */
    text-decoration: none;
    color: #555;
    font-size: 0.85rem; /* Texto menor conforme solicitado */
    font-weight: 400; /* Retirado o negrito */
    border-bottom: 1px solid #f9f9f9;
    white-space: nowrap; /* Impede que o nome da categoria quebre linha */
    transition: background 0.2s;
}

.cat-list-item:hover {
    background: #fdf2f0;
    color: var(--primary-color);
}

.cat-list-item i {
    width: 16px;
    text-align: center;
    color: var(--primary-color);
    font-size: 0.9rem;
}
/* --- BARRA DE CATEGORIAS FIXA (STICKY) --- */
.category-sticky-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 998; /* Abaixo do menu mobile inferior e do modal */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 10px 15px;
    display: none; /* Escondido por padrão */
    align-items: center;
    justify-content: flex-start;
    animation: slideInDown 0.3s ease-out;
}
/* Ajuste do container da barra fixa para separar os itens */
.category-sticky-bar {
    display: none; /* Controlado pelo JS */
    align-items: center;
    justify-content: space-between; /* Empurra categoria p/ esquerda e lupa p/ direita */
    padding: 8px 15px; /* Reduzido levemente para ficar mais slim */
}

/* Ajuste específico para a lupa quando estiver no Sticky */
.sticky-search-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #f8f9fa; /* Fundo levemente cinza para diferenciar do branco da barra */
    border: 1px solid #eee;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Garante que o dropdown de categorias não "estoure" a largura agora que tem a lupa ao lado */
.category-sticky-bar .category-dropdown-container {
    max-width: calc(100% - 60px) !important; /* Deixa espaço para a lupa */
}

/* Classe ativa disparada pelo Javascript */
.category-sticky-bar.visible {
    display: flex;
}

/* Reaproveita o botão mas ajusta para a barra larga */
/* --- AJUSTE FINO DO BOTÃO NO STICKY --- */

/* Força a largura do container dentro da barra fixa */
.category-sticky-bar .category-dropdown-container {
    margin: 0 !important;
    width: 100% !important; /* Permite que o container use o espaço */
    max-width: 280px !important; /* Define uma largura máxima confortável para o botão */
}

/* Ajusta o botão especificamente quando estiver no Sticky */
.category-sticky-bar .btn-category-list {
    width: 100% !important; /* Faz o botão ocupar todo o container de 280px */
    min-width: 220px !important; /* Garante que ele seja visivelmente mais largo que o original */
    background: #ffffff !important;
    border-color: #e0e0e0 !important;
    padding: 10px 15px !important; /* Um pouco mais de respiro interno */
    justify-content: space-between !important;
}

/* Garante que a lista que abre no Sticky acompanhe a nova largura do botão */
.category-sticky-bar .category-list-wrapper {
    width: 100% !important;
    min-width: 250px !important;
}

/* --- ALINHAMENTO DESKTOP: ALARGANDO O CARD E PRODUTOS --- */
@media (min-width: 992px) {
    /* Unifica a largura do Cartão da Loja, Barra de Busca e Área de Produtos */
    div.restaurant-info-card,
    .category-row-container,
    .category-section {
        width: 95% !important;
        max-width: 1050px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
    
    /* Centraliza a barra fixa (Sticky) caso ela apareça ao rolar a página */
    .category-sticky-bar {
        width: 95% !important;
        max-width: 1050px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        box-sizing: border-box !important;
    }
    
    /* Garante que o grid de produtos preencha esse novo espaço largo */
    .product-grid-container {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 25px !important;
    }

    /* ======================================================== */
    /* INCLUA ESTE TRECHO AQUI PARA A BUSCA (SÓ AFETA O DESKTOP) */
    /* ======================================================== */
    
    /* Alinha a altura do botão de categorias com a nova barra */
    .category-row-container {
        align-items: stretch !important;
    }
    
    .category-dropdown-container .btn-category-list {
        height: 50px !important; 
        padding: 0 20px !important;
    }

    /* Transforma a Lupa em Barra de Pesquisa Completa */
    .category-row-container .btn-open-search {
        flex: 1 !important; /* Ocupa todo o resto do espaço disponível */
        min-width: 0 !important; /* Impede que o flexbox vaze da tela */
        width: auto !important;
        height: 50px !important;
        margin-left: 20px !important; /* Afasta a barra do botão de categorias */
        border-radius: 12px !important;
        background: #f8f9fa !important;
        justify-content: flex-start !important; /* Joga o ícone de lupa para o canto esquerdo */
        padding: 0 20px !important;
        color: #94a3b8 !important;
        transition: all 0.3s ease !important;
        position: relative !important;
    }

    /* Texto falso do placeholder na barra */
    .category-row-container .btn-open-search::after {
        content: 'O que você está com vontade de comer hoje?';
        margin-left: 15px;
        font-weight: 600;
        letter-spacing: 0.5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .category-row-container .btn-open-search:hover {
        background: #fff !important;
        border-color: var(--primary-color) !important;
        box-shadow: 0 0 0 3px rgba(227, 28, 25, 0.1) !important;
        color: var(--primary-color) !important;
    }

    /* Aplica a mesma barra expandida no menu fixo do topo (Sticky) */
    .category-sticky-bar .sticky-search-btn {
        flex: 1 !important;
        min-width: 0 !important;
        width: auto !important;
        justify-content: flex-start !important;
        padding: 0 20px !important;
        background: #f8f9fa !important;
    }

    .category-sticky-bar .sticky-search-btn::after {
        content: 'Procurar produto...';
        margin-left: 15px;
        font-weight: 600;
        color: #94a3b8;
    }
} /* <--- Fim do bloco Desktop (@media) */

/* --- ESTILIZAÇÃO DA BUSCA (PADRÃO / MOBILE) --- */
.category-row-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 92%;
    margin: 10px auto;
}

.btn-open-search {
    background: #fff;
    border: 1px solid #ddd;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    color: var(--primary-color);
}

/* Modal de Busca Full */
#search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 999999 !important;
    display: none;
    flex-direction: column;
    overflow: hidden; 
}

.search-container-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: #fff;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 2;
}

.search-results-area {
    flex: 1;
    overflow-y: auto;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center; 
    padding: 20px 0;
    -webkit-overflow-scrolling: touch;
}

#search-results-list {
    width: 100%;
    max-width: 600px; 
    display: flex;
    flex-direction: column;
}

.search-item-result {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    border-bottom: 1px solid #f2f2f2;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s;
}

.search-item-result:hover {
    background: #f9f9f9;
}

.search-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 12px;
    padding: 0 15px;
    height: 50px;
}

.search-input-wrapper input {
    flex: 1;
    border: none;
    background: transparent;
    height: 100%;
    font-size: 1rem;
    outline: none;
    padding-right: 10px;
}

.btn-clear-search {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--primary-color);
    cursor: pointer;
    padding: 10px 5px;
    white-space: nowrap;
    visibility: hidden; 
    opacity: 0;
    transition: opacity 0.2s ease;
    user-select: none;
}

.btn-clear-search.is-visible {
    visibility: visible;
    opacity: 1;
}

.btn-close-search {
    font-size: 1.8rem;
    color: #333;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; 
}

.search-item-info h4 { margin: 0; font-size: 0.95rem; color: #333; }
.search-item-info span { font-size: 0.85rem; color: var(--primary-color); font-weight: 700; }

#search-modal[style*="display: flex"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.search-product-desc-text {
    margin: 0;
    font-size: 0.82rem;
    color: #777;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-item-info {
    padding-right: 5px;
}
/* Correção de Visibilidade do Modal de Perfil */
#profile-store-modal.modal-overlay {
    display: none; 
    opacity: 1 !important; 
    visibility: visible !important; 
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7) !important; 
    z-index: 999999 !important; 
    align-items: center;
    justify-content: center;
}

#profile-store-modal .modal-card {
    max-height: 90vh; 
    display: flex;
    flex-direction: column;
}

#profile-store-modal .modal-content-scroll {
    flex: 1;
    overflow-y: auto; 
    padding-bottom: 40px; 
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) #f1f1f1;
}

#profile-store-modal .modal-content-scroll::-webkit-scrollbar {
    width: 6px;
}
#profile-store-modal .modal-content-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
}
#profile-store-modal .modal-content-scroll::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}

@keyframes blinkOrange {
    0% { border-color: #ddd; box-shadow: none; }
    50% { border-color: #ff9800; box-shadow: 0 0 12px rgba(255, 152, 0, 0.6); }
    100% { border-color: #ddd; box-shadow: none; }
}
.field-error-blink {
    animation: blinkOrange 0.8s infinite ease-in-out !important;
    border: 2px solid #ff9800 !important;
}

#checkout-view .cart-footer {
    height: 100px !important; 
    min-height: 100px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 10px 20px !important;
    box-sizing: border-box !important;
}

#checkout-view .cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    line-height: 1.2;
}

#checkout-total-price small {
    display: block;
    font-size: 0.7rem !important;
    line-height: 1;
    margin-top: 2px;
    color: #777;
}

#checkout-view .btn-checkout {
    height: 45px !important;
    margin-top: 5px !important;
}

/* --- AJUSTE SÊNIOR: LIST VIEW --- */
.product-item {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px !important; 
    gap: 25px !important; 
    transform: none !important;
    box-shadow: none !important;
    transition: none !important;
    cursor: default !important;
    border-bottom: 1px solid #f1f1f1; 
}

.product-item .add-to-cart-btn-pill {
    display: none !important;
}

.product-item .product-info {
    flex: 1 !important;
    order: 1 !important;
    text-align: left !important;
    padding-right: 10px; 
}

.product-item .product-name {
    font-size: 1.15rem !important;
    margin-bottom: 6px !important;
    color: #333;
}

.product-item .product-image-container,
.product-item > div:last-child {
    width: 150px !important;
    height: 150px !important;
    min-width: 150px !important;
    flex-shrink: 0 !important;
    order: 2 !important;
    margin-left: auto !important;
    position: relative;
    overflow: visible !important; 
}

.product-item .product-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 18px !important; 
    box-shadow: 0 6px 15px rgba(0,0,0,0.07) !important;
}

.product-item:hover, 
.product-item .img-clickable:hover {
    transform: none !important;
    filter: none !important;
}

@media (max-width: 500px) {
    .product-item {
        padding: 15px !important;
        gap: 15px !important;
    }
    .product-item .product-image-container,
    .product-item > div:last-child {
        width: 120px !important;
        height: 120px !important;
        min-width: 120px !important;
    }
}

@media (max-width: 360px) {
    .product-item .product-image-container,
    .product-item > div:last-child {
        width: 110px !important;
        height: 110px !important;
        min-width: 110px !important;
    }
}

/* --- AJUSTE SÊNIOR: CARROSSEL DE DESTAQUES --- */
#section-featured .product-list-container {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important; 
    scroll-snap-type: x mandatory; 
    gap: 15px !important;
    padding: 10px 5px 20px 5px !important;
    -webkit-overflow-scrolling: touch; 
}

#section-featured .product-list-container::-webkit-scrollbar {
    display: none;
}

#section-featured .product-item {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 190px !important;
    max-width: 190px !important;
    height: 320px !important; 
    padding: 10px !important;
    gap: 0 !important;
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 18px !important;
    cursor: default !important;
    position: relative !important;
    transform: none !important;
    box-sizing: border-box !important;
}

#section-featured .product-item .product-image-container,
#section-featured .product-item > div:last-child {
    width: 100% !important;
    height: 140px !important;
    margin: 0 !important;
    padding: 0 !important;
    order: 1 !important;
}

#section-featured .product-item .product-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 12px !important;
}

/* --- AJUSTE FINAL: BADGE CENTRALIZADO SOBRE A FOTO NOS DESTAQUES --- */
#section-featured .product-item .product-badge {
    position: absolute !important;
    top: 10px !important;         /* Distância do topo */
    left: 50% !important;        /* Alinha o início do badge no meio */
    transform: translateX(-50%) !important; /* Move o badge para a esquerda metade da sua largura */
    z-index: 20 !important;
    margin: 0 !important;
    display: inline-flex !important;
    width: fit-content !important;
    font-size: 0.65rem !important; /* Aumentado levemente para melhor leitura */
    padding: 3px 10px !important;  /* Respiro interno mais elegante */
    pointer-events: none;
    white-space: nowrap !important; /* Garante que o texto não quebre */
}

/* Container da imagem com trava de overflow para o badge não vazar */
#section-featured .product-item .product-image-container {
    position: relative !important;
    width: 100% !important;
    height: 140px !important;
    margin: 0 !important;
    padding: 0 !important;
    order: 1 !important;
    overflow: hidden !important; 
    border-radius: 12px !important;
}

#section-featured .product-item .product-name {
    font-size: 1.15rem !important; 
    font-weight: 800 !important;
    color: #222 !important;
    margin: 5px 0 !important;
    line-height: 1.2 !important;
    
    /* Trava inteligente de 2 linhas com "..." */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important; /* Esconde o que vazar */
    text-overflow: ellipsis !important;
    
    /* Reserva de espaço para manter simetria (2 linhas) */
    min-height: 2.4em !important; 
    max-height: 2.4em !important;
}

#section-featured .product-item .product-info {
    display: flex !important;
    flex-direction: column !important;
    order: 3 !important;
    width: 100% !important;
    padding: 0 12px !important;
}

#section-featured .product-item .product-desc {
    font-size: 0.75rem !important;
    color: #666 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#section-featured .product-item .product-price {
    position: absolute !important;
    bottom: 20px !important; 
    left: 15px !important;
    font-size: 1.2rem !important; 
    font-weight: 900 !important;
    color: var(--primary-color) !important; 
    margin: 0 !important;
}

#section-featured .product-item:active {
    background-color: #fafafa !important;
}

#section-featured {
    margin-bottom: 5px !important; 
}

#section-featured .product-list-container {
    padding-bottom: 10px !important; 
}

#section-featured + hr {
    margin-top: 5px !important;
    margin-bottom: 15px !important;
}
/* --- MODAL DE BUSCA ESTILO POPUP FLUTUANTE (SOMENTE DESKTOP) --- */
@media (min-width: 992px) {
    /* 1. Transforma o fundo inteiro em uma máscara escura */
    #search-modal {
        background: rgba(0, 0, 0, 0.75) !important;
        backdrop-filter: blur(5px) !important;
        padding-top: 10vh !important; /* Descola do topo */
        align-items: center !important; /* Alinha os blocos internos ao centro */
        justify-content: flex-start !important; 
    }

    /* 2. Formata o Topo (Onde digita) como a parte de cima do cartão */
    #search-modal .search-container-header {
        width: 100% !important;
        max-width: 750px !important; /* Largura cravada do cartão */
        border-radius: 20px 20px 0 0 !important; 
        margin: 0 !important;
        border-bottom: 1px solid #eee !important;
    }

    /* 3. Formata a Lista de Resultados como a parte de baixo do cartão */
    #search-modal .search-results-area {
        width: 100% !important;
        max-width: 750px !important; 
        border-radius: 0 0 20px 20px !important; 
        height: 70vh !important; /* <-- MUDOU AQUI: Tiramos o "max-" para forçar a altura fixa */
        flex: none !important; 
        box-shadow: 0 20px 40px rgba(0,0,0,0.2) !important;
    }
}

/* --- MENU SUPERIOR PREMIUM (SOMENTE DESKTOP) --- */
@media (min-width: 992px) {
    /* 1. Container do Menu (Mais baixo, botões centralizados) */
    .mobile-nav-bottom {
        position: relative !important;
        top: 0 !important;
        bottom: auto !important;
        height: 70px !important; 
        width: 95% !important;
        max-width: 1050px !important;
        margin: 15px auto 0 !important;
        padding: 0 !important;
        
        display: flex !important; /* Garante que é flexbox no desktop */
        justify-content: center !important; /* Centraliza HORIZONTALMENTE */
        align-items: center !important; /* <--- ADICIONE ESTA LINHA PARA CENTRALIZAR VERTICALMENTE */
        
        gap: 25px !important; 
        background: transparent !important; 
        border-top: none !important;
        box-shadow: none !important;
        z-index: 1000 !important;
    }

    /* 2. Botões Retangulares Compactos e Elegantes */
    .nav-item {
        flex: 0 1 auto !important; 
        flex-direction: row !important; 
        gap: 8px !important; /* Ícone um pouquinho mais perto do texto */
        height: 44px !important; /* Botão mais fino */
        padding: 0 20px !important; /* Menos largura interna */
        background: #ffffff !important; 
        border: 1px solid #edf2f7 !important; 
        border-radius: 12px !important; /* Curvatura levemente mais suave */
        color: #444 !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .nav-item i {
        margin-bottom: 0 !important;
        font-size: 1.05rem !important; /* Ícone mais discreto */
        color: var(--primary-color) !important;
        transition: color 0.3s ease !important;
    }

    .nav-item span {
        font-size: 0.95rem !important; /* Texto menos gritante */
        font-weight: 700 !important; /* Removido o peso excessivo (era 800) */
        text-transform: none !important;
        transition: color 0.3s ease !important;
    }

    /* 3. Efeito Interativo de Destaque no Hover (Mouse por cima) */
    .nav-item:hover {
        background: var(--primary-color) !important; 
        border-color: var(--primary-color) !important;
        transform: translateY(-3px) !important; /* Salto mais sutil */
    }

    .nav-item:hover i,
    .nav-item:hover span {
        color: #ffffff !important; 
    }

    /* 4. Ajustes de rodapé para não sobrar espaço morto */
    body {
        padding-bottom: 30px !important;
    }

    .main-footer {
        padding-bottom: 30px !important;
    }

    /* 5. Desce o botão flutuante do carrinho */
    .floating-cart-bar {
        bottom: 30px !important;
    }
}