/* ===================================
   ZuluCommerce - Main Styles
   Modern E-commerce Design System
   =================================== */

/* CSS Variables - Design Tokens */
:root {
    /* Colors - Nueva Paleta */
    --primary: #0B1F3B; /* Primary (Navbar) - azul marino profundo */
    --primary-hover: #12325E; /* Primary Hover */
    --primary-dark: #0B1F3B;
    --primary-light: #2A5BD7;
    --secondary: #ec4899;
    --secondary-dark: #db2777;
    --accent: #FFB703; /* Accent (CTA principal) - amarillo dorado */
    --accent-hover: #E5A200; /* Accent Hover */
    
    /* Neutrals */
    --dark: #0F172A; /* Text principal */
    --dark-secondary: #1e293b;
    --gray: #64748B; /* Text secundario */
    --gray-light: #cbd5e1;
    --gray-lighter: #E2E8F0; /* Border */
    --background: #F6F8FC; /* Background - gris claro frío */
    --white: #FFFFFF; /* Cards */
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #0B1F3B 0%, #2A5BD7 100%); /* Hero Gradient */
    --gradient-secondary: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
    
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Layout */
    --container-max-width: 1280px;
    --navbar-height: 70px;
    
    /* Container Query Breakpoints (port-view) */
    --container-sm: 480px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
}

/* Reset & Base Styles */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--dark);
    background-color: var(--background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    /* Define body as container for viewport-based queries */
    container-type: inline-size;
    container-name: viewport;
}

/* Degradado desde el header (azul) hasta background - Solo en desktop */
/* Usar viewport como contenedor para body gradients */
@container viewport (min-width: 1024px) {
    body {
        background: linear-gradient(180deg, 
            var(--primary) 0%, 
            var(--primary) var(--navbar-height), 
            rgba(11, 31, 59, 0.9) calc(var(--navbar-height) + 80px),
            rgba(11, 31, 59, 0.7) calc(var(--navbar-height) + 150px),
            rgba(11, 31, 59, 0.5) calc(var(--navbar-height) + 220px),
            rgba(11, 31, 59, 0.3) calc(var(--navbar-height) + 300px),
            rgba(11, 31, 59, 0.15) calc(var(--navbar-height) + 400px),
            rgba(11, 31, 59, 0.05) calc(var(--navbar-height) + 500px),
            var(--background) calc(var(--navbar-height) + 600px),
            var(--background) 100%);
        background-attachment: fixed;
    }
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary);
}

ul {
    list-style: none;
}

/* Container */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* Navigation - Mercado Libre Style */
:root {
    --header-bg: var(--primary);
    --header-height: 100px;
}

.navbar {
    position: sticky;
    top: 0;
    width: 100%;
    /* height: auto;  removed fixed height to allow content to dictate, or set min-height */
    height: auto;
    min-height: var(--header-height);
    background: var(--header-bg); /* Primary: #0B1F3B */
    border-bottom: none; /* Borde eliminado */
    z-index: 1000;
    box-shadow: var(--shadow-sm);
    padding-bottom: var(--spacing-sm);
    /* Define as container for responsive behavior */
    container-type: inline-size;
    container-name: navbar;
}

.navbar .container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-sm);
}

/* Header Top Row */
.header-top {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    /* Define as container for responsive behavior */
    container-type: inline-size;
    container-name: header-top;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
    text-decoration: none;
    color: var(--white);
    min-width: 150px;
}

.logo-icon {
    font-size: var(--font-size-2xl);
}

.header-search {
    flex: 1;
    display: flex;
    max-width: 600px;
    background: var(--white);
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.2);
    padding: 2px;
}

.search-input {
    flex: 1;
    border: none;
    padding: 10px 15px;
    font-size: 16px;
    outline: none;
    background: transparent;
    color: #333;
}

.search-btn {
    background: none;
    border: none;
    padding: 0 15px;
    border-left: 1px solid var(--gray-lighter); /* Border: #E2E8F0 */
    cursor: pointer;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-promo {
    /* Space for a promo image/text on the right if needed, for now just hidden or filler */
    width: 340px; 
    text-align: right;
    font-size: var(--font-size-sm);
    color: var(--white);
}

/* Header Bottom Row */
.header-bottom {
    display: flex;
    align-items: flex-end; /* Align bottom to match text baselines */
    justify-content: space-between;
    padding-left: 160px; /* Offset to align with search bar start roughly */
    /* Define as container for responsive behavior */
    container-type: inline-size;
    container-name: header-bottom;
}

/* Make responsive: on small screens remove padding - Using Container Queries (port-view) */
@container header-bottom (max-width: 1024px) {
    .header-bottom {
        padding-left: 0;
    }
}

.nav-links {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
}

.nav-link {
    font-size: 14px;
    color: var(--white);
    text-decoration: none;
    font-weight: 400;
    opacity: 0.9;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.nav-link:hover {
    opacity: 1;
    color: var(--white);
}

.nav-link.active {
    font-weight: 600;
}

.user-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

/* Dropdown specific */
.dropdown-container {
    position: relative;
}

.dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: var(--spacing-sm);
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    min-width: 250px;
    max-height: 500px;
    overflow-y: auto;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-base);
    border: 1px solid var(--gray-lighter);
}

.dropdown-container:hover .dropdown-menu,
.dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu-item {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--dark);
    text-decoration: none;
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--gray-lighter);
}

.dropdown-menu-item:last-child {
    border-bottom: none;
}

.dropdown-menu-item:hover {
    background: var(--background);
    color: var(--primary);
}

.dropdown-loading {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--gray);
    font-size: var(--font-size-sm);
}

/* Cart Icon */
.cart-btn {
    position: relative;
    color: var(--white);
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--secondary); /* Keep site accent */
    color: white;
    font-size: 10px;
    border-radius: 50%;
    padding: 2px 5px;
}

.location-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    margin-right: var(--spacing-md);
    cursor: pointer;
    min-width: 100px;
}

.location-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
}

.location-value {
    font-size: 14px;
    color: var(--white);
}

/* Hero Section */
.hero {
    position: relative;
    min-height: calc(100vh - var(--navbar-height));
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--gradient-primary); /* Hero Gradient: linear-gradient(135deg, #0B1F3B 0%, #2A5BD7 100%) */
}

/* En desktop, el hero es transparente para mostrar el degradado del body */
@container hero (min-width: 1024px) {
    .hero {
        background: transparent;
    }
}

.hero-background {
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="rgba(255,255,255,0.05)"/></svg>');
    opacity: 0.1;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 700px;
    padding: var(--spacing-3xl) 0;
    color: var(--white);
}

.hero-title {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-extrabold);
    line-height: 1.1;
    margin-bottom: var(--spacing-lg);
    color: var(--white);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 4px 20px rgba(0, 0, 0, 0.2);
}

.gradient-text {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    position: relative;
}

.gradient-text::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.hero-subtitle {
    font-size: var(--font-size-xl);
    color: var(--white);
    opacity: 0.95;
    margin-bottom: var(--spacing-2xl);
    line-height: 1.8;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
}

.hero-actions {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.hero-stats {
    display: flex;
    gap: var(--spacing-3xl);
    margin-top: var(--spacing-3xl);
    padding-top: var(--spacing-2xl);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(11, 31, 59, 0.4);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
}

.stat {
    text-align: center;
}

.stat-number {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    display: block;
    color: var(--white);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--white);
    opacity: 0.9;
    margin-top: var(--spacing-xs);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Sections */
.section {
    padding: var(--spacing-3xl) 0;
}

.section-gray {
    background-color: var(--background); /* Background: #F6F8FC */
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.section-title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--gray);
}

.section-footer {
    text-align: center;
    margin-top: var(--spacing-2xl);
}

/* Product Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-xl);
}

/* Categories Grid */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.category-card {
    background: var(--white);
    padding: 0;
    border-radius: var(--radius-lg);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
}

.category-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.category-image-container {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--gray-lighter);
    position: relative;
}

.category-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.category-card:hover .category-image {
    transform: scale(1.1);
}

.category-icon {
    font-size: var(--font-size-5xl);
    margin-bottom: var(--spacing-md);
}

.category-name {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
    color: var(--dark);
}

.category-count {
    color: var(--gray);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
    padding: 0 var(--spacing-md);
}

/* Footer */
.footer {
    background: var(--dark);
    color: var(--white);
    padding: var(--spacing-3xl) 0 var(--spacing-xl);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
}

.footer-text {
    color: var(--gray-light);
    line-height: 1.8;
}

.footer-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-md);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.footer-links a {
    color: var(--gray-light);
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--white);
}

.newsletter-form {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.newsletter-input {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--gray);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--white);
}

.newsletter-input::placeholder {
    color: var(--gray);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--dark-secondary);
    color: var(--gray-light);
}

.footer-social {
    display: flex;
    gap: var(--spacing-md);
}

.footer-social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--dark-secondary);
    transition: background var(--transition-fast);
}

.footer-social a:hover {
    background: var(--primary);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.8s ease-out;
}

.animate-fade-in-delay {
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.animate-fade-in-delay-2 {
    animation: fadeInUp 0.8s ease-out 0.4s both;
}

/* Loading Skeleton */
.loading-skeleton {
    display: contents;
}

.skeleton-card {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: var(--radius-lg);
    height: 350px;
}

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

/* Responsive Design - Using Container Queries (port-view) */
@container viewport (max-width: 768px) {
    .nav-links {
        display: none;
    }
    
    .hero-title {
        font-size: var(--font-size-3xl);
    }
    
    .hero-subtitle {
        font-size: var(--font-size-base);
    }
    
    .hero-stats {
        gap: var(--spacing-lg);
    }
    
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--spacing-md);
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }
}
/* ===================================
   Responsive Design (Mobile & Tablet)
   =================================== */

/* Mobile Menu Trigger - Hidden by default (Desktop) */
.mobile-menu-trigger {
    display: none;
    background: none;
    border: none;
    color: var(--white);
    cursor: pointer;
    padding: 0;
    margin-right: var(--spacing-md);
}

/* Mobile Menu Drawer & Overlay */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    background: var(--white);
    z-index: 2001;
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    display: flex;
    flex-direction: column;
}

.mobile-menu-drawer.active {
    transform: translateX(0);
}

.mobile-menu-header {
    background: var(--primary);
    padding: var(--spacing-lg) var(--spacing-md);
    color: var(--white);
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.user-info-mobile {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.user-avatar-placeholder {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.user-details {
    display: flex;
    flex-direction: column;
}

.welcome-text {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
}

.login-link-mobile {
    font-size: var(--font-size-sm);
    color: var(--white);
    opacity: 0.9;
    text-decoration: none;
    margin-top: 2px;
}

.close-menu-btn {
    background: none;
    border: none;
    color: var(--white);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.8;
}

.mobile-menu-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md) 0;
}

.mobile-menu-item {
    display: block;
    padding: var(--spacing-md) var(--spacing-lg);
    color: var(--dark);
    text-decoration: none;
    font-size: var(--font-size-base);
    transition: background var(--transition-fast);
}

.mobile-menu-item:hover {
    background: var(--background);
    color: var(--primary);
}

.mobile-menu-divider {
    height: 1px;
    background: var(--gray-lighter);
    margin: var(--spacing-sm) 0;
}

.mobile-menu-section-title {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--gray);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
}

/* Media Queries */

/* Tablet and smaller (max-width: 1024px) */
@media (max-width: 1024px) {
    :root {
        --header-height: 120px;
        /* Slight adjust if needed */
    }

    /* Header Layout */
    .header-top {
        gap: var(--spacing-md);
        flex-wrap: wrap;
        padding-bottom: var(--spacing-sm);
    }

    .mobile-menu-trigger {
        display: block;
        order: -1;
        /* First item */
    }

    .logo {
        flex: 1;
        justify-content: flex-start;
        /* Align left next to hamburger */
        min-width: auto;
    }

    /* Hide desktop elements */
    .header-promo,
    .location-info {
        display: none;
    }

    /* Search Bar on new row/stacked or compressed */
    .header-search {
        order: 10;
        /* Last */
        width: 100%;
        max-width: none;
        margin-top: var(--spacing-sm);
    }

    .header-bottom {
        display: none;
        /* Hide standard nav bar */
    }

    /* Reuse cart from user-actions or assume a separate mobile cart icon if needed.
       However, the current HTML structure has cart in .header-bottom which is hidden.
       We might need to reveal just the cart from .header-bottom or duplicate it.
       Let's use a trick: Move User Actions (or just cart) to top row via CSS?
       The DOM structure makes it hard without JS or duplicate HTML.
       For now, let's assume the user will access cart via menu or we add a specific mobile cart icon in HTML later if strictly required.
       BUT, standard pattern usually has Cart in header.
       Let's try to target .user-actions inside .header-bottom to show ONLY cart icon absolute positioned or similar?
       Actually, `nav-links` is the main thing to hide. `user-actions` has the cart.
    */

    .header-bottom {
        display: flex;
        /* Keep visible for cart */
        padding-left: 0;
        padding-top: 0;
        justify-content: flex-end;
        /* Align right */
        position: absolute;
        top: 22px;
        /* Adjust based on top padding */
        right: var(--spacing-lg);
        width: auto;
    }


    .nav-links {
        display: none;
        /* Hide links */
    }

    .user-actions {
        gap: var(--spacing-md);
    }

    .user-actions .dropdown-container,
    .user-actions .nav-link {
        display: none;
        /* Hide user menu text and links, keep only cart if possible or hide all except cart */
    }

    /* Show Cart Button specifically if it has a class? 
       .cart-btn is inside user-actions.
    */
    .user-actions .cart-btn {
        display: flex;
    }

    /* Hero */
    .hero-title {
        font-size: var(--font-size-4xl);
        text-align: center;
    }

    .hero-subtitle {
        text-align: center;
        font-size: var(--font-size-lg);
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-stats {
        width: 100%;
        justify-content: space-around;
        padding: var(--spacing-md);
        gap: var(--spacing-md);
    }

    .stat-number {
        font-size: var(--font-size-2xl);
    }

    /* Grids */
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: var(--spacing-lg);
    }
}

/* Mobile (max-width: 640px) */
@media (max-width: 640px) {
    .container {
        padding: 0 var(--spacing-md);
    }

    /* Reduce font sizes */
    .hero-title {
        font-size: var(--font-size-3xl);
    }

    /* Stats stack on very small screens? Or Grid 2x2 */
    .hero-stats {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        /* 3 cols if they fit, or... */
        gap: var(--spacing-sm);
        text-align: center;
    }

    /* Product Cards 2 per row is tight, maybe 1? Or 2 small ones. 
       minmax(150px, 1fr) usually allows 2 per row on 360px+ screens.
    */
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Force 2 columns */
        gap: var(--spacing-sm);
    }

    .category-card .category-image-container {
        height: 120px;
    }

    .category-name {
        font-size: var(--font-size-base);
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        /* Stack footer columns */
        text-align: center;
        gap: var(--spacing-xl);
    }

    .footer-links {
        align-items: center;
    }

    .footer-logo {
        justify-content: center;
    }

    .newsletter-form {
        flex-direction: column;
    }

    /* Hide some hero text if too long? */
    .hero-subtitle {
        font-size: var(--font-size-base);
        margin-bottom: var(--spacing-lg);
    }
}

/* Small Mobile (max-width: 380px) */
@media (max-width: 380px) {
    .products-grid {
        grid-template-columns: 1fr;
        /* 1 column on tiny screens */
    }

    .hero-stats {
        grid-template-columns: 1fr;
        /* Stack stats */
    }
}/* FIXES FOR HEADER OVERLAP */

/* 1. Ensure Mobile Menu is strictly hidden on Desktop */
@media (min-width: 1025px) {

    .mobile-menu-overlay,
    .mobile-menu-drawer,
    .mobile-menu-trigger {
        display: none !important;
    }

    /* Ensure Header Bottom is relative/static on Desktop */
    .header-bottom {
        position: static !important;
        display: flex !important;
        padding-left: 160px;
        /* Restore desktop padding */
        padding-right: 0;
        margin-top: 0;
    }

    .nav-links {
        display: flex !important;
    }
}

/* 2. Fix Navbar Height on Desktop to prevent overlap */
@media (min-width: 1025px) {
    .navbar {
        height: auto !important;
        min-height: auto !important;
        /* Let content dictate height */
        padding-bottom: 20px;
        /* Add extra breathing room */
    }

    .navbar .container {
        /* Ensure column stacking works */
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    /* Ensure hero doesn't visually clash if sticky */
    .hero {
        position: relative;
        z-index: 1;
        /* Keep below navbar (1000) */
        /* If navbar is sticky, hero naturally sits below it in flow?
           No, sticky is in-flow.
           The issue 'y=108' implies sticky might be behaving weirdly if height is fixed.
        */
    }
}

/* 3. Improve Tablet/Mobile Header Layout to avoid Search/Cart collision */
@media (max-width: 1024px) {
    .header-bottom {
        /* Cart Container */
        position: absolute;
        top: 20px;
        right: 20px;
        width: auto;
        padding: 0;
        margin: 0;
        z-index: 1005;
        /* Above everything */
    }

    .header-search {
        /* Ensure search bar clears the top row elements */
        margin-top: 10px;
        position: relative;
        z-index: 2;
        width: 100%;
    }

    .header-top {
        padding-bottom: 15px;
        position: relative;
    }
}