/* responsive-mid-range.css */
/* Media queries specifically for screen sizes from 2000px down to 481px */

/* Swap Filter/Sort buttons for mid-range screens (Sort on left, Filter on right) */
@media screen and (min-width: 481px) {
    .filter-sort-wrapper {
        display: flex;
        flex-direction: row-reverse; /* This will reverse the order of the children */
        justify-content: flex-end; /* Align to the end (right side) */
        gap: 10px; /* Space between buttons */
    }
}

/* Extra large screens (1800px - 2000px) */
@media screen and (min-width: 1801px) and (max-width: 2000px) {
    .container {
        max-width: 1600px;
        margin: 0 auto;
        padding: 0 30px;
    }
    
    .products-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 25px;
    }
    
    header .title.page-title {
        font-size: 44px;
    }
    
    /* Standard product card sizing */
    .product-card {
        width: 100%;
        max-width: 100%;
        min-width: 220px;
    }
}

/* Large desktop screens (1401px - 1800px) */
@media screen and (min-width: 1401px) and (max-width: 1800px) {
    .container {
        max-width: 1320px;
        margin: 0 auto;
        padding: 0 25px;
    }
    
    .products-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 22px;
    }
    
    header .title.page-title {
        font-size: 40px;
    }
    
    /* Standard product card sizing */
    .product-card {
        width: 100%;
        max-width: 100%;
        min-width: 220px;
    }
}

/* Desktop screens (1201px - 1400px) */
@media screen and (min-width: 1201px) and (max-width: 1400px) {
    .container {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 20px;
    }
    
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
    
    header .title.page-title {
        font-size: 36px;
    }
    
    .product-card .product-title {
        font-size: 18px;
    }
    
    /* Standard product card sizing */
    .product-card {
        width: 100%;
        max-width: 100%;
        min-width: 200px;
    }
}

/* Small desktop / large tablet (992px - 1200px) */
@media screen and (min-width: 992px) and (max-width: 1200px) {
    .container {
        max-width: 95%;
        width: 95%;
        margin: 0 auto;
        padding: 0 20px;
    }
    
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    header .title.page-title {
        font-size: 34px;
    }
    
    .product-card .product-title {
        font-size: 16px;
    }
    
    .filter-sort-wrapper {
        gap: 15px;
    }
    
    /* Standard product card sizing */
    .product-card {
        width: 100%;
        max-width: 100%;
        min-width: 220px;
    }
    
    /* Remove search button styling to prevent dark mode issues */
    .search-btn,
    .search-btn i {
        background-color: transparent !important;
        color: inherit !important;
    }
}

/* Enforce 4 columns from 1000px to 1200px */
@media screen and (min-width: 1000px) and (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Specific fix for 991.20px breakpoint */
@media screen and (min-width: 991px) and (max-width: 992px) {
    .container {
        max-width: 95%;
        width: 95%;
        margin: 0 auto;
        padding: 0 20px;
    }
    
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    /* Fix for layout issues at exactly 991.20px */
    .search-sort-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        width: 100%;
    }
    
    /* Ensure filter and sort stay aligned properly */
    .filter-sort-wrapper {
        display: flex;
        flex-direction: row;
        gap: 10px;
        flex-wrap: nowrap;
    }
    
    /* Remove search button styling to prevent dark mode issues */
    .search-btn,
    .search-btn i {
        background-color: transparent !important;
        color: inherit !important;
    }
    
    /* Standard product card sizing */
    .product-card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        min-width: 220px;
    }
    
    /* Fix for top navigation at exactly 991.20px */
    .top-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
    }
    
    /* Fix for the user controls alignment at 991.20px */
    .user-controls {
        display: flex;
        align-items: center;
    }
}

/* Tablets (768px - 991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .container {
        max-width: 95%;
        width: 95%;
        margin: 0 auto;
        padding: 0 15px;
    }
    
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
    
    header .title.page-title {
        font-size: 32px;
    }
    
    .product-card .product-title {
        font-size: 1rem; /* keep desktop typography */
    }
    
    .product-card .product-price {
        font-size: 1.2rem; /* keep desktop typography */
    }
    
    /* Standard product card sizing */
    .product-card {
        width: 100%;
        max-width: 100%;
        min-width: 220px;
    }
    
    .filter-sort-wrapper {
        gap: 10px;
    }
    
    /* Adjust navigation */
    .top-nav {
        padding: 0 15px;
    }
    
    /* Remove search button styling to prevent dark mode issues */
    .search-btn,
    .search-btn i {
        background-color: transparent !important;
        color: inherit !important;
    }
    
    /* Modal adjustments with smoother transitions */
    .modal-content {
        width: 90%;
        max-width: 700px;
    }
    
    .product-detail-container {
        flex-direction: column;
    }
    
    .product-detail-image,
    .product-detail-info {
        width: 100%;
    }
}

/* Specific fix for 766.40px breakpoint */
@media screen and (min-width: 700px) and (max-width: 767px) {
    .container {
        width: 95%;
        padding: 0 15px;
        margin: 0 auto;
    }
    
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .search-sort-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        width: 100%;
    }
    
    /* Don't let the search form change size prematurely */
    .search-form {
        flex: 0 1 auto;
        width: auto;
        min-width: 200px;
    }
    
    /* Ensure filter and sort stay in a row */
    .filter-sort-wrapper {
        display: flex;
        flex-direction: row;
        gap: 8px;
        flex-wrap: nowrap;
        width: auto;
    }
    
    /* Standard product card sizing */
    .product-card {
        width: 100%;
        max-width: 100%;
        min-width: 180px;
        display: flex;
        flex-direction: column;
    }
    
    /* Remove search button styling to prevent dark mode issues */
    .search-btn,
    .search-btn i {
        background-color: transparent !important;
        color: inherit !important;
    }
    
    /* Adjust navigation */
    .top-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
    }
    
    /* Fix title size */
    header .title.page-title {
        font-size: 28px;
    }
}

/* Large Mobile (481px - 700px) */
@media screen and (min-width: 481px) and (max-width: 700px) {
    .container {
        width: 95%;
        padding: 0 15px;
        margin: 0 auto;
    }
    
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    header .title.page-title {
        font-size: 28px;
    }
    
    .search-sort-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        width: 100%;
    }
    
    .search-form {
        width: 100%;
        max-width: none;
    }
    
    /* Standard product card sizing */
    .product-card {
        width: 100%;
        max-width: 100%;
        min-width: 150px;
        min-height: auto;
    }
    
    /* Remove search button styling to prevent dark mode issues */
    .search-btn,
    .search-btn i {
        background-color: transparent !important;
        color: inherit !important;
    }
    
    .filter-sort-wrapper {
        width: 100%;
    }
    
    /* Product card styles are now unified in product-cards.css */
    
    /* Modal adjustments */
    .modal-content {
        width: 95%;
        margin: 5% auto;
    }
    
    .product-detail-container {
        flex-direction: column;
    }
    
    .product-detail-image,
    .product-detail-info {
        width: 100%;
    }
    
    .product-detail-image {
        height: 240px;
    }
}

/* Specific fix for 767.20px breakpoint */
@media screen and (min-width: 767px) and (max-width: 768px) {
    .container {
        width: 95%;
        padding: 0 15px;
    }
    
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
    
    .search-sort-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        width: 100%;
    }
    
    /* Ensure filter and sort buttons are properly aligned */
    .filter-sort-wrapper {
        display: flex;
        flex-direction: row;
        gap: 10px;
        flex-wrap: nowrap;
        width: auto;
    }
    
    /* Standard product card sizing */
    .product-card {
        width: 100%;
        max-width: 100%;
        min-width: 180px;
        display: flex;
        flex-direction: column;
    }
    
    /* Remove search button styling to prevent dark mode issues */
    .search-btn,
    .search-btn i {
        background-color: transparent !important;
        color: inherit !important;
    }
    
    /* Fix for navigation elements */
    .top-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
    }
    
    /* Fix for menu icon positioning */
    .menu-icon {
        margin-right: 5px;
    }
    
    /* Adjust user controls spacing */
    .user-controls {
        display: flex;
        align-items: center;
        gap: 5px;
    }
}

/* Force filter/sort nested submenus downwards on mid-range screens */
@media screen and (min-width: 481px) and (max-width: 1300px) {
  /* Target submenus specifically within filter/sort dropdowns */
  .filter-dropdown .category-item .sub-menu,
  .sort-dropdown .category-item .sub-menu { 
    margin-top: 0;  /* Adjust if spacing needed */
    width: 100%;    /* Keep full width */
    box-shadow: 0 5px 10px rgba(0,0,0,0.1); /* Keep visual style */
    border-radius: 0 0 6px 6px; /* Keep visual style */
    /* Assuming JS handles display: block/none */
  }

  /* Explicitly override last-child rule for consistency - Remove positioning */
  .filter-dropdown .category-item:last-child .sub-menu,
  .sort-dropdown .category-item:last-child .sub-menu {
    border-radius: 0 0 6px 6px; /* Keep visual style */
  }
}