/* Critical CSS - Above the fold styles */

/* Bootstrap Grid Critical */
.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.col-12 { width: 100%; }
.col-md-6 { width: 50%; }
.col-lg-3 { width: 25%; }
.col-lg-4 { width: 33.333%; }

/* Header Critical Styles */
.header { background: var(--header_bg, #fff); position: sticky; top: 0; z-index: 999; }
.site-header { padding: 10px 0; }
.logo img { max-height: 60px; width: auto; }

/* Navigation Critical */
.main-nav { display: flex; align-items: center; justify-content: space-between; }
.nav-menu { list-style: none; display: flex; margin: 0; padding: 0; }
.nav-item { margin: 0 15px; }
.nav-link { text-decoration: none; color: var(--main_text, #333); font-weight: 500; }

/* Typography Critical */
body { font-family: 'Poppins', sans-serif; margin: 0; padding: 0; line-height: 1.6; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 15px; font-weight: 600; }
p { margin: 0 0 15px; }

/* Buttons Critical */
.btn { 
    display: inline-block; 
    padding: 12px 24px; 
    background: var(--custom1, #007bff); 
    color: white; 
    text-decoration: none; 
    border-radius: 5px; 
    border: none; 
    cursor: pointer; 
    font-weight: 500; 
    transition: all 0.3s ease;
}
.btn:hover { background: var(--custom2, #0056b3); }

/* Hero Section Critical */
.hero-section { 
    background: var(--herobg, #f8f9fa); 
    padding: 60px 0; 
    text-align: center; 
}

/* Product Grid Critical */
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.product-card { 
    background: white; 
    border-radius: 8px; 
    overflow: hidden; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
}

/* Mobile First - Critical Responsive */
@media (max-width: 768px) {
    .container { padding: 0 10px; }
    .col-md-6 { width: 100%; }
    .hero-section { padding: 40px 0; }
    .nav-menu { flex-direction: column; }
}

/* Layout Shift Prevention */
img { max-width: 100%; height: auto; }
.lazy-image { 
    background: #f0f0f0; 
    min-height: 200px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

/* Loading States */
.loading { opacity: 0.7; pointer-events: none; }
.skeleton { 
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}