/* Master Layout */
.cwf-master-wrapper { 
    display: flex; gap: 40px; font-family: 'Outfit', sans-serif !important; 
    color: #212529; width: 100%; box-sizing: border-box; 
}

/* Sidebar Wrapper */
.cwf-sidebar-container { width: 300px; flex-shrink: 0; transition: 0.3s ease; position: relative; }
.is-collapsed .cwf-sidebar-container { width: 0; margin-right: -40px; }
.is-collapsed .cwf-filter-sidebar { opacity: 0; visibility: hidden; pointer-events: none; }

/* Filter Open Button */
#cwf-open-sidebar { 
    display: none; background: #2d5a27 !important; color: #fff !important; 
    border: none !important; padding: 10px 20px !important; border-radius: 4px; 
    cursor: pointer; font-weight: 700 !important; font-family: 'Outfit', sans-serif !important; 
    font-size: 14px; align-items: center; gap: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.is-collapsed #cwf-open-sidebar { display: flex !important; position: absolute; left: 0; top: 0; z-index: 99; }

button:hover { background-color: #4e4a49 !important; color: #fff; text-decoration: none; }

/* Sidebar Internal Styling */
.cwf-filter-sidebar { width: 100%; background: #fff; }
.cwf-sidebar-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 10px; }
.cwf-sidebar-header h3 { font-size: 18px !important; font-weight: 700 !important; color: #212529 !important; margin: 0 !important; }
.cwf-arrow-back { font-size: 16px; color: #868e96; cursor: pointer; }

.cwf-sidebar-section { border-bottom: 1px solid #f1f3f5; padding: 20px 0; }
.cwf-section-title { font-size: 14px !important; font-weight: 700 !important; display: flex; justify-content: space-between; cursor: pointer; color: #212529 !important; }

/* Radios & Counts */
.cwf-radio-list { display: flex; flex-direction: column; gap: 12px; }
.cwf-radio-container { display: flex !important; align-items: center; position: relative; padding-left: 28px; cursor: pointer; font-size: 13px; color: #495057; }
.cwf-checkmark { position: absolute; left: 0; height: 16px; width: 16px; border: 1px solid #ced4da; border-radius: 50%; }
.cwf-radio-container input { position: absolute; opacity: 0; }
.cwf-radio-container input:checked ~ .cwf-checkmark::after { content: ""; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 50%; background: #2d5a27; }
.cwf-count { margin-left: auto; font-size: 10px; color: #868e96; background: #f8f9fa; padding: 2px 7px; border-radius: 12px; }

/* Price Slider */
.cwf-price-labels { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 15px; font-size: 14px; color: #212529; }
#cwf-price-slider { height: 4px; background: #eee !important; border: none; margin: 10px 0; position: relative; border-radius: 10px; }
#cwf-price-slider .ui-slider-range { background: #2d5a27 !important; position: absolute; height: 100%; border-radius: 10px; }
#cwf-price-slider .ui-slider-handle { height: 18px; width: 18px; background: #2d5a27; border: 2px solid #fff; border-radius: 50%; position: absolute; top: -7px; cursor: pointer; margin-left: -9px; outline: none; }

.cwf-clear-all-btn { width: 100%; background: #2d5a27 !important; color: #fff !important; border: none; border-radius: 4px; padding: 14px; margin-top: 25px; font-weight: 700; cursor: pointer; font-size: 14px; }

/* Products Header */
.cwf-products-container { flex: 1; min-width: 0; }
.cwf-top-bar { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; border-bottom: 1px solid #eee; padding-bottom: 15px; }
.cwf-results-count { font-size: 14px; color: #868e96; }

.cwf-top-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.cwf-sort-box { border: 1.5px solid #212529; border-radius: 6px; padding: 6px 15px; display: flex; flex-direction: column; }
.cwf-sort-box label { font-size: 11px; color: #868e96; margin-bottom: 2px; }
#cwf-ajax-sort { border: none !important; font-weight: 700; color: #212529; font-family: 'Outfit'; background: transparent; cursor: pointer; outline: none; font-size: 18px; padding: 0; }

.cwf-view-toggle { display: flex; gap: 8px; }
.cwf-view-btn { width: 36px; height: 36px; border: 1px solid #eee; border-radius: 6px; background: #fff; cursor: pointer; color: #868e96; display: flex; align-items: center; justify-content: center; }
.cwf-view-btn.active { color: #fff !important; border-color: #2d5a27 !important; background: #2d5a27 !important; }

/* Product Cards */
.cwf-loop-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; width: 100%; }
.cwf-img-container img { width: 100%; height: auto; object-fit: contain; }
.cwf-title { font-size: 16px; font-weight: 700; margin: 15px 0 10px; line-height: 1.3; }
.cwf-title a { color: #212529 !important; text-decoration: none !important; }
.cwf-meta-action { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.cwf-price-txt { font-size: 17px; font-weight: 700; color: #212529; }
.cwf-buy-now { background: #2d5a27 !important; color: #fff !important; padding: 7px 18px; border-radius: 4px; font-size: 12px; font-weight: 700; text-decoration: none !important; }

/* List View Logic */
.cwf-list-layout .cwf-loop-wrapper { grid-template-columns: 1fr; }
.cwf-list-layout .cwf-item { display: flex; align-items: center; width: 100%; border-bottom: 1px solid #eee; padding: 20px 0; }
.cwf-list-layout .cwf-img-container { width: 160px; flex-shrink: 0; }
.cwf-list-layout .cwf-item-details { flex: 1; display: flex; justify-content: space-between; align-items: center; padding-left: 40px; }
.cwf-list-layout .cwf-title { margin: 0; flex: 1; font-size: 19px; }
.cwf-list-layout .cwf-meta-action { min-width: 250px; justify-content: flex-end; gap: 30px; }


/* ======================================================
   RESPONSIVE DESIGN (The New Additions)
   ====================================================== */

/* 1. Desktop Scaling (Reduce 4 columns to 3 on smaller desktops) */
@media (max-width: 1200px) {
    .cwf-grid-layout .cwf-loop-wrapper { grid-template-columns: repeat(3, 1fr); }
    .cwf-master-wrapper { gap: 20px; }
}

/* 2. Tablets (Shift to 2 Columns and handle sidebar) */
@media (max-width: 991px) {
    .cwf-master-wrapper { flex-direction: column; }
    .cwf-sidebar-container { width: 100%; margin-bottom: 20px; }
    .is-collapsed .cwf-sidebar-container { margin-bottom: 60px; }
    
    .cwf-grid-layout .cwf-loop-wrapper { grid-template-columns: repeat(2, 1fr); }
    
    /* When sidebar is closed on mobile, center the "Filter" button */
    .is-collapsed #cwf-open-sidebar { 
        position: static; 
        width: fit-content; 
        margin: 0 auto 20px auto; 
    }
}

/* 3. Small Mobile Phones (1 Column) */
@media (max-width: 580px) {
    /* Stack Header elements (Results count vs Sort box) */
    .cwf-top-bar { flex-direction: column; align-items: center; gap: 15px; }
    .cwf-top-controls { align-items: center; width: 100%; }
    .cwf-sort-box { width: 100%; text-align: center; }

    /* Single column for grid */
    .cwf-grid-layout .cwf-loop-wrapper { grid-template-columns: 1fr; }
    
    /* Turn List view into a Stacked card for mobile */
    .cwf-list-layout .cwf-item { flex-direction: column; text-align: center; padding-top: 10px; }
    .cwf-list-layout .cwf-img-container { width: 100%; margin-bottom: 10px; }
    .cwf-list-layout .cwf-item-details { flex-direction: column; padding-left: 0; width: 100%; }
    .cwf-list-layout .cwf-meta-action { min-width: 100%; justify-content: center; margin-top: 15px; }
    
    /* Make buttons and prices more prominent */
    .cwf-meta-action { justify-content: space-around; width: 100%; }
    .cwf-title { font-size: 18px; }
}

/* Loader centering fix */
#cwf-ajax-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
}