/* ========== AJUSTES GERAIS PARA MOBILE ========== */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    .container {
        padding: 0 15px;
    }
}

/* ========== HEADER MOBILE ========== */
@media (max-width: 768px) {
    .header {
        padding: 0.8rem 0;
    }

    .header .header-content {
        gap: 0.8rem;
        padding: 0 10px;
    }

    .logo-img {
        height: 40px;
    }

    .nav ul {
        gap: 0.8rem;
        font-size: 0.7rem;
        justify-content: center;
        flex-wrap: wrap;
    }

    .nav a {
        font-size: 0.7rem;
    }
}

/* ========== HERO MOBILE ========== */
@media (max-width: 768px) {
    .hero {
        padding: 40px 0;
        min-height: auto;
    }

    .hero h1 {
        font-size: 24px;
    }

    .hero p {
        font-size: 14px;
    }

    .hero .btn {
        padding: 8px 16px;
        font-size: 12px;
    }
}

/* ========== CATEGORIAS MOBILE ========== */
@media (max-width: 768px) {
    .categorias {
        padding: 2rem 0;
    }

    .categorias-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 0 10px;
    }

    .categoria-card {
        max-width: 100%;
    }

    .img-wrapper {
        margin-bottom: 10px;
    }
}

@media (max-width: 480px) {
    .categorias-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* ========== CATÁLOGO MOBILE ========== */
@media (max-width: 768px) {
    .catalogo {
        padding: 2rem 0;
    }

    .catalogo h2 {
        font-size: 20px;
        margin-bottom: 1.5rem;
    }

    .produtos-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1rem;
        padding: 0 10px;
    }

    .produto-img-container {
        height: 150px;
    }

    .produto-info {
        padding: 10px;
    }

    .produto-info h3 {
        font-size: 0.85rem;
        min-height: auto;
    }

    .produto-preco {
        font-size: 1rem;
    }

    .btn-comprar {
        padding: 8px;
        font-size: 0.75rem;
    }

    .select-personalizado {
        padding: 6px;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .produtos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
        padding: 0 8px;
    }

    .produto-img-container {
        height: 120px;
    }
}

/* ========== CARRINHO MOBILE ========== */
@media (max-width: 768px) {
    .carrinho-flutuante {
        bottom: 20px;
        right: 20px;
    }

    .btn-carrinho-flutuante {
        width: 55px;
        height: 55px;
        font-size: 24px;
    }

    #badge-carrinho {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    .modal-content {
        max-width: 100%;
        border-radius: 20px 20px 0 0;
    }

    .modal-header {
        padding: 15px;
    }

    .modal-header h2 {
        font-size: 18px;
    }

    .itens-carrinho {
        padding: 10px;
    }

    .item-carrinho {
        gap: 10px;
        padding: 10px;
    }

    .item-carrinho-img {
        width: 70px;
        height: 70px;
    }

    .item-carrinho-nome {
        font-size: 13px;
    }

    .item-carrinho-preco {
        font-size: 13px;
    }

    .item-carrinho-controles {
        gap: 4px;
    }

    .item-carrinho-controles input {
        width: 40px;
        padding: 3px;
        font-size: 11px;
    }

    .btn-remover-item {
        padding: 3px 6px;
        font-size: 11px;
    }

    .carrinho-resumo {
        padding: 15px;
    }

    .resumo-item {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .botoes-carrinho {
        gap: 8px;
    }

    .btn-secundario,
    .btn-primario {
        padding: 10px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .btn-carrinho-flutuante {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .modal-header h2 {
        font-size: 16px;
    }
}

/* ========== FOOTER MOBILE ========== */
@media (max-width: 768px) {
    footer {
        padding: 2rem 0;
    }

    footer h3 {
        font-size: 16px;
    }

    footer p,
    footer a {
        font-size: 12px;
    }
}

/* ========== AJUSTES GERAIS PARA TELAS MUITO PEQUENAS ========== */
@media (max-width: 480px) {
    .container {
        padding: 0 10px;
    }

    body {
        font-size: 13px;
    }
}