/*
Theme Name: CraftCommerce
Theme URI: https://vtis.com.br
Author: VTIS
Author URI: https://vtis.com.br
Description: Um tema premium otimizado para lojas de artesanato, aviamentos e pequenos e-commerces. Focado em conversão e usabilidade.
Version: 1.0.2
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: craftcommerce
Tags: e-commerce, custom-colors, custom-logo, translation-ready, woocommerce
*/

/* Reset e utilitários globais residuais - O layout principal usa Tailwind CSS */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Logo: fundo transparente (sem caixa preta) */
.craftcommerce-logo,
.custom-logo-link,
.custom-logo-link img,
.custom-logo {
    background: transparent !important;
    box-shadow: none;
}

/* WooCommerce loop: evita float/width padrão que quebra o grid Tailwind */
.woocommerce ul.products,
ul.products {
    display: grid !important;
    float: none !important;
    clear: both;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
    display: none !important;
    content: none !important;
}
.woocommerce ul.products li.product,
ul.products li.product {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar { 
    width: 8px; 
}
::-webkit-scrollbar-track { 
    background: #f1f1f1; 
}
::-webkit-scrollbar-thumb { 
    background: #cbd5e1; 
    border-radius: 4px; 
}
::-webkit-scrollbar-thumb:hover { 
    background: #94a3b8; 
}

/* Mega Menu Hover System (se não usarmos JS) */
.mega-menu-trigger:hover .mega-menu {
    display: grid;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-menu {
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

/* Animações */
.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}