.was-container {
     display: flex;
     flex-wrap: wrap;
     gap: 30px;
}

.was-sidebar {
     width: 250px;
     /* Base width, overridable by settings */
     max-width: 250px;
     background: #f9f9f9;
     padding: 20px;
     border-radius: 8px;
     box-sizing: border-box;
     /* User settings apply here */
}

.was-content-container {
     flex: 1;
     /* Allows content to fill remaining space */
     min-width: 0;
     /* User settings apply here */
}

.was-sorting-container {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     /* Base alignment, overridable by settings */
     margin-bottom: 20px;
     /* User settings apply here */
}

.was-sorting-inner {
     display: flex;
     align-items: center;
     gap: 10px;
}

.was-sort-label {
     white-space: nowrap;
     flex-shrink: 0;
}

.was-sorting {
     flex: 1;
     min-width: 150px;
}

/* Base grid styling */
.was-product-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
     transition: opacity 0.3s;
     /* Elements width logic is preserved by grid layout */
}

/* Ensure native loop items span their grid cells correctly */
.was-product-grid .elementor-loop-container {
     width: 100%;
     height: 100%;
     display: flex;
     /* Helps inner content stretch if needed */
}

/* Filter defaults (kept from before, but styling options apply) */
.was-sidebar-main-title {
     font-size: 1.2rem;
     margin-bottom: 20px;
}

.was-sidebar-title {
     font-size: 1.1rem;
     margin-bottom: 15px;
     padding-bottom: 10px;
     border-bottom: 1px solid #ddd;
}

.was-category-list {
     list-style: none;
     padding: 0;
     margin: 0;
}

.was-category-list li {
     margin-bottom: 8px;
}

.was-category-list a {
     text-decoration: none;
     color: #555;
     display: flex;
     justify-content: space-between;
}

.was-category-list li.active a {
     font-weight: bold;
     color: #000;
}

.was-price-slider-wrap {
     display: flex;
     flex-direction: column;
}

.was-price-slider {
     width: 100%;
     margin-bottom: 10px;
}

.was-price-labels {
     display: flex;
     justify-content: space-between;
     font-size: 0.9rem;
     color: #666;
}

.was-size-list label {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: 0.9rem;
     color: #555;
     cursor: pointer;
}

.was-size-item {
     margin-bottom: 8px;
}

.was-clear-btn {
     width: 100%;
     background: #fff;
     border: 1px solid #ddd;
     padding: 10px;
     cursor: pointer;
     font-weight: bold;
     border-radius: 4px;
     transition: all 0.3s ease;
}

.was-pagination {
     margin-top: 30px;
     display: flex;
     justify-content: center;
     gap: 10px;
     flex-wrap: wrap;
}

.was-pagination a,
.was-pagination span {
     padding: 8px 12px;
     border: 1px solid #ddd;
     background: #fff;
     text-decoration: none;
     color: #333;
     border-radius: 4px;
     transition: all 0.3s ease;
}

.was-pagination span.current {
     background: #333;
     color: #fff;
     border-color: #333;
}

.was-product-grid {
     position: relative;
}

.was-product-grid.was-loading {
     opacity: .5;
     pointer-events: none;
}

.was-product-grid.was-loading::after {
     content: "";
     position: absolute;
     top: 50%;
     left: 50%;
     width: 40px;
     height: 40px;
     margin: -20px 0 0 -20px;
     border: 4px solid #ddd;
     border-top-color: #000;
     border-radius: 50%;
     animation: was-spin .8s linear infinite;
     z-index: 999;
}

@keyframes was-spin {
     to {
          transform: rotate(360deg);
     }
}

.was-container .was-sidebar-wrp {
     position: sticky;
     top: 110px;
     height: fit-content;
}

.was-container .was-sidebar {
     height: fit-content;
}

.was-sidebar .was-filter-group input[type="checkbox"] {
     appearance: none;
     width: 24px;
     height: 24px;
     border: 1px solid rgba(0, 0, 0, 0.12);
     background-color: transparent;
     cursor: pointer;
     border-radius: 4px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     -ms-border-radius: 4px;
     -o-border-radius: 4px;
}

.was-sidebar .was-filter-group input[type="checkbox"]:checked {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
     background-size: 16px;
     background-position: center;
     background-repeat: no-repeat;
     background-color: #0F2D52;
}

.was-container .was-sidebar .was-clear-btn {
     position: relative;
     overflow: hidden;
     flex: none;
     z-index: 1;
}

.was-container .was-sidebar .was-clear-btn::before {
     position: absolute;
     content: "";
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     opacity: 0;
     background: #0F2D52;
     z-index: -1;
     transition: 0.3s;
     -webkit-transition: 0.3s;
     -moz-transition: 0.3s;
     -ms-transition: 0.3s;
     -o-transition: 0.3s;
}

.was-container .was-sidebar .was-clear-btn:hover {
     color: #fff !important;
}
.was-container .was-sidebar .was-clear-btn:hover:before {
     opacity: 1;
     left: 0;
}

.was-container .was-content-container .was-sorting {
     position: relative;
     appearance: none;
     cursor: pointer;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 10px center;
     background-size: 15px;
     padding: 8px 30px 8px 10px;
}

.was-sidebar .close-icon {
     display: none;
}

.was-container .was-sidebar-filter {
     display: none;
}

.was-container .was-pagination .page-numbers {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 48px;
     height: 48px;
     border-radius: 8px;
     border: 1px solid rgba(0, 0, 0, 0.12);
}

.was-container .was-pagination .page-numbers.prev,
.was-container .was-pagination .page-numbers.next {
     background-color: rgba(15, 45, 82, 0.08) !important;
     border: 1px solid transparent !important;
     padding: 8px !important;
}

.was-container .was-pagination .page-numbers.prev:hover,
.was-container .was-pagination .page-numbers.next:hover {
     background-color: transparent !important;
     border: 1px solid rgba(15, 45, 82, 0.08) !important;
}

.was-container .was-pagination .page-numbers.prev svg,
.was-container .was-pagination .page-numbers.next svg {
     width: 20px;
     height: 20px;
}

.was-sidebar .was-sidebar-title {
     position: relative;
     margin: 0  !important;
     cursor: pointer;
     padding-right: 20px;
}

.was-sidebar .was-sidebar-title:after {
     position: absolute;
     content: "";
     top: 10px;
     right: 0;
     width: 20px;
     height: 20px;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Free v7.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--%3E%3Cpath fill='rgb(26, 26, 26)' d='M352 128C352 110.3 337.7 96 320 96C302.3 96 288 110.3 288 128L288 288L128 288C110.3 288 96 302.3 96 320C96 337.7 110.3 352 128 352L288 352L288 512C288 529.7 302.3 544 320 544C337.7 544 352 529.7 352 512L352 352L512 352C529.7 352 544 337.7 544 320C544 302.3 529.7 288 512 288L352 288L352 128z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
     transition: 0.3s;
     -webkit-transition: 0.3s;
     -moz-transition: 0.3s;
     -ms-transition: 0.3s;
     -o-transition: 0.3s;
}

.was-sidebar .was-sidebar-title.active:after {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Free v7.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--%3E%3Cpath fill='rgb(26, 26, 26)' d='M96 320C96 302.3 110.3 288 128 288L512 288C529.7 288 544 302.3 544 320C544 337.7 529.7 352 512 352L128 352C110.3 352 96 337.7 96 320z'/%3E%3C/svg%3E");
     transform: rotate(180deg);
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
     -ms-transform: rotate(180deg);
     -o-transform: rotate(180deg);
}

.was-sidebar .was-category-accordion {
     margin-top: 20px;
}

/*
 * Fallback only — applies when no responsive Sidebar Width / Columns
 * value has been set in Elementor for this breakpoint. Elementor's
 * own generated CSS (which targets {{WRAPPER}} .was-sidebar etc.) is
 * more specific than this plain class selector, so it will always
 * override this fallback once a control value is set. No !important
 * here on purpose — !important would always beat Elementor's controls
 * and is what broke the Sidebar Width / Content Container controls.
 */
@media (max-width: 1024px) {
     .was-sidebar {
          width: 100%;
          max-width: 100%;
          flex: 1 1 100%;
     }

     .was-content-container {
          width: 100%;
          flex: 1 1 100%;
     }

     .was-product-grid {
          grid-template-columns: repeat(2, 1fr);
     }
}

@media (max-width: 880px) {

     .was-sidebar .close-icon {
          display: block;
          position: absolute;
          width: 28px;
          height: 28px;
          top: 10px;
          right: 10px;
          cursor: pointer;
     }

     .was-sidebar .close-icon svg path {
          transition: 0.3s;
          -webkit-transition: 0.3s;
          -moz-transition: 0.3s;
          -ms-transition: 0.3s;
          -o-transition: 0.3s;
     }

     .was-sidebar .close-icon:hover svg path {
          fill: #D4A017;
     }

     .was-container .was-sidebar-filter {
          display: flex;
          align-items: center;
          gap: 8px;
          font-weight: 700;
          cursor: pointer;
          transition: 0.3s;
          -webkit-transition: 0.3s;
          -moz-transition: 0.3s;
          -ms-transition: 0.3s;
          -o-transition: 0.3s;
     }

     .was-container .was-sidebar-filter svg {
          transition: 0.3s;
          -webkit-transition: 0.3s;
          -moz-transition: 0.3s;
          -ms-transition: 0.3s;
          -o-transition: 0.3s;
     }

     .was-container .was-sidebar-filter:hover {
          color: #D4A017;
     }

     .was-container .was-sidebar-filter:hover svg {
          stroke: #D4A017;
     }

     .was-container .was-content-container .was-sorting-container {
          justify-content: space-between !important;
          flex-wrap: wrap;
          gap: 10px;
     }

     .was-container .was-sidebar-wrp {
          display: block;
          position: fixed;
          top: 0;
          left: -100%;
          width: 100%;
          max-width: 280px;
          height: 100vh;
          background: #ffff;
          padding: 35px 0 20px;
          opacity: 0;
          box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
          z-index: 9999;
          transition: 0.3s;
          -webkit-transition: 0.3s;
          -moz-transition: 0.3s;
          -ms-transition: 0.3s;
          -o-transition: 0.3s;
     }

     .was-container .was-sidebar-wrp.open {
          left: 0;
          opacity: 1;
     }

     .was-container .was-sidebar-wrp .was-sidebar {
          width: 100% !important;
          max-width: 100% !important;
          border: none !important;
          background-color: transparent !important;
          overflow-y: auto;
          height: 100%;
     }

     .was-container .was-filter-group {
          margin-bottom: 0;
     }

     .was-container .was-pagination .page-numbers {
          width: 36px;
          height: 36px;
     }

     .was-container .was-pagination .page-numbers.prev svg,
     .was-container .was-pagination .page-numbers.next svg {
          width: 16px;
          height: 16px;
     }
}

@media (max-width: 575px) {
     .was-product-grid {
          grid-template-columns: repeat(1, 1fr) !important;
     }
}