/* 1. RESET & BASE */
    *, *::before, *::after { box-sizing: border-box; }
    
    body { 
        background-color: #fff; 
        font-family: system-ui, -apple-system, sans-serif; 
        color: #333; 
        line-height: 1.3; 
        margin: 0;
    }

    /* 2. GRID SYSTEM & CONTAINERS */
    .container-fluid { width: 100%; padding: 0 10px; margin: 0 auto; }
    
    .row { 
        display: flex; 
        flex-wrap: wrap; 
        margin: 0 -5px; 
    }
    
    /* Mobile: 2 per row */
    .col-product {
        padding: 0 5px;
        margin-bottom: 15px;
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Tablet: 3 per row */
    @media (min-width: 768px) {
        .col-product { 
            flex: 0 0 33.333%; 
            max-width: 33.333%; 
        }
    }

    /* Desktop: 5 per row (Change to 25% for 4 per row) */
    @media (min-width: 992px) {
        .col-product { 
            flex: 0 0 19.9%; 
            max-width: 19.9%; 
        }
    }

    /* 3. HEADER & NAVIGATION */
    .header { 
        display: flex; 
        align-items: center; 
        justify-content: space-between; 
        padding: 10px 0; 
    }

    .header-slogan { 
        display: flex; 
        flex-direction: column; 
        text-align: right; 
        line-height: 1.2; 
    }
    .header-slogan span:first-child { font-size: 0.75rem; font-weight: 700; }
    .header-slogan span:last-child { font-size: 0.65rem; color: #666; }

    .category-icons { 
        display: flex; 
        justify-content: space-around; 
        margin-bottom: 20px; 
        padding: 12px 0; 
        border-bottom: 1px solid #eee; 
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .category-icons a { 
        text-decoration: none; 
        color: #444; 
        text-align: center; 
        flex: 1; 
        font-size: 0.6rem; 
        font-weight: 700; 
        display: flex; 
        flex-direction: column; 
        align-items: center;
        min-width: 50px;
    }

    .category-icons svg { 
        width: 24px; 
        height: 24px; 
        fill: #444; 
        margin-bottom: 5px; 
    }

    /* 4. COLLECTION PAGE HEADER */
    .collection-header { 
        text-align: center; 
        padding: 20px 10px; 
        background: #f9f9f9; 
        margin-bottom: 15px; 
        border-bottom: 1px solid #eee; 
    }
    .collection-header h1 { font-size: 1.1rem; font-weight: 800; text-transform: uppercase; margin: 0; }
    .collection-header p { font-size: 0.75rem; color: #777; margin: 5px 0 0; }

    /* 5. PRODUCT CARDS */
    .card { 
        border: 1px solid #eee; 
        border-radius: 4px; 
        height: 100%; 
        display: flex; 
        flex-direction: column; 
        background: #fff;
        overflow: hidden;
    }
    
    .card img { 
        width: 100%; 
        height: auto; 
        aspect-ratio: 330 / 206; 
        object-fit: cover; 
        display: block;
        background: #fdfdfd; 
    }

    .card-body { 
        padding: 8px; 
        display: flex; 
        flex-direction: column; 
        flex-grow: 1; 
    }

    .brand-price-row { 
        display: flex; 
        justify-content: space-between; 
        align-items: flex-start; 
        gap: 8px; 
        margin-top: auto; 
    }

    .brand-text { 
        font-size: 0.72rem; 
        font-weight: 600; 
        line-height: 1.2; 
        display: -webkit-box;
        -webkit-line-clamp: 2; 
        -webkit-box-orient: vertical;
        overflow: hidden;
        flex: 1; 
    }

    .price-text { 
        font-size: 0.9rem; 
        font-weight: 800; 
        color: #b02a37; 
        white-space: nowrap; 
    }