.category-header {
    text-align: left;
    padding: 20px;
    font-weight: bold;
}

#listings {
    padding: 0 20px 20px 20px;
    max-width: 1000px;
    margin: 0 auto;
}

#category-page {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.filter-container {
    max-width: 250px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    text-align: left;
    margin-right: 20px;
}

.filter-container h3 {
    margin-bottom: 10px;
}

.filter-container label {
    display: block;
    font-size: 12px;
}

.listings-container {
    flex: 1;
}

.listings-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Default 4 columns */
    gap: 10px;
    justify-content: center;
}

.listing-card {
    display: block;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s; /* Add hover effect */
    max-width: 175px;
    height: 210px;
}

.listing-card:hover {
    transform: translateY(-5px); /* Lift the card slightly */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Increase shadow on hover */
}

.preview-image {
    width: 100%;
    height: 125px;
    object-fit: cover;
    border-radius: 4px;
}

.listing-card h4 {
    font-size: 16px;
    margin: 10px 0;
    display: -webkit-box; /* Use flexbox to constrain lines */
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical; /* Set box orientation to vertical */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Add ellipsis (...) for overflow */
    line-height: 1.2em; /* Adjust line height for better readability */
    max-height: 2.4em; /* Ensure height matches exactly 2 lines */
}

.listing-card p {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

/* Listings shrink to 3 columns */
@media (max-width: 1024px) {
    .listings-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Listings shrink to 2 columns */
@media (max-width: 820px) {
    .listings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Listings shrink to 1 column and center */
@media (max-width: 670px) {
    #category-page {
        flex-direction: column; /* Filter moves above listings */
        align-items: center; /* Center content */
    }
    
    .filter-container {
        width: 90%; /* Prevent stretching edge-to-edge */
        margin: 0 auto 15px auto; /* Adds margin left & right */
    }
}

@media (max-width: 380px) {
    .listings-grid {
        grid-template-columns: 1fr;
        width: 90%; 
    }
}