/**
 * CSS ULTRA-AGRESSIVO PARA MOBILE - FORÇA 1 COLUNA
 * Este arquivo força 1 coluna no mobile com máxima especificidade possível
 */

/* FORÇA 1 COLUNA NO MOBILE - ULTRA ESPECÍFICO */
@media screen and (max-width: 768px) {
    /* TODOS OS GRIDS POSSÍVEIS - MÁXIMA ESPECIFICIDADE */
    html body div.paw-shortcode-container div.paw-products-grid,
    html body div.paw-shortcode-container div.paw-shortcode-grid,
    html body .paw-shortcode-container .paw-products-grid,
    html body .paw-shortcode-grid,
    body .paw-shortcode-container .paw-products-grid,
    body .paw-shortcode-grid,
    .paw-shortcode-container .paw-products-grid,
    .paw-shortcode-grid,
    .paw-products-grid,
    .paw-shortcode-grid,
    
    /* TODAS AS VARIAÇÕES DE COLUNAS */
    html body div.paw-shortcode-container[data-colunas="1"] div.paw-products-grid,
    html body div.paw-shortcode-container[data-colunas="2"] div.paw-products-grid,
    html body div.paw-shortcode-container[data-colunas="3"] div.paw-products-grid,
    html body div.paw-shortcode-container[data-colunas="4"] div.paw-products-grid,
    html body div.paw-shortcode-container[data-colunas="5"] div.paw-products-grid,
    html body div.paw-shortcode-container[data-colunas="6"] div.paw-products-grid,
    
    .paw-shortcode-container[data-colunas="1"] .paw-products-grid,
    .paw-shortcode-container[data-colunas="2"] .paw-products-grid,
    .paw-shortcode-container[data-colunas="3"] .paw-products-grid,
    .paw-shortcode-container[data-colunas="4"] .paw-products-grid,
    .paw-shortcode-container[data-colunas="5"] .paw-products-grid,
    .paw-shortcode-container[data-colunas="6"] .paw-products-grid,
    
    /* CARROSSEL PAGES */
    .paw-products-container,
    .paw-carousel-page,
    .paw-carousel-slide,
    
    /* WOOCOMMERCE PAGES */
    .woocommerce-cart .paw-carousel-page,
    .woocommerce-checkout .paw-carousel-page,
    .single-product .paw-carousel-page,
    .woocommerce-cart .paw-products-container,
    .woocommerce-checkout .paw-products-container,
    .single-product .paw-products-container {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        padding: 15px !important;
        display: grid !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* FORÇA AINDA MAIS ESPECÍFICO - TODOS OS BREAKPOINTS MOBILE */
@media screen and (max-width: 767px) {
    html body div.paw-shortcode-container div.paw-products-grid {
        grid-template-columns: 1fr !important;
    }
}

@media screen and (max-width: 768px) {
    html body div.paw-shortcode-container div.paw-products-grid {
        grid-template-columns: 1fr !important;
    }
}

@media screen and (max-width: 769px) {
    html body div.paw-shortcode-container div.paw-products-grid {
        grid-template-columns: 1fr !important;
    }
}

/* FORÇA PARA MOBILE PEQUENO */
@media screen and (max-width: 480px) {
    html body .paw-shortcode-container .paw-products-grid,
    html body .paw-shortcode-grid,
    .paw-products-container,
    .paw-carousel-page,
    .paw-carousel-slide {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 12px !important;
    }
}

/* FORÇA PARA QUALQUER DISPOSITIVO PEQUENO */
@media screen and (max-width: 900px) {
    .paw-shortcode-container[data-colunas="3"] .paw-products-grid,
    .paw-shortcode-container[data-colunas="4"] .paw-products-grid,
    .paw-shortcode-container[data-colunas="5"] .paw-products-grid,
    .paw-shortcode-container[data-colunas="6"] .paw-products-grid {
        grid-template-columns: 1fr !important;
    }
}

/* FORÇA USANDO ATRIBUTO STYLE - MÁXIMA PRIORIDADE */
@media screen and (max-width: 768px) {
    .paw-products-grid[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    
    .paw-shortcode-grid[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* FORÇA PARA PRODUTOS INDIVIDUAIS NO MOBILE */
@media screen and (max-width: 768px) {
    .paw-product-item {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 15px 0 !important;
        flex: none !important;
    }
}

/* RESET COMPLETO PARA MOBILE */
@media screen and (max-width: 768px) {
    .paw-shortcode-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }
    
    .paw-shortcode-container * {
        box-sizing: border-box !important;
    }
}

/* DEBUG VISUAL EXTREMO */
@media screen and (max-width: 768px) {
    .paw-mobile-debug-extreme .paw-products-grid {
        border: 5px solid #ff0000 !important;
        background: rgba(255, 0, 0, 0.3) !important;
        position: relative !important;
    }
    
    .paw-mobile-debug-extreme .paw-products-grid::before {
        content: "🚨 MOBILE: DEVE SER 1 COLUNA! 🚨";
        position: absolute;
        top: -35px;
        left: 0;
        right: 0;
        background: #ff0000;
        color: white;
        padding: 8px;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        z-index: 9999;
        animation: blink 1s infinite;
    }
    
    @keyframes blink {
        0%, 50% { opacity: 1; }
        51%, 100% { opacity: 0.5; }
    }
}

/* FORÇA USANDO !important EM TUDO */
@media screen and (max-width: 768px) {
    .paw-shortcode-container .paw-products-grid,
    .paw-shortcode-container .paw-shortcode-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: 15px !important;
        row-gap: 15px !important;
        column-gap: 15px !important;
        display: grid !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        justify-content: stretch !important;
        align-items: stretch !important;
        align-content: stretch !important;
        justify-items: stretch !important;
    }
}