/* ===========================
       ALL CATEGORIES PAGE STYLES
       =========================== */
    
    .categories-page {
        padding-top: 100px; /* Space for fixed header */
        padding-bottom: 120px; /* Space for fixed footer */
        min-height: 100vh;
        background: var(--bg-body);
        font-family: 'Poppins', sans-serif;
    }

    /* --- 1. Page Header --- */
    .page-header {
        text-align: center;
        margin-bottom: 5px;
                margin-top: -35px;
        
    }
    .page-title {
        font-size: 26px; font-weight: 800; 
        color: var(--dark-text); 
    }
    .page-subtitle {
        font-size: 14px; color: var(--light-text);
        max-width: 400px; margin: 0 auto;
    }

    /* --- 2. Category Grid --- */
    .category-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 Columns for Mobile */
        gap: 15px;
        padding: 0 5px;
    }

    /* Responsive: 4 Columns on Tablet/Desktop */
    @media (min-width: 768px) {
        .category-grid {
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
        }
    }

    /* --- 3. Category Card Design --- */
    .cat-card {
        background: var(--white);
        border-radius: 24px;
        padding: 20px;
        text-decoration: none;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        text-align: center;
        box-shadow: var(--card-shadow);
        border: 2px solid transparent;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        position: relative;
        overflow: hidden;
    }

    /* Hover Effect */
    .cat-card:hover {
        transform: translateY(-5px);
        border-color: var(--primary-orange);
        box-shadow: 0 15px 30px rgba(255, 107, 0, 0.15);
    }
    .cat-card:active { transform: scale(0.98); }

    /* Image Styling */
    .cat-img-box {
        width: 100px; height: 100px;
        margin-bottom: 15px;
        position: relative;
        z-index: 2;
        transition: 0.3s;
    }
    .cat-img-box img {
        width: 100%; height: 100%; object-fit: contain;
        filter: drop-shadow(0 5px 10px rgba(0,0,0,0.1));
    }
    
    /* Card Hover: Image Zoom */
    .cat-card:hover .cat-img-box { transform: scale(1.1); }

    /* Text Styling */
    .cat-name {
        font-size: 16px; font-weight: 700; color: var(--dark-text);
        margin-bottom: 4px; position: relative; z-index: 2;
    }
    .cat-count {
        font-size: 12px; font-weight: 500; color: var(--light-text);
        background: var(--grey-btn); padding: 4px 10px; border-radius: 20px;
        position: relative; z-index: 2; transition: 0.3s;
    }
    
    /* Active State (Selection) */
    .cat-card:hover .cat-count {
        background: var(--primary-orange); color: white;
    }

    /* Decorative Circle Background */
    .cat-card::before {
        content: ''; position: absolute;
        top: -30px; right: -30px;
        width: 80px; height: 80px;
        background: linear-gradient(135deg, #FFF8E1 0%, #ffffff 100%);
        border-radius: 50%; z-index: 1;
        transition: 0.3s;
    }
    .cat-card:hover::before { transform: scale(5); opacity: 0.3; }