/* Start custom CSS *//* ============================================================
   RESPONSIVIDADE MOBILE OTIMIZADA (APP STORE STYLE)
   Substitua as suas @media do final do código por estas
   ============================================================ */

/* --- TABLETS E CELULARES GRANDES (Até 768px) --- */
@media (max-width: 768px) {
    .plataforma-loja .woocommerce .products,
    .plataforma-loja .products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* Reduz o padding interno do card para dar respiro lateral e vertical */
    .plataforma-loja .products .product .woocommerce-LoopProduct-link .product-info {
        padding: 12px 10px 14px !important;
        gap: 8px !important;
    }

    /* Ajusta o tamanho da fonte do título para não quebrar feio */
    .plataforma-loja .products .product .woocommerce-LoopProduct-link .woocommerce-loop-product__title {
        font-size: 0.85rem !important;
        min-height: calc(2 * 1.3 * 0.85rem) !important; /* Mantém a altura exata de 2 linhas */
    }

    /* Ajusta o preço */
    .plataforma-loja .products .product .woocommerce-LoopProduct-link .price {
        font-size: 1rem !important;
    }

    /* Botão de compra mais compacto */
    .plataforma-loja .products .product .button,
    .plataforma-loja .products .product .add_to_cart_button {
        padding: 8px 10px !important;
        font-size: 0.75rem !important;
        border-radius: 8px !important;
        margin: 8px 0 0 0 !important;
        letter-spacing: 0.02em !important;
    }

    /* Oculta a descrição curta no celular para o card ficar limpo e focado na conversão */
    .plataforma-loja .products .product .woocommerce-LoopProduct-link .woocommerce-product-details__short-description,
    .plataforma-loja .products .product .woocommerce-LoopProduct-link .description {
        display: none !important;
    }
}

/* --- CELULARES PADRÃO (Até 480px) --- */
@media (max-width: 480px) {
    .plataforma-loja .woocommerce .products,
    .plataforma-loja .products {
        grid-template-columns: repeat(2, 1fr) !important; /* Mantém 2 colunas lado a lado */
        gap: 10px !important;
    }
    
    /* Aperta um pouco mais o botão para caber em telas menores sem quebrar a palavra */
    .plataforma-loja .products .product .button,
    .plataforma-loja .products .product .add_to_cart_button {
        font-size: 0.7rem !important;
        padding: 8px 4px !important; 
    }
    
    /* Reduz o ícone de + do botão (se houver) para economizar espaço */
    .plataforma-loja .products .product .add_to_cart_button::before {
        margin-right: 4px !important;
    }
}

/* --- CELULARES MUITO PEQUENOS (Ex: iPhone SE antigo - Até 360px) --- */
@media (max-width: 360px) {
    /* Força 1 coluna para não destruir o layout se a tela for extremamente estreita */
    .plataforma-loja .woocommerce .products,
    .plataforma-loja .products {
        grid-template-columns: 1fr !important;
    }
    
    /* Devolve um pouco de padding e tamanho já que agora temos a largura inteira */
    .plataforma-loja .products .product .woocommerce-LoopProduct-link .product-info {
        padding: 16px 14px !important;
    }
    
    .plataforma-loja .products .product .woocommerce-LoopProduct-link .woocommerce-loop-product__title {
        font-size: 1rem !important;
    }
    
    .plataforma-loja .products .product .button,
    .plataforma-loja .products .product .add_to_cart_button {
        font-size: 0.85rem !important;
        padding: 12px 10px !important;
    }
}/* End custom CSS */