/* Reset and Container */
.filter-main-wrapper { font-family: 'Inter', sans-serif; font-size: 14px; color: #131313; margin-bottom: 30px; }
.top-bar-container, .filter-panel-header, .filter-group-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

/* Top Bar Container - Updated Borders & Background */
.top-bar-container { background-color: #8223271a; border: none; padding: 15px 30px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 20px; }
.controls-right { display: flex; align-items: center; gap: 15px; }

/* Product Count - Updated Typography */
.count-display { font-weight: 400; font-size: 18px; line-height: 24px; color: #131313; }
.count-display span.num { font-weight: 700; color: #131313; }

/* Sorting Dropdown - Updated chevron color */
.sort-control { height: 48px; font-family: Inter; font-weight: 400; font-size: 14px; line-height: 20px;letter-spacing: 0.005em; padding: 10px 40px 10px 15px; border-radius: 8px; border: none; background-color: #fff; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3%3Cpath d='M2 4L6 8L10 4' stroke='%23131313' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; font-weight: 500; cursor: pointer; color: #131313; }

/* Filter Toggle Button - Updated Brand Color */
.filter-toggle-button { background: #822327 !important; color: white; border: none; font-size: 16px; font-weight: 600; letter-spacing: 0.02em; padding: 12px 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center;}
.filter-toggle-button:hover { background: #822327; }

/* Filter Panel (Collapsed by default) - Updated Borders & Background */
.filter-panel-container { background-color: #8223271a; border: none; padding: 0 26px; border-radius: 4px; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-10px); transition: all 0.4s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.filter-panel-container.active { max-height: 500px; opacity: 1; transform: translateY(0); padding: 26px; overflow: visible; }

/* Filter Panel Header and Close Icon */
.filter-panel-header { margin-bottom: 25px; padding-bottom: 15px; gap: 20px; }
.filter-panel-header h3 { font-weight: 500; font-size: 24px; line-height: 24px; letter-spacing: 0.002em; color: #131313; margin: 0; }
.close-icon { font-size: 24px; color: #822327; cursor: pointer; font-weight: 700; line-height: 1; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; transition: background-color 0.2s; }
.close-icon:hover { background-color: rgba(130, 35, 39, 0.08); }

/* Filter Groups and Fields */
.filter-group-row { gap: 50px; align-items: flex-start; }
.filter-group { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.first-row,.second-row { max-width: 250px; }
/* Label Typography - Updated */
.filter-group label { font-weight: 500; font-size: 16px; line-height: 24px; color: #131313; letter-spacing: 0.02em; }

.category-select { padding: 12px 15px; border-radius: 4px; border: 1px solid #D5BFC1; background-color: #fff; width: 100%; font-weight: 500; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3%3Cpath d='M2 4L6 8L10 4' stroke='%23131313' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; cursor: pointer; color: #131313; }

/* Price Slider styling */
.price-filter-group .price-slider-wrapper { min-width: 250px; }
.price-filter-group .price-values { font-weight: 700; font-size: 14px; color: #131313; margin-bottom: 12px; display: block; }
.price-filter-group #price-slider { height: 4px; border: none; background-color: #D5BFC1; border-radius: 2px; }
.price-filter-group .noUi-connect { background-color: #822327; } 
.price-filter-group .noUi-handle { width: 16px !important; height: 16px !important; border-radius: 50% !important; background-color: #822327 !important; border: none !important; box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important; cursor: pointer !important; right: -8px !important; top: -6px !important; outline: none !important; }
.price-filter-group .noUi-handle:before, .price-filter-group .noUi-handle:after { display: none; }

/* Size Options styling */
.filter-group .size-options { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.filter-group .size-options input { display: none; } 

/* Size Labels Typography - Updated */
.filter-group .size-options label { font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 18px; line-height: 27px; color: #141515; padding: 10px 18px; background-color: #fff; border-radius: 8px; cursor: pointer; border: none; min-width: 45px; text-align: center; transition: 0.2s; margin: 0; display: inline-block; box-sizing: border-box; text-transform: none; letter-spacing: normal; }

.filter-group .size-options label:hover { background-color: #8223271a; border-color: #D5BFC1; }
.filter-group .size-options input:checked + label { background-color: #822327; color: white; border-color: #822327; }

/* Apply Button in Panel */
.filter-group-row .apply-btn { background-color: #822327; color: white; border: none; padding: 12px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; letter-spacing: 0.02em; font-size: 16px; margin-left: auto; display: block; align-self: flex-end; }
.filter-group-row .apply-btn:hover { background-color: #822327; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .filter-panel-header, .filter-group-row { flex-direction: column; align-items: flex-start; gap: 15px; }
    .filter-panel-header .close-icon { align-self: flex-end; }
    .category-select { width: 100%; }
    .price-filter-group .price-slider-wrapper { min-width: 100%; }
    .size-options { width: 100%; }
    .filter-group-row .apply-btn { margin-left: 0; width: 100%; }
}
@media (max-width: 600px) {
    .top-bar-container { flex-direction: column; align-items: flex-start; gap: 10px; padding: 15px; }
    .count-display { margin-bottom: 5px; width: 100%; text-align: left; }
    .controls-right { width: 100%; justify-content: space-between; }
    .sort-control { width: auto; flex: 1; }
    .filter-toggle-button { padding: 10px 15px; font-size: 14px; }
}

/* ==========================================================================
   Color Overrides specifically for Page ID 284
   ========================================================================== */

/* Replace #8223271a with #F0AB001a */
.page-id-284 .top-bar-container,
.page-id-284 .filter-panel-container,
.page-id-284 .filter-group .size-options label:hover {
    background-color: #F0AB001a;
}

/* Replace #822327 with #F0AB00 (Backgrounds) */
.page-id-284 .filter-toggle-button {
    background: #F0AB00 !important;
}

.page-id-284 .filter-toggle-button:hover,
.page-id-284 .filter-group-row .apply-btn,
.page-id-284 .filter-group-row .apply-btn:hover,
.page-id-284 .price-filter-group .noUi-connect,
.page-id-284 .filter-group .size-options input:checked + label {
    background-color: #F0AB00;
}

/* Replace #822327 with #F0AB00 (Slider Handle with !important) */
.page-id-284 .price-filter-group .noUi-handle {
    background-color: #F0AB00 !important;
}

/* Replace #822327 with #F0AB00 (Text/Border Colors) */
.page-id-284 .close-icon {
    color: #F0AB00;
}

.page-id-284 .filter-group .size-options input:checked + label {
    border-color: #F0AB00;
}

/* Update the close-icon hover background to match the new yellow hue (rgb 240, 171, 0) */
.page-id-284 .close-icon:hover {
    background-color: rgba(240, 171, 0, 0.08);
}

/* ==========================================================================
   Color Overrides specifically for Page ID 296
   ========================================================================== */

/* Replace #8223271a with #0037711a */
.page-id-296 .top-bar-container,
.page-id-296 .filter-panel-container,
.page-id-296 .filter-group .size-options label:hover {
    background-color: #0037711a;
}

/* Replace #822327 with #003771 (Backgrounds) */
.page-id-296 .filter-toggle-button {
    background: #003771 !important;
}

.page-id-296 .filter-toggle-button:hover,
.page-id-296 .filter-group-row .apply-btn,
.page-id-296 .filter-group-row .apply-btn:hover,
.page-id-296 .price-filter-group .noUi-connect,
.page-id-296 .filter-group .size-options input:checked + label {
    background-color: #003771;
}

/* Replace #822327 with #003771 (Slider Handle with !important) */
.page-id-296 .price-filter-group .noUi-handle {
    background-color: #003771 !important;
}

/* Replace #822327 with #003771 (Text/Border Colors) */
.page-id-296 .close-icon {
    color: #003771;
}

.page-id-296 .filter-group .size-options input:checked + label {
    border-color: #003771;
}

/* Update the close-icon hover background to match the new blue hue (rgb 0, 55, 113) */
.page-id-296 .close-icon:hover {
    background-color: rgba(0, 55, 113, 0.08);
}