/* css/products-page.css */
/* Styles exclusively for the Product Listing Page (products.html) */

/* --- Products Page Layout --- */
.products-page-content .container {
    /* You can make the container on the products page wider if desired, 
       but often inheriting from global .container is fine. */
    /* Example: max-width: 1380px; */
}

.products-layout {
    display: grid;
    grid-template-columns: 280px 1fr; /* Sidebar width and main content area */
    gap: 30px; /* Space between sidebar and product listing */
    align-items: flex-start; /* Align items to the top */
}

/* --- Sidebar / Product Filters --- */
.sidebar.product-filters {
    background-color: var(--secondary-color); /* Uses variable from style.css */
    padding: 25px;
    border-radius: 8px;
    height: fit-content; /* Sidebar only takes height of its content */
    box-shadow: var(--card-shadow); /* Uses variable from style.css */
    position: sticky; /* Make sidebar sticky on scroll */
    top: calc(var(--header-height) + 20px); /* Offset by header height + some padding */
}

.sidebar.product-filters h3 {
    font-size: 1.4rem;
    color: var(--primary-color); /* Uses variable from style.css */
    margin-top: 0; /* Remove default h3 margin if needed */
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--accent-color); /* Uses variable from style.css */
    font-weight: 600;
}

.sidebar.product-filters ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar.product-filters ul li a.filter-link {
    display: block;
    padding: 10px 12px;
    color: var(--text-color); /* Uses variable from style.css */
    text-decoration: none !important; /* Override general link styles if needed */
    border-radius: 5px;
    margin-bottom: 5px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    font-weight: 500;
}

.sidebar.product-filters ul li a.filter-link::after { 
    display: none; /* Remove underline effect from main nav if it's inherited */
}

.sidebar.product-filters ul li a.filter-link:hover {
    background-color: var(--primary-color);
    color: var(--light-text-color) !important;
    transform: translateX(5px); /* Slight indent on hover */
}

.sidebar.product-filters ul li a.filter-link.active {
    background-color: var(--primary-color);
    color: var(--light-text-color) !important;
    font-weight: 600; /* Make active link bolder */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Placeholder styles for future filters (if you uncomment them in HTML) */
.price-filter { margin-top: 25px; }
.price-filter .slider { width: 100%; margin-bottom: 5px; cursor: pointer; }
.price-filter p { font-size: 0.9rem; text-align: center; color: var(--text-color); }
.availability-filter { margin-top: 25px; }
.availability-filter li label { display: flex; align-items: center; padding: 5px 0; cursor: pointer; font-weight: 400; }
.availability-filter li input[type="checkbox"] { margin-right: 8px; accent-color: var(--primary-color); }


/* --- Product Listing Area --- */
.product-listing-area {
    /* This area takes the remaining space in the grid */
}

.listing-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding: 15px 20px;
    background-color: #fff; /* Or var(--secondary-color) */
    border-radius: 8px;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color);
}

.listing-controls p#product-count-display {
    margin: 0;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--text-color);
}

.listing-controls select#sort-products {
    padding: 8px 12px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    font-family: var(--font-family); /* Uses variable from style.css */
    font-size: 0.9rem;
    background-color: #fff;
    color: var(--text-color);
    cursor: pointer;
    outline: none;
}
.listing-controls select#sort-products:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
}


/* Product Grid specific adjustments for this page, if any.
   The base .product-grid and .product-card styles are in style.css */
.product-listing-area .product-grid {
    /* Example: You might want more or less columns here than on the homepage */
    /* grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); */
}

.product-listing-area .product-grid .loading-text { 
    grid-column: 1 / -1; /* Make loading text span all columns in the grid */
    /* Styles for .loading-text itself are in style.css */
}

/* --- Pagination Controls (if you implement pagination) --- */
.pagination-controls {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}
.pagination-controls button, 
.pagination-controls span.page-number { /* For numbered page links */
    padding: 8px 15px;
    margin: 0 5px;
    border: 1px solid var(--border-color);
    background-color: #fff;
    color: var(--primary-color);
    cursor: pointer;
    border-radius: 5px;
    font-family: var(--font-family);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.pagination-controls button:hover,
.pagination-controls span.page-number:hover {
    background-color: var(--primary-color);
    color: var(--light-text-color);
    border-color: var(--primary-color);
}
.pagination-controls span.page-number.current { /* For the current page number */
    cursor: default;
    background-color: var(--primary-color);
    color: var(--light-text-color);
    border-color: var(--primary-color);
    font-weight: 600;
}
.pagination-controls button:disabled {
    background-color: var(--secondary-color);
    color: #aaa;
    border-color: var(--border-color);
    cursor: not-allowed;
}


/* --- Responsive Styles for Products Page Elements --- */
/* These can also live in your main responsive.css, but keeping them here
   makes this file self-contained for product listing page specific layouts. */

@media (max-width: 991.98px) { /* Medium devices / tablets */
    .products-layout {
        grid-template-columns: 240px 1fr; /* Slightly smaller sidebar */
    }
    .sidebar.product-filters {
        /* If sidebar becomes too tall, you might unstick it or make it scrollable internally */
        /* position: static; */ 
    }
}

@media (max-width: 767.98px) { /* Small devices / landscape phones */
    .products-layout {
        grid-template-columns: 1fr; /* Stack sidebar and content */
    }
    .sidebar.product-filters {
        margin-bottom: 30px; /* Space when stacked above content */
        position: static; /* Unstick sidebar on mobile */
        width: 100%; /* Full width for filters */
    }
    .listing-controls {
        flex-direction: column;
        gap: 15px; 
        padding: 15px; /* Adjust padding for stacked view */
    }
    .listing-controls p#product-count-display,
    .listing-controls select#sort-products {
        width: 100%;
        text-align: center;
    }
    .product-listing-area .product-grid {
        /* Example: single column on very small mobile */
        /* grid-template-columns: 1fr; */
    }
}

@media (max-width: 480px) { /* Extra small devices */
    .product-listing-area .product-grid {
        grid-template-columns: 1fr; /* Enforce single column for product cards */
    }
    .pagination-controls button, 
    .pagination-controls span.page-number {
        padding: 6px 10px;
        font-size: 0.9rem;
    }
}