:root {
        /* Main Colors */
        --color-primary: #E60000;
        --color-secondary: #000000;
        --color-supporting: #FFFFFF;
        
        /* RGB values for transparent overlays */
        --color-secondary-rgb: 0, 0, 0;

        /* Accent Colors */
        --color-accent-light: #F2F2F2; /* Light Gray for borders/backgrounds */
        --color-accent-dark: #808080; /* Dark Gray for secondary text */
    }

    /* ------------------------------------------------ */
    /* --- 1. Base Page & Typography (Shop Page Specific) --- */
    /* ------------------------------------------------ */
    .shop-page-container {
        max-width: 1200px;
        margin: 40px auto 80px auto;
        padding: 0 30px;
        margin-top: 0; /* Ensures the gray background spans the full width of the main content area */
        padding-top: 0;
    }

    .page-header-container {
        background-color: #f6f6f6ff; /* Gray background */
        padding: 40px 30px; 
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        align-items: center; /* Center horizontally */
        text-align: center; /* Center text content inside */
    }

    .page-title {
        text-align: center;
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0px;
        color: var(--color-secondary);
        letter-spacing: 2px;
        background-color: #f6f6f6ff;
    }

    /* --- Breadcrumb Style (UNCHANGED) --- */
    .breadcrumb {
        font-size: 0.9rem;
        color: var(--color-accent-dark);
        margin-bottom: -15px;
    }

    .breadcrumb a {
        color: var(--color-accent-dark);
        transition: color 0.2s;
    }

    .breadcrumb a:hover {
        color: var(--color-primary);
    }

    .current-page {
        font-weight: 600;
        color: var(--color-secondary);
    }

    /* ------------------------------------------------ */
    /* --- 2. Shop Product Grid/Layout (PC & Mobile) --- */
    /* ------------------------------------------------ */
    .shop-products {
        padding: 20px 0; 
    }
    
    /* PC Layout: Filter on Left, Products on Right */
    .shop-content-layout {
        display: flex;
        gap: 30px; /* Space between filter and products */
    }
    
 .sidebar-filter {
    /* * --- CHANGE THIS LINE ---
     * The `flex: 0 0 250px;` sets the width to 250 pixels.
     * Change '250px' to your desired width (e.g., 300px).
     */
    flex: 0 0 300px; 

    /* The rest of the properties remain the same */
    padding: 20px 0; 
    border-right: 1px solid var(--color-accent-light);
    order: 1;
}

.main-product-area {
    /* PC: Takes up the remaining space */
    flex-grow: 1;
    /* This ensures products are on the right in PC mode */
    order: 2;
}

/* PC Product Grid: 3 Products per row */
#shop-products-container.product-grid {
    display: grid;
    /* Key Change: 3 columns, equal width */
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

#shop-products-container {
    /* Default for a container */
    display: block;
}

/* --- Filter Group Styling (Updated for separation and alternating background) --- */

.filter-group {
    /* This property adds the requested **white space** after every filter group */
    margin-bottom: 30px; 
    /* The white background is now the default/fallback for even-numbered groups */
    background-color: white;
    /* Added horizontal padding (20px) to match original sidebar-filter padding,
       and vertical padding (15px) for spacing inside the background box. */
    padding: 15px 20px; 
    border-radius: 5px; /* Optional: adds a slight curve to the corners */
}

/* Selector for the alternating gray background on **odd** filter groups (1st, 3rd, 5th, etc.) */
.filter-group:nth-child(odd) {
    background-color: #f6f6f6; /* Light gray background for odd groups */
}

.filter-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-secondary);
    /* Removed margin-bottom here as padding on .filter-group provides separation */
    margin-bottom: 0; 
    cursor: pointer; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}

/* Style for the expand/collapse icon (+ or -) */
.toggle-icon {
    font-weight: 900; 
    font-size: 1.2rem;
    line-height: 1; 
    user-select: none; 
}


/* --- Collapsible Content Handling --- */

.filter-content {
    /* Add top margin to separate content from the title within the group */
    margin-top: 10px; 
    /* Large enough max-height to show all content when expanded */
    max-height: 500px; 
    overflow: auto;
    /* Transition for a smooth collapse animation */
    transition: max-height 0.3s ease-in-out, margin-top 0.3s ease-in-out;
}

/* Hides the content smoothly when the 'collapsed' class is applied */
.filter-group.collapsed .filter-content {
    max-height: 0; 
    margin-top: 0; /* Also remove margin when collapsed */
}


/* --- Inner Filter Item Styling (from your original snippet) --- */

.filter-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.filter-group li {
    margin-bottom: 8px;
}

.filter-group a,
.filter-group label {
    font-size: 0.95rem;
    color: var(--color-accent-dark);
    text-decoration: none;
    cursor: pointer;
    display: block; 
}

/* Price range specific adjustments */
.price-range-container {
    padding-top: 5px;
}

#price-range-slider {
    width: 100%;
    margin-top: 10px;
}

.filter-group label {
    display: flex;
    align-items: center;
    gap: 8px; 
}

.filter-group input[type="checkbox"],
.filter-group input[type="radio"] {
    margin: 0;
    width: 15px;
    height: 15px;
}

.filter-group a:hover,
.filter-group label:hover {
    color: var(--color-primary);
}

.filter-group a.active {
    font-weight: 600;
    color: var(--color-secondary);
}

.apply-filter-btn {
    width: 100%;
    padding: 10px;
    background-color: var(--color-primary);
    color: var(--color-supporting);
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    text-transform: uppercase;
    border-radius: 0px;
    margin-top: 20px;
    /* Ensure the button is full width of the sidebar content area */
    margin-left: 20px; 
    width: calc(100% - 40px);
}

    /* --- Product Card Styling (Adjusted for Grid) --- */
    .product-card {
        background-color: var(--color-supporting);
        border-radius: 0px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: box-shadow 0.3s;
        position: relative;
    }

    /* Ensure fixed image height and action bar slide-up */
    .product-image-container {
        position: relative;
        overflow: hidden;
        height: 250px; /* Slightly reduced height for 3-column PC layout */
    }
    
    .product-image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Action bar starts right below the image */
    .product-actions {
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        top: 218px; /* Adjusted based on visual space for hover transition */
         opacity: 0;
        transform: translateY(-100%);
        transition: opacity 0.3s ease, transform 0.3s ease;
        display: flex;
        z-index: 10;
    }

    .product-card:hover .product-actions {
        opacity: 1;
        transform: translateY(0);
    }
    

    /* Price/Info Styles */
    .product-info {
        padding: 15px;
        flex-grow: 1;
        text-align: center;
    }
    
    .product-name {
         font-size: 1rem;
        font-weight: 550;
        line-height: 1.3;
        margin: 0 0 8px 0;
        min-height: 2.6em; /* Ensure consistent card height */
    }

    .product-prices {
        display: flex;
        justify-content: center;
        align-items: baseline;
        gap: 8px;
    }
    
    .new-price, .product-price {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--color-primary);
        margin: 0;
    }
    
    /* --- New Section: Product Toolbar Styling --- */

    .product-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding: 10px 0;
        border-bottom: 1px solid var(--color-accent-light);
    }

    .results-count {
        font-size: 0.95rem;
        color: var(--color-accent-dark);
    }
@media (max-width: 470px) {
    .product-prices {
        /* KEY FIX: Change flex direction to stack prices vertically */
        display: flex;
        flex-direction: column;
        
        /* Optional: Reduce the vertical gap if they are too far apart */
        gap: 2px; 
        
        /* Center the text elements within the column */
        align-items: center; 
    }

    /* Optional: Ensure the old price is centered when stacked */
    .old-price {
        text-align: center;
    }
}
    .sorting-options {
        display: flex;
        gap: 15px;
        align-items: center;
    }

    .default-sorting {
        padding: 8px 10px;
        border: 1px solid var(--color-accent-light);
        border-radius: 4px;
        font-size: 0.9rem;
        color: var(--color-secondary);
        background-color: var(--color-supporting);
        cursor: pointer;
        outline: none;
        appearance: none; /* Hide default dropdown arrow */
        background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="gray" d="M7 10l5 5 5-5z"/></svg>');
        background-repeat: no-repeat;
        background-position: right 10px center;
    }

    .view-switcher {
        display: flex;
        border-radius: 4px;
        overflow: hidden;
    }

    .view-switcher button {
        /* Use Red color (var(--color-primary)) to replace the original blue */
        background-color: var(--color-accent-light); 
        color: var(--color-secondary);
        border: none;
        padding: 10px 12px;
        cursor: pointer;
        font-size: 1rem;
        transition: background-color 0.2s, color 0.2s;
    }

    .view-switcher .active {
        /* Red color for the active view button */
        background-color: var(--color-primary); 
        color: var(--color-supporting);
    }

    .view-switcher button:hover {
        background-color: var(--color-primary);
        color: var(--color-supporting);
    }
 
    .filter-btn {
     
    display: none; 
     
}


/* --- Mobile View Adaptations (max-width: 768px) --- */
@media (max-width: 768px) {
    
    .product-toolbar {
        /* In mobile, we want the sorting options to take the full width 
           and justify-content to be space-between (if only 2 items are visible)
           or flex-end if we only show one */
        justify-content: flex-end; /* Pushes the sorting/filter part to the right */
    }

    .main-product-area {
    margin-top: -40px;
    }


    /* 1. Hide results-count */
    .results-count {
        display: none;
    }

    /* 2. Hide view-switcher */
    .view-switcher {
        display: none;
    }
    
    /* Modify sorting-options layout for mobile */
    .sorting-options {
        /* Keep only default-sorting and filter-btn visible */
        gap: 15px;
    }
    
    /* 3. Show the Filter button */
    .filter-btn {
        /* Override the 'display: none' from the default styles */
        display: flex; 
        
         
    }
  
    .filter-btn {
    /* Styles matching your image (Blue background, white text) */
    background-color: #E60000; /* A strong blue, assuming it maps to your desired color */
    color: #ffffff;
    border: none;
     padding: 10px 15px; /* Adjust padding to match the image's appearance */
    border-radius: 0px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: none; /* Hide by default on desktop */
    transition: background-color 0.2s;
    /* Ensure the icon and text are inline */
    display: flex; 
    align-items: center;
    gap: 8px; /* Space between icon and text */
}

/* Add a style for the filter icon (assuming Font Awesome classes) */
.filter-btn .fas {
    /* Optional: Ensure icon size is appropriate */
    font-size: 0.9rem; 
}

.filter-btn:hover {
    background-color: #000000; /* Slightly darker blue on hover */
}
}
    /* ------------------------------------------------ */
    /* --- 4. Mobile Responsiveness (768px and below) --- */
    /* ------------------------------------------------ */
    @media (max-width: 768px) {
        
        .shop-page-container {
            padding: 0 15px;
            margin: 20px auto 50px auto;
        }

        .page-title {
            font-size: 1.4rem;
            margin-bottom: 0px;
        }
            
        /* Mobile Layout: Filter Below Products, Full Width */
        .shop-content-layout {
            flex-direction: column; /* Stack vertically */
            gap: 20px;
        }

        .main-product-area {
            /* Products appear first on mobile */
            order: 1; 
        }
        
        .sidebar-filter {
            /* Filter appears last on mobile (below products) */
            order: 2; 
            flex: 0 0 auto; /* Allow filter to take full width */
            border-right: none;
            padding: 15px 0; /* Remove side padding */
            border-top: 1px solid var(--color-accent-light);
        }
        
        /* Mobile Product Grid: 2 Products per row */
        #shop-products-container.product-grid {
            /* Key Change: 2 columns, equal width */
            grid-template-columns: repeat(2, 1fr); 
            gap: 15px;
        }

        /* Adjust card content for 2-column layout */
        .product-image-container {
            height: 180px;
        }

        .product-name {
             font-size: 0.85rem;
             min-height: 2.8em;
        }

        .product-prices {
           font-size: 0.9rem;
        }
        
        .new-price, .product-price {
            font-size: 0.9rem;
        }
        
        .product-actions {
             /* Mobile: Make actions permanently visible and push to bottom */
            position: static;
            order: 3; 
            opacity: 1;
            transform: translateY(0);
            border-radius: 0 0 8px 8px;
            border-top: 1px solid var(--color-accent-light);
        }
        
         /* Action bar button size reduction */
        .add-to-cart-btn {
           padding: 6px 4px;
            font-size: 0.65rem;
        }
        
        .wishlist-btn,
        .quickview-btn {
            width: 27px;
            font-size: 0.8rem;
            padding: 6px 0;
        }

        /* Mobile Adjustments for Toolbar (768px and below) */
        .product-toolbar {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }

        .sorting-options {
            width: 100%;
            justify-content: space-between;
        }
        
        .default-sorting {
            flex-grow: 1; /* Allow sorting dropdown to take more space */
        }

    }

 /* List View Styles - Horizontal layout with full-width products */
#shop-products-container.product-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#shop-products-container.product-list .product-card {
    flex-direction: row;
    align-items: flex-start;
    padding: 20px;
    height: auto;
    min-height: 200px;
}

#shop-products-container.product-list .product-image-container {
    flex: 0 0 250px; /* Fixed image width */
    height: 200px;
    margin-right: 20px;
}

#shop-products-container.product-list .product-image-container img {
    border-radius: 0px;
}

#shop-products-container.product-list .product-info {
    flex: 1;
    text-align: left;
    padding: 0;
}

#shop-products-container.product-list .product-name {
    font-size: 1.2rem;
    min-height: auto;
    text-align: left;
    margin-bottom: 10px;
}

#shop-products-container.product-list .product-rating {
    justify-content: flex-start;
    margin-bottom: 10px;
}

#shop-products-container.product-list .product-prices {
    justify-content: flex-start;
    margin-bottom: 15px;
}

#shop-products-container.product-list .product-actions {
    position: static;
    opacity: 1;
    transform: none;
    margin-top: auto;
    width: 250px;
    height: 50px;
 }

/* Mobile List View Adjustments */
@media (max-width: 768px) {
    #shop-products-container.product-list .product-card {
        flex-direction: column;
        padding: 15px;
    }
    
    #shop-products-container.product-list .product-image-container {
        flex: none;
        height: 180px;
        margin-right: 0;
        margin-bottom: 15px;
        width: 100%;
    }
    
    #shop-products-container.product-list .product-info {
        text-align: center;
    }
}





 @media (max-width: 768px) {
 

    /* Target the Add to Cart button in mobile list view */
    #shop-products-container.product-list .add-to-cart-btn {
        /* Increased size: from 6px/4px to 10px/10px */
        padding: 8px 8px; 
        font-size: 0.8rem; /* Increased font size for better readability */
        width: 100%; /* Make button full width of the product card */
    }

    /* Target the Wishlist/Quickview icons in mobile list view */
    #shop-products-container.product-list .wishlist-btn,
    #shop-products-container.product-list .quickview-btn {
        /* Increased size: from 27px width to 40px width */
        width: 40px; 
        height: 40px; /* Added height for square buttons */
        font-size: 1rem; /* Increased icon size */
        padding: 0; /* Remove padding if using fixed height/width */
        /* You may need to wrap these in a container if they were grouped before */
    }

    /* You may need to adjust the grouping of these buttons for a cleaner look */
    /* If the icons (Wishlist/Quickview) are meant to be side-by-side, use this: */
    #shop-products-container.product-list .icon-group { 
        display: flex;
        gap: 10px;
        justify-content: center;
        width: 100%;
    }
 }
 
 
/* Mobile List View text size updates */
@media (max-width: 768px) {
    /* Product prices in list view on mobile */
    #shop-products-container.product-list .product-prices {
        font-size: 1rem; /* slightly larger for readability */
        margin-bottom: 10px;
        justify-content: flex-start;
    }

    #shop-products-container.product-list .new-price,
    #shop-products-container.product-list .old-price {
        font-size: 1.1rem; /* make prices more prominent */
    }

    /* Product name size */
    #shop-products-container.product-list .product-name {
        font-size: 1.3rem; /* slightly bigger and clearer in list view mobile */
        margin-bottom: 12px;
    }

    /* Description font size adjustment */
    #shop-products-container.product-list .product-description {
        font-size: 1rem;
        color: #444;
        margin-bottom: 15px;
    }

    /* Adjust rating size and spacing */
    #shop-products-container.product-list .product-rating i {
        font-size: 1.1rem;
    }

    #shop-products-container.product-list .product-rating {
        margin-bottom: 12px;
        justify-content: flex-start;
    }
}

 /* Hide description by default (grid view) */
.product-description {
    display: none;
}

/* Show description only in list view */
#shop-products-container.product-list .product-description {
    display: block;
    margin-bottom: 15px; /* spacing below description */
    color: #555; /* optional styling */
    font-size: 0.95rem;
    line-height: 1.4;
}


 /* ------------------------------------------------ */
/* --- Desktop Filter Sidebar Styles --- */
/* ------------------------------------------------ */

.sidebar-filter {
    /* Desktop Base Styles */
    flex: 0 0 280px;
    padding: 15px 0;
    border-right: 1px solid var(--color-accent-light);
    order: 1;

    /* Mobile Setup: Ensures full height and flex layout for sticky footer */
    display: flex; 
    flex-direction: column; 
    height: 100%; 
}

/* Base style for the filter close button */
.filter-close-btn {
    display: none; /* Hidden by default on desktop */
    position: absolute;
    top: 5px;
    right: 5px;
    background: transparent;
    border: none;
    color: var(--color-secondary);
    font-size: 1.3rem; 
    cursor: pointer;
    z-index: 110;
    padding: 8px;
}

/* ------------------------------------------------ */
/* --- Filter Content Wrapper (The Scrollable Area) --- */
/* ------------------------------------------------ */
.filter-content-wrapper {
    /* Desktop Behavior: Takes up space but doesn't scroll if not needed */
    flex-grow: 1;
    overflow-y: visible; 
    padding: 0 15px; /* Add horizontal padding for content */
}

/* ------------------------------------------------ */
/* --- Apply Button Base (Desktop/Default) --- */
/* ------------------------------------------------ */
/* --- Apply Button Base (Desktop/Default) --- */
/* ------------------------------------------------ */
/* --- II. Action Group (Apply & Clear Buttons) --- */
/* ------------------------------------------------ */

/* Wrap container for both buttons */
.filter-actions-group {
    /* Set padding to match the filter content wrapper */
    padding: 0 15px; 
    margin-top: 15px;
    
    /* Desktop layout: stacked buttons */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between buttons */
}

/* ------------------------------------------------ */
/* --- Apply Button (Modified for Group) --- */
/* ------------------------------------------------ */
.apply-filter-btn {
    display: block; 
    width: 100%; /* Take full width of the action group */
    padding: 12px 10px; /* Slightly adjusted padding for aesthetics */
    background-color: var(--color-primary); 
    color: var(--color-supporting);
    border: none;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 0px; /* Added slight radius for modern look */
    font-family: 'Montserrat', sans-serif;
    margin: 0; /* Remove conflicting margins */
}
.apply-filter-btn:hover {
    background-color: var(--color-primary-dark, #0056b3);
}

/* ------------------------------------------------ */
/* --- Clear Button (NEW STYLE) --- */
/* ------------------------------------------------ */
.clear-filter-btn {
    display: block;
    width: 100%; /* Take full width of the action group */
    padding: 12px 10px; 
    background-color: transparent; /* Light background */
    color: var(--color-text-body);
    border: 1px solid var(--color-accent-light); /* Use a subtle border */
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 1px; 
    font-family: 'Montserrat', sans-serif;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.clear-filter-btn:hover {
    background-color: var(--color-accent-light); /* Highlight on hover */
    color: var(--color-primary);
}


@media (max-width: 768px) {

    /* 1. Modal Container Styling (Sidebar) */
    .sidebar-filter {
        position: fixed;
        top: 0;
        left: 0;
        width: 85%;
        height: 100%; /* Ensure it takes full viewport height */
        max-width: 320px;
        z-index: 105;
        background-color: var(--color-supporting);
        box-shadow: 3px 0 10px rgba(0, 0, 0, 0.15);
        
        /* Start position (off-screen left) */
        transform: translateX(-100%);
        transition: transform 0.3s ease-out;

        /* Make it a flex container for the close button, scroll wrapper, and apply button */
        display: flex; /* KEY FIX: Use flexbox for vertical alignment */
        flex-direction: column; /* Stack items vertically */

        /* Remove desktop padding/border */
        border-right: none;
        padding: 0; 
        order: 2;
    }
    
    /* FIX: The <form> element must also take up the full available height */
    #filter-form {
        display: flex;
        flex-direction: column;
        height: 100%;
        margin-bottom: 0; /* Remove default margin */
    }

    /* 2. Close Button Position (Fixed inside the modal, top right) */
    .filter-close-btn {
        display: block;
        position: absolute; /* Relative to .sidebar-filter */
        top: 10px;
        right: 10px;
        z-index: 110;
        /* Add styling for the close button here if needed (e.g., color, size) */
    }


    /* 3. Scrollable Content Area */
    .filter-content-wrapper {
        /* This is the key change: it takes up the space remaining between the fixed elements */
        flex-grow: 1; 
        overflow-y: auto; /* KEY: Makes content scroll */
        -webkit-overflow-scrolling: touch; /* Improved iOS scrolling */
        
        /* Adjust padding for close button (top) and apply button (bottom) */
        padding: 40px 15px 80px; /* Top, Sides, Bottom (give space for apply button) */
    }

    /* 4. State when the modal is active (No change needed here) */
    .sidebar-filter.active {
        transform: translateX(0);
    }

    /* 5. Filter Backdrop (No change needed here) */
    body.filter-open::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 90;
    }

    /* 6. Sticky Apply Button Styles */
.apply-filter-btn {
    display: block; 
    position: sticky; /* KEY FIX: Use sticky for the bottom button */
    bottom: 10px; /* Stick it to the bottom of the scrollable container */
    
    /* FIX: Align the button within the modal's width using 60% width and center it */
    width: 60%; 
    margin-left: auto;   /* <-- ADDED: Automatically calculates left margin */
    margin-right: auto;  /* <-- ADDED: Automatically calculates right margin */
    padding: 10px 20px; /* Use internal padding for better click area */
    text-align: center;
    
    /* --- VISUAL STYLING --- */
    background-color: var(--color-primary, #007bff); 
    color: #ffffff; 
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    border: none;
    border-radius: 0; 
    box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background-color 0.2s ease;
    
    /* Ensure it's inside the form's flow, sitting at the bottom */
    flex-shrink: 0; /* Prevents it from shrinking */
}
    
    .apply-filter-btn:hover {
        background-color: var(--color-primary-dark, #0056b3); 
    }
    
   
}


/* ------------------------------------------------ */
/* --- 5. Load More Button Styling (PC & Mobile) --- */
/* ------------------------------------------------ */

.load-more-container {
    /* Center the button horizontally */
    display: flex;
    justify-content: center;
    /* Add generous vertical spacing above the button */
    margin-top: 40px;
    margin-bottom: 60px;
}

.load-more-btn {
    /* Style based on the primary action color */
    background-color: var(--color-primary); /* #E60000 */
    color: var(--color-supporting); /* White */
    
    /* Size and structure */
    padding: 15px 30px;
    min-width: 280px;
    
    /* Text style */
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    /* Appearance */
    border: none;
    border-radius: 0px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Hover effect for PC */
.load-more-btn:hover {
    /* Use a slightly darker color or a shadow for feedback */
    background-color: var(--color-secondary); /* Black */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}


/* --- Mobile Adjustments (768px and below) --- */
@media (max-width: 768px) {
    .load-more-container {
        /* Reduce spacing for mobile screens */
        margin-top: 25px;
        margin-bottom: 40px;
        padding: 0 15px; /* Ensure it stays within screen bounds */
    }

    .load-more-btn {
        /* Make the button full-width on mobile (minus padding) */
        width: 100%;
        min-width: auto;
        
        /* Reduce padding slightly */
        padding: 12px 20px;
        font-size: 0.9rem;
    }
}

.default-sorting {
    /* 1. Change the font family */
    font-family: 'Montserrat', sans-serif;

 
 
    /* 4. Change the font weight (optional) */
    font-weight: 600; 
}

/* Optional: You can style the options inside the dropdown too, 
   though select styling can be inconsistent across browsers */
.default-sorting option {
    font-family: 'Montserrat', sans-serif;
}


@media (max-width: 600px) {
    .default-sorting {
        /* Make the element full-width on mobile */
        width: 100%; 
        
        /* Increase the font size slightly for better tap targeting and readability */
        font-size: 13px; 
        
        /* Increase padding for a larger touch target area */
         
        /* Ensure the dropdown doesn't inherit odd border-radius from elsewhere */
        border-radius: 0px; 
        
        /* Add margin for spacing above/below */
     }
}