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

    /* 2. LITE GRID SYSTEM */
    .container-fluid { 
        width: 100%; 
        padding: 0 15px; 
        margin: 0 auto; 
    }
    
    .row { 
        display: flex; 
        flex-wrap: wrap; 
        margin: 0 -8px; 
    }

    /* Column Sizing */
    .row > * { 
        flex-shrink: 0; 
        width: 100%; /* Default: 1 per row (Mobile) */
        padding: 0 8px; 
        margin-bottom: 16px; 
    }

    @media (min-width: 768px) {
        .col-md-6 { flex: 0 0 50%; max-width: 50%; } /* 2 per row on Tablet */
    }

    @media (min-width: 992px) {
        .col-lg-3 { flex: 0 0 25%; max-width: 25%; } /* 4 per row on Desktop */
    }

    /* 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; /* Allows scrolling if icons overflow on tiny screens */
    }
    
    .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. CARD STYLING */
    .card { 
        border: 1px solid #eaeaea; 
        border-radius: 6px; 
        overflow: hidden; 
        height: 100%; 
        background-color: #fff; 
        transition: transform 0.2s ease, border-color 0.2s ease; 
    }

    .card:hover { 
        border-color: #bbb; 
        transform: translateY(-2px); 
    }

    .card img { 
        width: 100%; 
        height: auto; 
        aspect-ratio: 400 / 250; 
        object-fit: cover; /* Ensures 400x250 area is filled nicely */
        display: block; 
        background-color: #f9f9f9;
    }

    .cat-title { 
        font-size: 0.85rem; 
        font-weight: 600; 
        text-align: center; 
        padding: 12px 8px; 
        margin: 0; 
        color: #222; 
        text-transform: capitalize;
    }

    /* 5. UTILITIES */
    .text-decoration-none { text-decoration: none !important; color: inherit; }
    .shadow-none { box-shadow: none !important; }
    .p-0 { padding: 0 !important; }