/* ===================================
   TABLE OF CONTENTS
   ===================================
   
   1. LAYOUT & CONTAINERS
      1.1 Container Wrapper
      1.2 Main Layout
      1.3 Category Sidebar & Main
      1.4 Product Count Section
      1.5 Header Layout
   
   2. MOBILE FILTER MODAL
      2.1 Mobile Filter Styles
      2.2 Actions Filters
   
   3. SEARCH SECTION
      3.1 Search PLP
      3.2 Search Field & Input
      3.3 Icon Button
   
   4. SORT SECTION
      4.1 Sort By Styles
   
   5. ACCORDION COMPONENTS
      5.1 Base Accordion Styles
      5.2 Accordion Button States
      5.3 Accordion Section States
      5.4 See More Button
   
   6. PRICE FILTER
      6.1 Price Search Styles
      6.2 Price Input Groups
      6.3 Price Buttons
   
   7. FILTER MODAL (SHADCN INSPIRED)
      7.1 Modal Overlay & Animations
      7.2 Modal Content & Header
      7.3 Modal Search & Grid
      7.4 Modal Footer & Buttons
   
   8. FLOATING COMPONENTS
      8.1 CSV Export Button
      8.2 CSV Status
   
   9. BREADCRUMB NAVIGATION
      9.1 Breadcrumb Container
      9.2 Breadcrumb Items & Links
   
   10. APPLIED FILTERS
       10.1 Filter Container
       10.2 Filter Tags
       10.3 Clear All Button
   
   11. PRODUCTS GRID
       11.1 Grid Layout
       11.2 Product Cards
       11.3 Product Images
       11.4 Product Info
   
   12. PRODUCT CARD DETAILS
       12.1 Product Title
       12.2 Product Pricing
       12.3 Product Card Details Layout
   
   13. LOADING STATES
       13.1 Loading & No Results
       13.2 Infinite Scroll Loading
       13.3 Skeleton Loaders
       13.4 Error States
   
   14. NAVIGATION BUTTONS
       14.1 See Previous Button
       14.2 See More Products Button
   
   15. CUSTOM ACCORDION STYLING
       15.1 Faceted Search Container
   
   16. RESPONSIVE DESIGN
       16.1 Tablet & Mobile (768px)
       16.2 Mobile Specific (480px)
       16.3 Large Screens (801px+)
   
   17. UTILITY CLASSES
       17.1 Product Image Height Fix
       17.2 Page Sidebar Overrides
   
   =================================== */


/* ===================================
   1. LAYOUT & CONTAINERS
   =================================== */

/* 1.1 Container Wrapper */
.category-wrapper {
    /*dont add a max-width to the category-wrapper*/
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

/* 1.2 Main Layout */
.category-container {
    display: flex;
    gap: 2rem;
    margin: 0 0 2rem 0;
}

/* 1.3 Category Sidebar & Main */
.category-sidebar {
    flex: 0 0 300px;
    background: #fff;
    border: none; /* Removed border */
    border-radius: 8px;
    padding: 0;
    height: fit-content;
    /* position: sticky; */
    top: 2rem;
}

.category-main {
    flex: 1;
}

/* 1.4 Product Count Section */
.product-count-section {
    padding: 1rem;
    font-size: 0.9rem;
    color: #666;
    border-top: 1px solid #e0e0e0;
    background: #f8f9fa;
}

.results-count {
    display: block;
    text-align: left;
}

/* 1.5 Header Layout */
.plp-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin: 30px 0 0 0;
    justify-content: space-between;
}

.plp-content {
    display: flex;
    gap: 10px;
    flex-direction: column;
    justify-content: center;
}

.plp-featured {
    display: flex;
}


/* ===================================
   2. MOBILE FILTER MODAL
   =================================== */

/* 2.1 Mobile Filter Styles */
.modalMobileFilters {
    display: block;
}

.modalMobileContainerFilters {
    background: white;
}

/* 2.2 Actions Filters */
.actionsFilters {
    padding: 0;
    border-bottom: none;
}


/* ===================================
   3. SEARCH SECTION
   =================================== */

/* 3.1 Search PLP */
.search_plp {
    width: 100%;
    margin: 10px auto 1rem auto;
    padding: 0;
    margin-bottom: 1rem;
}

.search_plp .form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
    font-size: 0.875rem;
    text-transform: uppercase;
}

/* 3.2 Search Field & Input */
.searchField {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #888888;
    gap: 10px;
}

/* Focused state for the whole search field */
.searchField.focused {
    border: 2px solid #0f7fff;
    outline: none;
}

.searchField input {
    width: 100%;
    border: none;
    outline: none;
    padding: 0.75rem 2.5rem 0.75rem 0.75rem;
    font-size: 1rem;
}

.searchField input::placeholder {
    color: #555555;
    font-weight: normal;
}

#searchPLP {
    outline: unset !important;
    outline-offset: unset !important;
}

/* 3.3 Icon Button */
.iconButton {
    width: 40px;
    height: 100%;
    background-color: #2b2b2b !important;
    background-image: url("https://www.demdaco.com/content/icons/SearchIcon-01-white.svg") !important;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: all 0.3s;
    position: absolute;
    right: 0px;
    border-radius: 50px;
    border: none;
    padding: 0.25rem;
}

.iconButton.clear {
    background-image: url("https://www.demdaco.com/content/icons/CloseIcon-01-white.svg") !important;
    background-color: #717171 !important;
    background-size: 40%;
}

.iconButton:hover {
    background-color: #717171 !important;
    transition: all 0.3s;
}

/* Focused state for the icon button */
#iconButton.focused {
    border: 2px solid #0f7fff;
    border-radius: 50%;
    outline: none;
}


/* ===================================
   4. SORT SECTION
   =================================== */

/* 4.1 Sort By Styles */
.sortBy {
    margin-bottom: 1rem;
}

.sortBy .form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
    font-size: 0.875rem;
    text-transform: uppercase;
}

.sortBy .form-select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    background: white;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    appearance: none;
}


/* ===================================
   5. ACCORDION COMPONENTS
   =================================== */

/* 5.1 Base Accordion Styles */
.accordion {
    border-top: 1px solid #e0e0e0;
}

/* 5.2 Accordion Button States */
.accordion__button {
    width: 100%;
    padding: 1rem;
    background: #f8f9fa;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: #333;
}

.accordion__button:hover {
    background: #e9ecef;
}

.accordion__button.expanded,
.accordion__button[aria-expanded="true"] {
    background: #e3f2fd;
    color: #1976d2;
}

.accordion__button svg {
    transition: transform 0.3s ease;
    width: 16px;
    height: 16px;
}

.accordion__button.expanded svg,
.accordion__button[aria-expanded="true"] svg {
    transform: rotate(90deg);
}

/* 5.3 Accordion Section States */
.accordion__section {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: white;
}

.accordion__section.open,
.accordion__section[aria-hidden="false"] {
    max-height: 500px !important;
}

/* Force accordion sections to be visible when opened */
#accordionGroup .accordion__section.open,
#accordionGroup .accordion__section[aria-hidden="false"] {
    max-height: 500px !important;
    overflow: visible;
}

/* Desktop: Allow unlimited height for sidebar accordion sections */
@media (min-width: 769px) {
    #faceted-search-container .accordion__section.open,
    #faceted-search-container .accordion__section[aria-hidden="false"],
    #accordionGroup .accordion__section.open,
    #accordionGroup .accordion__section[aria-hidden="false"] {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }
}

/* Ensure closed accordions are hidden */
#accordionGroup .accordion__section[aria-hidden="true"]:not(.open) {
    max-height: 0 !important;
    overflow: hidden;
}

/* Remove max-height restriction on mobile for full content visibility */
@media (max-width: 768px) {
    .accordion__section.open,
    .accordion__section[aria-hidden="false"],
    #accordionGroup .accordion__section.open,
    #accordionGroup .accordion__section[aria-hidden="false"],
    #mobileAccordionGroup .accordion__section.open,
    #mobileAccordionGroup .accordion__section[aria-hidden="false"] {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }
}

/* 5.4 See More Button */
.see-more-btn {
    background: #f0f0f0;
    border: 1px solid #ddd;
    padding: 8px 16px;
    margin-top: 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: #666;
    width: 100%;
    transition: all 0.3s ease;
    display: block !important; /* Force visibility */
    visibility: visible !important; /* Force visibility */
}

.see-more-btn:hover {
    background: #e0e0e0;
    border-color: #ccc;
}

/* Ensure see-more button is always visible on mobile */
@media (max-width: 480px) {
    .see-more-btn {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        font-size: 11px;
        padding: 6px 12px;
        margin-top: 8px;
        min-height: 32px;
        box-sizing: border-box;
    }
}

/* Extra specificity for very small screens */
@media (max-width: 444px) {
    .see-more-btn {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        font-size: 10px;
        padding: 6px 10px;
        margin-top: 8px;
        min-height: 30px;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


/* ===================================
   6. PRICE FILTER
   =================================== */

/* 6.1 Price Search Styles */
.priceSearch {
    border-top: 1px solid #e0e0e0;
    padding: 0;
}

.priceSearch #priceLabel,
.priceSearch .price-label-static {
    font-weight: 600;
    margin-bottom: 0;
    color: #333;
    font-size: 0.875rem;
    text-transform: uppercase;
    background: none;
    border: none;
    padding: 1rem 0 0.5rem 0;
    cursor: default;
    display: block;
}

.priceSearch .price-content,
.priceSearch .accordion__price {
    display: block !important;
    margin-top: 0;
    padding-top: 0;
}

/* Remove any accordion styling from price search */
.priceSearch #priceLabel:hover,
.priceSearch .price-label-static:hover {
    background: none !important;
    text-decoration: none !important;
}

/* Ensure no underlines or borders */
.priceSearch #priceLabel,
.priceSearch .price-label-static {
    text-decoration: none !important;
    border-bottom: none !important;
    outline: none !important;
}

/* Override any accordion button styling */
.priceSearch .price-label-static:not(.accordion__button) {
    cursor: default;
    pointer-events: none;
}

#priceFilters {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 1rem 0;
    padding: 0;
}

/* 6.2 Price Input Groups */
.input-group {
    flex: 1;
}

.input-group label {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    color: #666;
}

.input-with-symbol {
    position: relative;
}

.currency-symbol {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 0.875rem;
}

.input-with-symbol input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 1.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.875rem;
}

#maxPrice {
    text-align: right;
}

#minPrice {
    text-align: right;
}

/* 6.3 Price Buttons */
.cBTN {
    width: calc(100% - 2rem);
    margin: 0 1rem 1rem 1rem;
    padding: 0.75rem;
    background: #333;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
}

.cBTN:hover {
    background: #555;
}

.clear-price-text {
    font-size: 0.75rem;
    color: #666;
    text-align: left;
    cursor: pointer;
    margin: 0;
    padding: 0;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.clear-price-text:hover {
    color: #333;
}

#applyButtonPriceSearch {
    padding: 8px 10px;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
    display: block;
    width: 100%;
    margin: 0;
    background: #333;
}

#applyButtonPriceSearch:hover {
    background: #555;
}


/* ===================================
   7. FILTER MODAL (SHADCN INSPIRED)
   =================================== */

/* 7.1 Modal Overlay & Animations */
.filter-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes slideUpMobile {
    from { 
        transform: translateY(100%);
    }
    to { 
        transform: translateY(0);
    }
}

/* 7.2 Modal Content & Header */
.filter-modal {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 960px;
    max-height: 85vh;
    overflow: visible;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(0, 0, 0, 0.1);
    animation: slideUp 0.2s ease-out;
    display: flex;
    flex-direction: column;
    position: relative;
}

.filter-modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid hsl(214.3 31.8% 91.4%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    flex-shrink: 0;
    overflow: visible;
}

.filter-modal-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: hsl(222.2 84% 4.9%);
    line-height: 1.2;
    display: block;
}

.filter-modal-close {
    position: static;
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    z-index: 10;
}

.filter-modal-close:hover {
    background: #f8f8f8;
    color: #333;
    border-color: #ddd;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 7.3 Modal Search & Grid */
.filter-modal-search {
    padding: 16px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #fafafa;
    flex-shrink: 0;
}

.filter-modal-search input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    background: white;
    transition: all 0.15s ease;
}

.filter-modal-search input:focus {
    outline: none;
    border-color: hsl(0 0% 20%);
    box-shadow: 0 0 0 2px hsl(0 0% 20% / 0.1);
}

.filter-modal-content {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.filter-modal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0px;
}

.filter-modal-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 6px;
    transition: background-color 0.1s ease;
    border: 1px solid transparent;
}

.filter-modal-item:hover {
    background-color: hsl(210 40% 96%);
    border-color: hsl(214.3 31.8% 91.4%);
}

.filter-modal-item input[type="checkbox"] {
    margin-right: 8px;
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: hsl(0 0% 20%);
}

.filter-modal-item label {
    cursor: pointer;
    font-size: 13px;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    color: hsl(222.2 84% 4.9%);
}

.filter-count {
    color: hsl(215.4 16.3% 46.9%);
    font-size: 11px;
    font-weight: 500;
}

/* 7.4 Modal Footer & Buttons */
.filter-modal-footer {
    padding: 12px 20px;
    border-top: 1px solid hsl(214.3 31.8% 91.4%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: hsl(0 0% 98%);
    flex-shrink: 0;
    gap: 8px;
}

.filter-modal-clear {
    background: transparent;
    color: #666;
    border: 1px solid #ddd;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    flex: 1;
    max-width: 200px;
    transition: all 0.2s ease;
    order: 1; /* Explicitly position Clear All on the left */
}

.filter-modal-clear:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

.filter-modal-apply {
    background: #000;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    flex: 1;
    max-width: 200px;
    transition: all 0.2s ease;
    order: 2; /* Explicitly position Apply Filters on the right */
}

.filter-modal-apply:hover {
    background: #333;
}


/* ===================================
   8. FLOATING COMPONENTS
   =================================== */

/* 8.1 CSV Export Button */
.floating-csv-export {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    background: #000000;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 60px;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
}

.floating-csv-export:hover {
    background: #333333;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.floating-csv-export:active {
    transform: translateY(0);
}

.floating-csv-export.collapsed {
    min-width: 48px;
    max-width: 48px;
    padding: 12px;
    justify-content: center;
    align-items: center;
}

.floating-csv-export.collapsed .export-icon {
    margin: 0;
}

.floating-csv-export .export-icon {
    font-size: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.floating-csv-export .export-icon svg {
    width: 16px;
    height: 16px;
    stroke: white;
    stroke-width: 2;
}

.floating-csv-export .export-text {
    transition: opacity 0.3s ease;
}

.floating-csv-export.collapsed .export-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

/* 8.2 CSV Status */
.floating-csv-status {
    position: fixed;
    bottom: 80px;
    left: 20px;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 11px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    pointer-events: none;
    max-width: 250px;
    word-wrap: break-word;
}

.floating-csv-status.show {
    opacity: 1;
    transform: translateY(0);
}


/* ===================================
   9. BREADCRUMB NAVIGATION
   =================================== */

/* 9.1 Breadcrumb Container */
.breadcrumb-container {
    width: 100%;
    margin-bottom: 8px;
    padding: 0px 20px;
}

.breadcrumb-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 0;
    font-size: 0.875rem;
    line-height: 1.4;
}

/* 9.2 Breadcrumb Items & Links */
.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.breadcrumb-link {
    color: #666;
    text-decoration: none;
    transition: color 0.2s ease;
    cursor: pointer;
}

.breadcrumb-link:hover {
    color: #2b2b2b;
    text-decoration: underline;
}

.breadcrumb-current {
    color: #2b2b2b;
    font-weight: 500;
}

.breadcrumb-separator {
    color: #999;
    font-size: 0.75rem;
    margin: 0 2px;
}

.breadcrumb-home {
    color: #666;
    text-decoration: none;
    font-weight: 500;
}

.breadcrumb-home:hover {
    color: #2b2b2b;
    text-decoration: underline;
}

/* Hide breadcrumbs when empty */
.breadcrumb-container:empty {
    display: none;
}


/* ===================================
   10. APPLIED FILTERS
   =================================== */

/* 10.1 Filter Container */
.applied-filters-container {
    background: #eee;
    width: 100%;
    display: flex;
    gap: 0px;
    flex-wrap: wrap;
    height: auto;
    align-items: center;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 6px;
}

.applied-filters-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    flex: 1;
}

/* 10.2 Filter Tags */
.filter-tag {
    background-color: white;
    color: #2b2b2b;
    padding: 5px 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    margin: 10px;
    gap: 5px;
    font-size: 0.8rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-tag:hover {
    background-color: #f5f5f5;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.filter-tag .remove {
    font-weight: bold;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.filter-tag:hover .remove {
    opacity: 1;
}

/* 10.3 Clear All Button */
.clear-all-filters-btn {
    background: #2b2b2b;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin: 10px;
    align-self: center;
}

.clear-all-filters-btn:hover {
    background: #000;
}


/* ===================================
   11. PRODUCTS GRID
   =================================== */

/* 11.1 Grid Layout */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    width: 100%;
}

/* Modified breakpoint for 3-column layout - workflow conflict resolved */
@media (max-width: 1466px) and (min-width: 761px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
}

/* 11.2 Product Cards */
.product-card {
    border: none;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
    background: white;
}

.product-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 11.3 Product Images */
.product-image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

/* 11.4 Product Info */
.product-info {
    padding: 1rem;
}

.product-name {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
    font-size: 0.9rem;
    line-height: 1.4;
}

.product-brand {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.product-price {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1976d2;
}

.product-price.sale {
    color: #d32f2f;
}

.product-price .original {
    text-decoration: line-through;
    color: #999;
    margin-left: 0.5rem;
    font-size: 0.9rem;
}

.product-availability {
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.product-availability.in-stock {
    color: #4caf50;
}

.product-availability.out-of-stock {
    color: #f44336;
}


/* ===================================
   12. PRODUCT CARD DETAILS
   =================================== */

/* 12.1 Product Title */
.product-card .product-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0px;
    line-height: 1.3;
}

/* 12.2 Product Pricing */
.product-card .product-pricing {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 0px;
}

.product-pricing {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 0px;
}

/* Cross out original price when sale price is present */
.product-pricing .product-price-original {
    text-decoration: line-through;
    color: #999;
    opacity: 0.7;
}

/* Remove margins from all product card detail elements */
.product-card-details .product-collection,
.product-card-details .product-pricing,
.product-card-details .product-title,
.product-card-details .product-rating {
    margin: 0px !important;
}

/* Remove min-height from product title */
.product-card .product-title,
.product-title {
    min-height: unset !important;
}

/* 12.3 Product Card Details Layout */
.product-card-details {
    padding: 15px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 4px;
    justify-content: flex-start;
    align-items: flex-start;
}


/* ===================================
   13. LOADING STATES
   =================================== */

/* 13.1 Loading & No Results */
.loading, .no-results {
    text-align: center;
    padding: 2rem;
    color: #666;
}

/* 13.2 Infinite Scroll Loading */
.infinite-scroll-loading {
    text-align: center;
    padding: 2rem;
    color: #666;
    margin-top: 1rem;
}

.infinite-scroll-loading p {
    margin-top: 1rem;
    font-size: 0.9rem;
}

/* 13.3 Skeleton Loaders */
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}

.skeleton-card {
    width: 100%;
    min-width: 250px;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
}

.skeleton-image {
    width: 100%;
    height: 250px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

.skeleton-content {
    padding: 1rem;
}

.skeleton-title {
    height: 20px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    margin-bottom: 0.5rem;
    border-radius: 4px;
}

.skeleton-brand {
    height: 14px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    margin-bottom: 0.5rem;
    border-radius: 4px;
    width: 60%;
}

.skeleton-price {
    height: 18px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
    width: 40%;
}

@keyframes skeleton-loading {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* 13.4 Error States */
.error {
    text-align: center;
    padding: 2rem;
    color: #d32f2f;
    background: #ffebee;
    border-radius: 8px;
    margin: 1rem 0;
}


/* ===================================
   14. NAVIGATION BUTTONS
   =================================== */

/* 14.1 See Previous Button */
.see-previous-btn {
    text-align: center;
    margin: 1rem 0 2rem 0;
}

.previous-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #333;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.previous-btn:hover,
.previous-btn:focus {
    background: #555;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.previous-btn:active {
    background: #222;
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.previous-btn svg {
    flex-shrink: 0;
}

/* Mobile optimizations for see previous button */
@media (max-width: 1000px) {
    .see-previous-btn {
        margin: 1rem 20px 2rem 20px;
        text-align: center;
    }
    
    .previous-btn {
        width: 100%;
        justify-content: center;
        padding: 1rem 1.5rem;
        font-size: 1rem;
        border-radius: 6px;
        min-height: 48px; /* Better touch target */
    }
}

/* 14.2 See More Products Button */
.see-more-products {
    text-align: center;
    margin: 2rem 0;
    padding: 1rem 0;
}

.see-more-btn-link {
    display: inline-block;
    background: #2b2b2b;
    color: white;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid #2b2b2b;
}

.see-more-btn-link:hover {
    background: #000;
    border-color: #000;
    color: white;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.see-more-btn-link:active {
    transform: translateY(0);
}


/* ===================================
   15. CUSTOM ACCORDION STYLING
   =================================== */

/* 15.1 Faceted Search Container */
#faceted-search-container .accordion__section .selectionFilter {
    display: flex;
    align-items: center;
    text-transform: capitalize;
    gap: 10px;
    margin: 0px;
    padding: 4px 0px;
    font-size: 1.2rem;
}

#faceted-search-container .accordion__section .selectionFilter label {
    text-decoration: none;
}

#faceted-search-container .accordion__section .selectionFilter input {
    height: 15px;
    width: 15px;
}

#faceted-search-container .accordion__section.open {
    height: auto;
    max-height: 100%;
    overflow: auto;
    padding: 1.25em 0px;
    visibility: visible;
    background-color: transparent;
}

#faceted-search-container .accordion__button.expanded {
    color: #2b2b2b;
}

#faceted-search-container .accordion__button {
    background-color: transparent;
    position: relative;
    display: flex;
    margin: 0px;
    border-bottom: 1px solid #2b2b2b;
    padding: 0.5rem 0rem;
    width: 100%;
    text-align: left;
    color: #2b2b2b;
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: bold;
}


/* ===================================
   16. MOBILE DRAWER STYLES
   =================================== */

/* 16.1 Mobile Filter Button */
.mobile-filter-button {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: hsl(0 0% 9%);
    color: hsl(0 0% 98%);
    border: 1px solid hsl(0 0% 14.9%);
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    z-index: 1000;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    width: auto;
}

.mobile-filter-button:hover {
    background: hsl(0 0% 3%);
    transform: translateX(-50%) translateY(-1px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.mobile-filter-button:active {
    background: hsl(0 0% 6%);
    transform: translateX(-50%) translateY(0);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.mobile-filter-button svg {
    width: 16px;
    height: 16px;
}

/* Mobile Filter Button Inline (below active filters) */
.mobile-filter-button-inline {
    display: inline-flex;
    width: auto;
    background: #425563;
    color: #fff;
    border: 1px solid #425563;
    border-radius: 50px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
}

.mobile-filter-button-inline:hover {
    background: #334155;
    border-color: #334155;
    color: #fff;
}

.mobile-filter-button-inline:active {
    background: #1e293b;
    border-color: #1e293b;
    color: #fff;
}

.mobile-filter-button-inline:focus {
    outline: 2px solid #425563;
    outline-offset: 2px;
}

.mobile-filter-button-inline svg {
    width: 16px;
    height: 16px;
    color: currentColor !important;
    stroke: currentColor !important;
    fill: none !important;
    display: block !important; /* Override global svg{display:none} rule */
}

/* 16.2 Mobile Drawer */
.category-sidebar-m {
    display: block; /* Show mobile drawer */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    pointer-events: none;
}

.category-sidebar-m.active {
    pointer-events: all;
}

/* Drawer Backdrop */
.drawer-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.category-sidebar-m.active .drawer-backdrop {
    opacity: 1;
}

/* Drawer Content */
.drawer-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-radius: 16px 16px 0 0;
    max-height: 85vh;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.category-sidebar-m.active .drawer-content {
    transform: translateY(0);
}

/* Drawer Handle */
.drawer-handle {
    position: relative;
    padding: 12px 0;
    display: flex;
    justify-content: center;
    cursor: grab;
    background: white;
    border-radius: 16px 16px 0 0;
}

.drawer-handle:active {
    cursor: grabbing;
}

.drawer-handle::before {
    content: '';
    width: 40px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
}

/* Drawer Header */
.drawer-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid #e5e7eb;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.drawer-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.drawer-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}

.drawer-close:hover {
    background: #f3f4f6;
    color: #374151;
}

/* Drawer Body */
.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}

/* Drawer Footer (for apply button) */
.drawer-footer {
    position: sticky;
    bottom: 0;
    background: white;
    border-top: 1px solid #e5e7eb;
    padding: 16px 20px;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    gap: 12px;
}

.drawer-apply-button {
    flex: 1;
    background: hsl(0 0% 9%);
    color: hsl(0 0% 98%);
    border: 1px solid hsl(0 0% 14.9%);
    border-radius: 6px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.drawer-footer .mobile-clear-all-filters-btn {
    flex: 0 0 auto;
    background: transparent;
    color: hsl(0 0% 9%);
    border: 1px solid hsl(0 0% 14.9%);
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    white-space: nowrap;
}

.drawer-apply-button:hover {
    background: hsl(0 0% 3%);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transform: translateY(-1px);
}

.drawer-apply-button:active {
    background: hsl(0 0% 6%);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    transform: translateY(0);
}

.drawer-footer .mobile-clear-all-filters-btn:hover {
    background: hsl(0 0% 96%);
    border-color: hsl(0 0% 9%);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transform: translateY(-1px);
}

.drawer-footer .mobile-clear-all-filters-btn:active {
    background: hsl(0 0% 92%);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    transform: translateY(0);
}

/* Active Filters Section in Drawer */
.drawer-active-filters {
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.drawer-active-filters h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.drawer-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.drawer-filter-tag {
    background: #e0e7ff;
    color: #3730a3;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.drawer-filter-tag .remove {
    font-size: 16px;
    cursor: pointer;
    opacity: 0.7;
}

.drawer-filter-tag .remove:hover {
    opacity: 1;
}

/* ===================================
   17. RESPONSIVE DESIGN
   =================================== */

/* 17.0 Large Tablet (1000px - 1045px) */
@media (max-width: 1045px) and (min-width: 760px) {
    .plp-content {
        padding: 0px 20px !important;
    }
    
    .plp-featured {
        display: none;
    }
}

/* 17.1 Tablet & Mobile (1000px) */
@media (max-width: 1000px) {
    .mobile-filter-button {
        display: flex !important; /* Show floating mobile filter button */
    }
    
    .mobile-filter-button-inline {
        display: flex !important; /* Show inline mobile filter button */
        visibility: visible !important; /* Ensure visibility */
        opacity: 1 !important; /* Ensure opacity */
    }
    
    #mobileFilterButtonInline2 {
        display: flex !important; /* Specifically target the button ID */
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .category-sidebar-m {
        display: block; /* Show mobile drawer */
    }
    
    .ui-plp-buttons {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        margin: 0;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }
    
    .ui-plp-buttons::-webkit-scrollbar {
        display: none;
    }
    
    .ui-plp-buttons .ui-plp-button {
        flex-shrink: 0;
        white-space: nowrap;
    }
    

}

/* 17.1.1 Mobile & Small Tablet (1000px) */
@media (max-width: 1000px) {
    .plp-container {
        margin-top: 10px;
    }
    
    .plp-featured {
        display: none; /* Hide featured section on mobile */
    }
    
    .breadcrumb-container {
        display: none; /* Hide breadcrumbs on mobile */
    }
    
    .category-container {
        flex-direction: column;
    }
    
    .category-sidebar {
        display: none; /* Hide desktop sidebar on mobile */
    }
    
    .mobile-filter-button-inline {
        font-size: 12px;
        padding: 6px 16px;
    }
    
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 80px;
        padding: 0 20px;
    }

    .pagination {
        margin-bottom: 80px;
    }
    
    .see-previous-btn {
        margin-bottom: 80px;
    }
}

/* 17.1.2 Mobile Only (768px and below) - Zero margins */
@media (max-width: 768px) {
    .plp-container {
        margin-top: 0px !important;
    }
}

/* 16.2 Mobile Specific (480px) */
@media (max-width: 480px) {
    .filter-modal-grid {
        grid-template-columns: 1fr;
    }

    .filter-modal-title {
        font-size: 18px;
    }
}

/* 16.3 Large Screens (1001px+) */
@media (min-width: 1001px) {
    .page-sidebar {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Hide mobile filter buttons on desktop */
    .mobile-filter-button-inline {
        display: none !important;
    }
    
    .mobile-filter-button {
        display: none !important;
    }
}

/* Header Layout Responsive */
@media (max-width: 1101px) {
    .plp-container {
        flex-direction: column;
    }
}

/* 17.1.2 Phone Only (760px and below) - Single Column & Enhanced Mobile */
@media (max-width: 760px) {
    .products-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
        margin-bottom: 80px;
        padding: 0 20px;
    }

    /* Mobile Drawer Styles */
    .filter-modal-overlay {
        align-items: flex-end;
        justify-content: stretch;
        padding: 0;
    }
    
    .filter-modal {
        width: 100%;
        max-width: none;
        max-height: 85vh;
        border-radius: 12px 12px 0 0;
        animation: slideUpMobile 0.2s ease-out;
        margin: 0;
        border: none;
        border-top: 1px solid hsl(214.3 31.8% 91.4%);
    }

    .filter-modal-header {
        padding: 16px 20px 12px 20px;
        border-radius: 12px 12px 0 0;
        position: relative;
    }

    .filter-modal-header::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 32px;
        height: 3px;
        background: hsl(214.3 31.8% 91.4%);
        border-radius: 2px;
    }
    
    .filter-modal-search {
        padding: 8px 20px 12px 20px;
    }

    .filter-modal-content {
        padding: 12px 20px;
    }
    
    .filter-modal-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .filter-modal-item {
        padding: 6px;
    }

    .filter-modal-footer {
        padding: 12px 20px 16px 20px;
        flex-direction: column-reverse;
        gap: 6px;
    }

    .filter-modal-apply,
    .filter-modal-clear {
        width: 100%;
        max-width: none;
        padding: 10px 16px;
    }

    /* Mobile responsive for floating button */
    .floating-csv-export {
        bottom: 15px;
        left: 15px;
        padding: 10px 14px;
        font-size: 12px;
    }
    
    .floating-csv-export.collapsed {
        min-width: 44px;
        max-width: 44px;
        padding: 10px;
    }
    
    .floating-csv-status {
        bottom: 70px;
        left: 15px;
        max-width: 200px;
    }
}

/* ===================================
   17. UTILITY CLASSES
   =================================== */

/* 17.0 Global SVG Visibility Fix */
svg {
    display: block !important; /* Ensure SVGs are visible globally */
}

/* Exception: Hide SVGs only within navigation elements */
.navPages svg,
.navMegaBar svg {
    display: none !important;
}

/* Exception: Hide SVG icon sprite (contains icon definitions only) */
svg.icons-svg-sprite,
svg.injected-svg {
    display: none !important;
}

/* 17.1 Product Image Height Fix */
.productImage {
    height: unset !important;
}

/* 17.2 Page Sidebar Overrides */
.page-sidebar {
    width: 100% !important;
}

/* 17.0.1 UI PLP Content Paragraph with Read More */
.ui-plp-content-paragraph {
    position: relative;
    line-height: 1.4;
}

/* Mobile truncation to 3 lines */
@media (max-width: 768px) {
    .ui-plp-content-paragraph.truncated {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.4;
        max-height: calc(1.4em * 3);
    }
    
    .read-more-btn {
        display: block;
        color: #007bff;
        background: none;
        border: none;
        padding: 4px 0;
        margin: 8px 0 0 0;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        text-decoration: underline;
        text-align: left;
        width: auto;
    }
    
    .read-more-btn:hover {
        color: #0056b3;
    }
    
    .ui-plp-content-paragraph.expanded {
        display: block;
        -webkit-line-clamp: unset;
        max-height: none;
        overflow: visible;
    }
}

.ui-plp-content {
    .ui-plp-content-headline {
        margin: 0 !important;
        font-size: 18px;
        font-weight: 700;
        font-style: normal;
        color: #000000;
        line-height: 1.2;
        font-family: var(--font-family);
    }
    
    /* Fallback h1 elements will use the global h1 styling (Palatino) */
}

/* h1 styling for category, blog-post, and 404 pages */
h1 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    color: #000000 !important;
    line-height: 1.2 !important;
    font-family: var(--font-family) !important;
}

/* Override any category-desc h1 styling */
.category-desc h1 {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif !important;
    color: #555555 !important;
    font-size: 40px !important;
    font-weight: 400 !important;
    line-height: 55px !important;
    letter-spacing: 0 !important;
    margin-top: 0px !important;
    margin-bottom: 8px !important;
}