.prodpage-wrapper {
     width: 100%;
     max-width: 1300px;
     margin: 0 auto;
     padding: 20px;
     font-family: 'Inter', sans-serif;
 }

 /* BRAND TABS */
 .prodpage-category-tabs-wrapper {
     margin-bottom: 15px;
     position: relative;
 }

 .category-toggle-btn {
     display: none;
     background: var(--primary);
     color: #fff;
     border: none;
     padding: 10px 15px;
     border-radius: 6px;
     font-weight: 500;
     cursor: pointer;
     margin-bottom: 10px;
 }

 .prodpage-category-tabs {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
     gap: 8px;
     z-index: 1000;
 }

 .category-tab {
     display: block;
     text-align: center;
     padding: 8px 12px;
     border-radius: 8px;
     font-size: 12px;
     border: 1px solid #ccc;
     text-decoration: none;
     color: #333;
     font-weight: 500;
     background: #f9f9f9;
     transition: all 0.3s ease;
 }

 .category-tab:hover {
     background: var(--primary);
     color: white;
     border-color: var(--primary);
 }

 .category-tab.active {
     background: var(--accent);
     color: white;
     border-color: var(--accent);
 }

 /* TOP BAR */
 .prodpage-topbar {
     display: flex;
     align-items: center;
     gap: 20px;
     margin-bottom: 20px;
     flex-wrap: wrap;
 }

 .filter-toggle-btn {
     padding: 10px 20px;
     background: var(--primary);
     color: white;
     border-radius: 8px;
     cursor: pointer;
     border: none;
     font-weight: 500;
     transition: background 0.3s ease;
 }

 .filter-toggle-btn:hover {
     background: #0066cc;
 }

 .sort-box {
     margin-left: auto;
 }

 .custom-select {
     appearance: none;
     padding: 10px 14px;
     border-radius: 8px;
     border: 1px solid #ccc;
     background: #fff url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%23999' stroke-width='2' d='M1 1l4 4 4-4'/></svg>") no-repeat right 12px center;
     background-size: 10px 6px;
     cursor: pointer;
     font-size: 15px;
 }

 /* LAYOUT */
 .prodpage-layout {
     display: grid;
     grid-template-columns: 250px 1fr;
     gap: 25px;
 }

 /* FILTER SIDEBAR */
 .filter-sidebar {
     background: #fff;
     padding: 25px 20px;
     border-radius: 12px;
     border: 1px solid #e0e0e0;
     position: sticky;
     top: 100px;
     height: fit-content;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
     transition: transform 0.3s ease;
     z-index: 150;
 }

 .filter-sidebar.active {
     transform: translateX(0);
 }

 .filter-title {
     font-size: 20px;
     font-weight: 600;
     margin-bottom: 20px;
     color: #222;
 }

 .filter-section {
     margin-bottom: 20px;
 }

 .filter-section h4 {
     font-size: 16px;
     font-weight: 500;
     margin-bottom: 10px;
     color: #555;
 }

 .price-range-inputs {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .price-range-inputs input {
     width: 80px;
     padding: 6px 10px;
     border-radius: 6px;
     border: 1px solid #ccc;
     outline: none;
 }

 .filter-apply-btn {
     padding: 10px 15px;
     background: var(--primary);
     color: #fff;
     border-radius: 8px;
     border: none;
     font-weight: 500;
     width: 100%;
     cursor: pointer;
     transition: background 0.3s ease;
 }

 .filter-apply-btn:hover {
     background: #0066cc;
 }

 /* OVERLAY */
 .filter-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.4);
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease;
     z-index: 140;
 }

 .filter-overlay.active {
     opacity: 1;
     pointer-events: all;
 }

 /* PRODUCT GRID */
 .prodgrid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
     gap: 22px;
 }

 .prodcar-card {
     background: #fff;
     border-radius: 12px;
     padding: 12px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     transition: transform 0.3s, box-shadow 0.3s;
     display: flex;
     flex-direction: column;
 }

 .prodcar-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
 }

 .prodcar-img-wrapper {
     width: 100%;
     height: 230px;
     border-radius: 10px;
     overflow: hidden;
     background: #f4f4f4;
 }

 .prodcar-img-wrapper img {
     width: 100%;
     height: 100%;
     object-fit: contain;
 }

 .prodcar-info {
     margin-top: 12px;
 }

 .prodcar-title {
     font-size: 16px;
     font-weight: 600;
     color: #333;
     margin-bottom: 5px;
 }

 .prodcar-price {
     display: flex;
     gap: 10px;
     margin: 5px 0;
 }

 .prodcar-price-original {
     text-decoration: line-through;
     color: gray;
 }

 .prodcar-price-discount {
     font-weight: bold;
     color: var(--primary);
 }

 .prodcar-btn-add-cart {
     margin-top: 10px;
     padding: 10px;
     background: var(--accent);
     color: white;
     border: none;
     border-radius: 8px;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .prodcar-btn-add-cart:hover {
     background: #ff5500;
 }

 /* PRICE SLIDER WITH PROGRESS */
 .price-slider-wrapper {
     position: relative;
     width: 100%;
     height: 40px;
     margin-top: 10px;
 }

 .price-slider-wrapper input[type=range] {
     position: absolute;
     width: 100%;
     height: 6px;
     --webkit-appearance: none;
     background: transparent;
     pointer-events: none;
     top: 50%;
     transform: translateY(-50%);
 }

 .price-slider-wrapper input[type=range]::-webkit-slider-thumb {
     -webkit-appearance: none;
     width: 18px;
     height: 18px;
     background: var(--primary);
     border-radius: 50%;
     cursor: pointer;
     border: 2px solid white;
     pointer-events: all;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
 }

 .price-slider-wrapper input[type=range]::-moz-range-thumb {
     width: 18px;
     height: 18px;
     background: var(--primary);
     border-radius: 50%;
     cursor: pointer;
     border: 2px solid white;
     pointer-events: all;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
 }

 .price-slider-wrapper .price-slider-progress {
     position: absolute;
     top: 50%;
     left: 0;
     height: 6px;
     background: var(--primary);
     border-radius: 5px;
     transform: translateY(-50%);
     z-index: 1;
 }

 /* SEARCH BOX */
 .search-box {
     display: flex;
     align-items: center;
     gap: 5px;
     margin-left: 20px;
 }

 .search-box input {
     padding: 8px 12px;
     border-radius: 8px;
     border: 1px solid #ccc;
     outline: none;
     width: 200px;
     transition: border 0.3s ease;
 }

 .search-box input:focus {
     border-color: var(--primary);
 }

 .search-box button {
     padding: 8px 15px;
     background: var(--accent);
     color: white;
     border: none;
     border-radius: 8px;
     cursor: pointer;
     transition: background 0.3s ease;
 }

 .search-box button:hover {
     background: #ff5500;
 }

 .filter-section.stock-section .checkbox-item {
     display: flex;
     align-items: center;
     gap: 8px;
     /* space between checkbox and text */
     margin-bottom: 6px;
     /* space between each row */
     cursor: pointer;
     user-select: none;
 }

 .filter-section.stock-section .checkbox-item input {
     width: 18px;
     height: 18px;
     accent-color: var(--primary);
     cursor: pointer;
 }

 /* Make the text clickable */
 .filter-section.stock-section .checkbox-item span {
     cursor: pointer;
 }

 .prodcar-out-stock {
     color: #ff3b30;
     /* Red */
     font-weight: 600;
     margin-left: 8px;
     font-size: 14px;
 }

 .breadcrumb-wrapper {
     padding: 10px 20px;
     background-color: #f8f8f8;
     font-size: 14px;
     margin: 10px 0;
     border-radius: 10px;
 }

 .breadcrumb {
     list-style: none;
     display: flex;
     gap: 5px;
     padding: 0;
     margin: 0;
 }

 .breadcrumb-item+.breadcrumb-item::before {
     content: "/";
     margin: 0 5px;
     color: #555;
 }

 .breadcrumb a {
     text-decoration: none;
     color: #007bff;
 }

 .breadcrumb .active {
     color: #555;
     font-weight: 500;
 }

 /* RESPONSIVE */
 @media (max-width: 980px) {
     .prodpage-layout {
         grid-template-columns: 1fr;
     }

     .filter-sidebar {
         transform: translateX(-100%);
         position: fixed;
         top: 230px;
         left: 0;
         width: 250px;
         height: 100%;
         overflow-y: auto;
         background: #fff;
         box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
         z-index: 150;
     }

     .category-toggle-btn {
         display: inline-block;
     }

     .prodpage-category-tabs {
         display: none;
         grid-template-columns: 1fr;
         gap: 8px;
         background: #fff;
         padding: 10px;
         border-radius: 6px;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
         position: absolute;
         width: 100%;
         top: 45px;
         left: 0;
         z-index: 100;
     }

     .prodpage-category-tabs.active {
         display: grid;
     }

     .prodpage-category-tabs {
         grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
         overflow-x: auto;
     }

     .prodpage-brand-title {
         display: none;
     }

     .search-box {
         margin-left: 0;
         margin-top: 10px;
         width: 100%;
     }

     .search-box input {
         flex: 1;
         width: auto;
     }
 }

 @media (max-width: 600px) {
     .prodpage-topbar {
         flex-direction: column;
         align-items: flex-start;
     }

     .sort-box {
         margin-left: 0;
         width: 100%;
         margin-top: 10px;
     }

     .custom-select {
         width: 100%;
     }

     .prodcar-img-wrapper {
         height: 180px;
     }
 }