/* FIRELAX - Products List Page Styles */
/* ========== MODERNES PRODUCT LISTING DESIGN - FRELAX STYLE ==========
        Weißes, sauberes Design mit horizontalem Filter
        ===================================================================== */

         /* Main Wrapper - Heller Hintergrund */
         .products-wrapper {
             display: flex;
             flex-direction: column;
             min-height: calc(100vh - 200px);
             background: #ffffff;
             font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
             --products-header-offset: 70px;
         }

         /* ========== STICKY FILTERLEISTE ========== */
         .filter-bar {
             position: sticky;
             top: var(--products-header-offset);
             z-index: 900;
             background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 249, 252, 0.96) 100%);
             border-bottom: 1px solid #e5e7eb;
             backdrop-filter: blur(16px);
             box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
             transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.3s ease;
         }

         .filter-bar--hidden {
             transform: translateY(-100%);
             pointer-events: none;
         }

         .filter-bar.is-scrolled {
             box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12);
             border-bottom-color: #d7dee7;
         }

         .filter-bar-inner {
             max-width: var(--bs-container-xxl, 1320px);
             width: 100%;
             margin: 0 auto;
             padding: 16px 12px 14px;
             display: flex;
             flex-direction: column;
             gap: 14px;
         }

         .filter-bar-row {
             display: flex;
             align-items: flex-end;
             flex-wrap: wrap;
             gap: 14px;
         }

         .filter-bar-group {
             display: flex;
             flex-direction: column;
             align-items: stretch;
             gap: 8px;
             flex: 1 1 180px;
             min-width: 180px;
         }

         .filter-bar-group label {
             display: flex;
             align-items: center;
             gap: 6px;
             font-size: 11px;
             font-weight: 700;
             color: #4b5563;
             white-space: nowrap;
             text-transform: uppercase;
             letter-spacing: 0.08em;
         }

         .filter-bar .form-select,
         .filter-bar .form-control {
             background: #ffffff;
             border: 1px solid #d3dae4;
             color: #111827;
             font-size: 14px;
             border-radius: 12px;
             padding: 11px 14px;
             min-width: 140px;
             min-height: 48px;
             transition: all 0.2s ease;
         }

         .filter-bar .form-select:focus,
         .filter-bar .form-control:focus {
             border-color: #feaf39;
             box-shadow: 0 0 0 4px rgba(254, 175, 57, 0.18);
             outline: none;
             background: #ffffff;
         }

         .filter-bar .form-select option {
             background: #ffffff;
             color: #111827;
         }

         .filter-bar .price-inputs {
             display: flex;
             align-items: center;
             gap: 6px;
             width: 100%;
         }

         .filter-bar .price-inputs span {
             color: #6b7280;
             font-weight: 600;
         }

         .filter-bar .price-inputs .form-control {
             width: 100%;
             min-width: 0;
         }

         .filter-bar .filter-checkbox {
             display: flex;
             align-items: center;
             gap: 6px;
             justify-content: center;
             align-self: flex-end;
             min-height: 48px;
             padding: 10px 16px;
             background: #ffffff;
             border: 1px solid #d3dae4;
             border-radius: 12px;
             cursor: pointer;
             transition: all 0.2s ease;
             font-size: 14px;
             color: #374151;
             font-weight: 600;
         }

         .filter-bar .filter-checkbox:hover {
             border-color: #feaf39;
             color: #9a6700;
             background: #fffaf2;
         }

         .filter-bar .filter-checkbox input {
             accent-color: #feaf39;
             width: 14px;
             height: 14px;
             margin: 0;
         }

         .filter-bar-actions {
             display: flex;
             align-items: center;
             gap: 10px;
             margin-left: auto;
             flex-wrap: wrap;
         }

         .filter-bar .btn-filter {
             background: linear-gradient(135deg, #feaf39, #f59e0b);
             color: #1a1d23;
             border: none;
             padding: 11px 18px;
             border-radius: 12px;
             font-weight: 700;
             font-size: 14px;
             cursor: pointer;
             transition: all 0.2s ease;
             display: flex;
             align-items: center;
             gap: 6px;
             min-height: 48px;
         }

         .filter-bar .btn-filter:hover {
             background: linear-gradient(135deg, #ffbf4d, #feaf39);
             transform: translateY(-1px);
             box-shadow: 0 4px 12px rgba(254, 175, 57, 0.3);
         }

         .filter-bar .btn-reset {
             background: #ffffff;
             color: #4b5563;
             border: 1px solid #d3dae4;
             padding: 11px 14px;
             border-radius: 12px;
             font-size: 14px;
             font-weight: 700;
             cursor: pointer;
             transition: all 0.2s ease;
             text-decoration: none;
             display: flex;
             align-items: center;
             gap: 6px;
             min-height: 48px;
         }

         .filter-bar .btn-reset:hover {
             background: #f8fafc;
             color: #111827;
             border-color: #94a3b8;
         }

         /* ========== CUSTOM FILTER DROPDOWNS (Navbar-Style) ========== */
         .filter-dropdown {
             position: relative;
         }

         .filter-dropdown__trigger {
             display: flex;
             align-items: center;
             justify-content: space-between;
             gap: 8px;
             width: 100%;
             min-height: 48px;
             padding: 11px 14px;
             background: #ffffff;
             border: 1px solid #d3dae4;
             border-radius: 12px;
             color: #111827;
             font-size: 14px;
             font-weight: 500;
             cursor: pointer;
             transition: border-color 0.2s, box-shadow 0.2s;
             white-space: nowrap;
             text-align: left;
         }

         .filter-dropdown__trigger:hover {
             border-color: #feaf39;
         }

         .filter-dropdown__trigger--active {
             border-color: #feaf39;
             background: #fffaf2;
             color: #9a6700;
             font-weight: 600;
         }

         .filter-dropdown__chevron {
             font-size: 11px;
             color: #9ca3af;
             transition: transform 0.25s ease;
             flex-shrink: 0;
         }

         .filter-dropdown.is-open .filter-dropdown__chevron {
             transform: rotate(180deg);
         }

         /* Panel – dunkler Stil wie Navbar-Kategorie-Dropdown */
         .filter-dropdown__panel {
             display: none;
             position: absolute;
             top: calc(100% + 6px);
             left: 0;
             min-width: 420px;
             background: linear-gradient(180deg, #1a1d23 0%, #111318 100%);
             border: 1px solid rgba(255, 255, 255, 0.08);
             border-radius: 16px;
             box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
             z-index: 1000;
             padding: 1.15rem 1.25rem;
             color: #f5f1e8;
         }

         .filter-dropdown.is-open .filter-dropdown__panel {
             display: block;
         }

         .filter-dropdown__panel--list {
             min-width: 240px;
             max-width: 300px;
         }

         /* Header im Panel */
         .filter-dropdown__header {
             display: flex;
             align-items: center;
             justify-content: space-between;
             gap: 1rem;
             margin-bottom: 0.85rem;
             padding-bottom: 0.85rem;
             border-bottom: 1px solid rgba(255, 255, 255, 0.08);
             color: rgba(255, 255, 255, 0.7);
             font-size: 0.78rem;
             text-transform: uppercase;
             letter-spacing: 0.08em;
             font-weight: 700;
         }

         .filter-dropdown__clear {
             color: #feaf39;
             text-decoration: none;
             font-weight: 700;
             font-size: 0.78rem;
             white-space: nowrap;
         }

         .filter-dropdown__clear:hover {
             color: #ffcf70;
         }

         /* Kategorie-Grid (3 Spalten wie Navbar) */
         .filter-dropdown__grid {
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
             gap: 0.65rem;
         }

         .filter-dropdown__group {
             padding: 0.75rem 0.85rem;
             border-radius: 12px;
             background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
             border: 1px solid rgba(255, 255, 255, 0.05);
             box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
         }

         .filter-dropdown__title {
             display: inline-flex;
             align-items: center;
             gap: 0.5rem;
             color: #fff;
             font-weight: 700;
             text-decoration: none;
             margin-bottom: 0.5rem;
             font-size: 0.88rem;
         }

         .filter-props-label {
             color: #ffffff;
         }

         .filter-dropdown__title:hover {
             color: #feaf39;
         }

         .filter-dropdown__title--active {
             color: #feaf39;
         }

         .filter-dropdown__children {
             display: grid;
             gap: 0.32rem;
         }

         .filter-dropdown__child {
             display: block;
             color: #fff;
             text-decoration: none;
             font-size: 0.88rem;
             line-height: 1.4;
             padding: 0.35rem 0.6rem;
             border-radius: 8px;
             transition: color 0.15s, background 0.15s;
         }

         .filter-dropdown__child:hover {
             color: #feaf39;
             background: rgba(254, 175, 57, 0.08);
         }

         .filter-dropdown__child--active {
             color: #feaf39;
             font-weight: 600;
             background: rgba(254, 175, 57, 0.1);
         }

         /* Checkbox-Variante für Eigenschaften (gleicher Look wie Marken-Links) */
         .filter-dropdown__child--checkbox {
             display: flex;
             align-items: center;
             gap: 10px;
             cursor: pointer;
             user-select: none;
         }

         .filter-dropdown__child--checkbox input[type="checkbox"] {
             position: absolute;
             opacity: 0;
             width: 0;
             height: 0;
             pointer-events: none;
         }

         /* Checkbox-Kästchen: checked-State mit Häkchen */
         .filter-dropdown__child--active .filter-props-checkbox {
             background: #feaf39;
             border-color: #feaf39;
         }

         .filter-dropdown__child--active .filter-props-checkbox::after {
             content: '';
             position: absolute;
             top: 2px;
             left: 5px;
             width: 5px;
             height: 9px;
             border: 2px solid #1a1d23;
             border-top: none;
             border-left: none;
             transform: rotate(45deg);
         }

         .filter-dropdown__child--active .filter-props-label {
             color: #feaf39;
         }

         /* Disabled-State: Eigenschaft hat 0 Treffer */
         .filter-dropdown__child--disabled {
             opacity: 0.35;
             pointer-events: none;
             cursor: default;
         }

         /* Treffer-Badge neben Eigenschaftsname */
         .filter-props-badge {
             margin-left: auto;
             font-size: 0.75rem;
             color: rgba(255, 255, 255, 0.45);
             font-weight: 400;
             min-width: 1.5em;
             text-align: right;
         }

         .filter-dropdown__child--active .filter-props-badge {
             color: rgba(254, 175, 57, 0.65);
         }

         /* Einfache Liste (Marke / Sortierung) */
         .filter-dropdown__list {
             display: grid;
             gap: 2px;
             max-height: 320px;
             overflow-y: auto;
             padding: 0.15rem 0;
         }

         .filter-dropdown__list::-webkit-scrollbar {
             width: 6px;
         }

         .filter-dropdown__list::-webkit-scrollbar-track {
             background: transparent;
         }

         .filter-dropdown__list::-webkit-scrollbar-thumb {
             background: rgba(255, 255, 255, 0.12);
             border-radius: 3px;
         }

         /* Responsive für Filter-Dropdowns */
         @media (max-width: 768px) {
             .filter-dropdown__panel {
                 position: fixed;
                 top: auto;
                 bottom: 0;
                 left: 0;
                 right: 0;
                 border-radius: 24px 24px 0 0;
                 max-height: 70vh;
                 overflow-y: auto;
                 min-width: 100%;
             }

             .filter-dropdown__grid {
                 grid-template-columns: 1fr;
             }
         }

         /* Main Content - Gleiche Breite wie Header und Filter */
         .products-main-content {
             flex: 1;
             padding: 30px 30px; /* Gleich wie Header/Filter horizontal */
             background: #ffffff;
             min-height: calc(100vh - 200px);
             max-width: 1660px; /* 1600px + 2x30px padding */
             margin: 0 auto;
             width: 100%;
         }

         .filter-body {
             padding: 0;
         }

         .products-main {
             padding-top: 20px;
         }

         .products-header {
             display: flex;
             align-items: flex-start;
             justify-content: space-between;
             gap: 16px;
             margin-bottom: 24px;
         }

         .results-info {
             display: flex;
             flex-direction: column;
             gap: 12px;
         }

         .results-count {
             font-size: 15px;
             font-weight: 700;
             color: #111827;
         }

         .active-filter-chip-row {
             display: flex;
             flex-wrap: wrap;
             gap: 8px;
         }

         .active-filter-chip {
             display: inline-flex;
             align-items: center;
             min-height: 34px;
             padding: 6px 12px;
             border-radius: 999px;
             background: #fff7e8;
             color: #9a6700;
             font-size: 13px;
             font-weight: 600;
             text-decoration: none;
         }

         .active-filter-chip--clear {
             background: #eef2f7;
             color: #334155;
         }

         .active-filter-chip--clear:hover {
             background: #e2e8f0;
             color: #0f172a;
         }

         .active-filter-chip--removable {
             cursor: pointer;
             gap: 6px;
             transition: background 0.15s, color 0.15s;
         }

         .active-filter-chip--removable:hover {
             background: #fde68a;
             color: #92400e;
         }

         .active-filter-chip__remove {
             font-size: 10px;
             opacity: 0.7;
         }

         .active-filter-chip--removable:hover .active-filter-chip__remove {
             opacity: 1;
         }

         .active-filter-chip--fixed {
             cursor: default;
             opacity: 0.85;
         }

         /* Filter Sections */
         .filter-section {
             border-bottom: 1px solid #f0f0f0;
             background: #ffffff;
         }

             .filter-section:last-child {
                 border-bottom: none;
             }

         .filter-section-header {
             padding: 18px 24px;
             cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: space-between;
             transition: all 0.3s ease;
             color: #212121;
             font-weight: 600;
             font-size: 14px;
             user-select: none;
         }

             .filter-section-header:hover {
                 background: #fafafa;
             }

             .filter-section-header i:first-child {
                 color: #feaf39;
                 margin-right: 12px;
                 width: 18px;
                 text-align: center;
                 font-size: 14px;
             }

             .filter-section-header .toggle-icon {
                 color: #999;
                 font-size: 12px;
                 transition: transform 0.3s ease;
             }

         .filter-section.collapsed .toggle-icon {
             transform: rotate(-90deg);
         }

         .filter-section-content {
             padding: 0 24px 20px;
         }

         /* Form Controls - Hellere Variante */
         .filter-sidebar .form-control,
         .filter-sidebar .form-select {
             background: #ffffff;
             border: 1px solid #d0d0d0;
             color: #212121;
             font-size: 13px;
             border-radius: 8px;
             padding: 11px 14px;
             transition: all 0.3s ease;
         }

         .filter-sidebar .form-select {
             padding-right: 40px;
             background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
             background-repeat: no-repeat;
             background-position: right 12px center;
             background-size: 12px;
         }

             .filter-sidebar .form-control:focus,
             .filter-sidebar .form-select:focus {
                 border-color: #feaf39;
                 box-shadow: 0 0 0 3px rgba(254, 175, 57, 0.1);
                 outline: none;
             }

         .filter-sidebar .form-control::placeholder {
             color: #999;
         }

         .filter-sidebar .form-select option {
             background: #ffffff;
             color: #212121;
         }

         /* Checkboxes */
         .filter-checkbox {
             display: flex;
             align-items: center;
             padding: 10px 0;
             cursor: pointer;
             transition: all 0.2s ease;
             color: #444;
             border-radius: 8px;
             margin: 2px -8px;
             padding-left: 8px;
             padding-right: 8px;
         }

             .filter-checkbox:hover {
                 color: #feaf39;
                 background: rgba(254, 175, 57, 0.05);
             }

             .filter-checkbox input[type="checkbox"] {
                 width: 18px;
                 height: 18px;
                 margin-right: 12px;
                 accent-color: #feaf39;
                 cursor: pointer;
                 border-radius: 4px;
             }

             .filter-checkbox .count {
                 margin-left: auto;
                 background: #f0f0f0;
                 color: #666;
                 padding: 3px 10px;
                 border-radius: 12px;
                 font-size: 11px;
                 font-weight: 600;
             }

         /* Category List */
         .category-list {
             list-style: none;
             padding: 0;
             margin: 0;
         }

             .category-list li {
                 padding: 0;
             }

             .category-list a,
             .category-list label {
                 display: flex;
                 align-items: center;
                 padding: 10px 8px;
                 color: #444;
                 text-decoration: none;
                 font-size: 13px;
                 transition: all 0.2s ease;
                 cursor: pointer;
                 border-radius: 8px;
                 margin: 2px -8px;
             }

                 .category-list a:hover,
                 .category-list label:hover {
                     color: #feaf39;
                     background: rgba(254, 175, 57, 0.05);
                 }

                 .category-list a.active,
                 .category-list input:checked + label {
                     color: #feaf39;
                     font-weight: 700;
                     background: rgba(254, 175, 57, 0.1);
                 }

                 .category-list a i,
                 .category-list label i {
                     color: #999;
                     margin-right: 10px;
                     transition: color 0.2s ease;
                 }

                 .category-list a:hover i,
                 .category-list label:hover i,
                 .category-list a.active i {
                     color: #feaf39;
                 }

         /* Price Range */
         .price-range {
             display: flex;
             gap: 12px;
             align-items: center;
         }

             .price-range .form-control {
                 flex: 1;
             }

         .price-range-info {
             font-size: 11px;
             color: #666;
             margin-top: 10px;
             display: flex;
             align-items: center;
             gap: 6px;
         }

             .price-range-info i {
                 color: #feaf39;
             }

         /* Filter Actions */
         .filter-actions {
             padding: 20px 24px;
             background: #ffffff;
             border-top: 1px solid #f0f0f0;
             position: sticky;
             bottom: 0;
             box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
         }

             .filter-actions .btn-primary {
                 background: #feaf39;
                 border: none;
                 color: #fff;
                 font-weight: 700;
                 padding: 13px;
                 border-radius: 8px;
                 font-size: 13px;
                 transition: all 0.3s ease;
                 width: 100%;
                 margin-bottom: 10px;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 gap: 8px;
             }

                 .filter-actions .btn-primary:hover {
                     background: #e5981f;
                     transform: translateY(-2px);
                     box-shadow: 0 4px 15px rgba(254, 175, 57, 0.3);
                 }

             .filter-actions .btn-outline-secondary {
                 border: 1px solid #d0d0d0;
                 color: #666;
                 font-weight: 600;
                 padding: 12px;
                 border-radius: 8px;
                 font-size: 13px;
                 background: #ffffff;
                 transition: all 0.3s ease;
                 width: 100%;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 gap: 8px;
                 text-decoration: none;
             }

                 .filter-actions .btn-outline-secondary:hover {
                     border-color: #feaf39;
                     color: #feaf39;
                     background: rgba(254, 175, 57, 0.05);
                 }

         /* Main Content Area */
         /* Breadcrumb - Wie Details.cshtml */
         .breadcrumb {
             background: transparent;
             padding: 0;
             margin-bottom: 20px;
             border-bottom: 1px solid #f0f0f0;
             padding-bottom: 15px;
         }

         .breadcrumb-item a {
             color: #666;
             text-decoration: none;
             font-size: 13px;
             transition: color 0.2s ease;
         }

             .breadcrumb-item a:hover {
                 color: #feaf39;
             }

         .breadcrumb-item.active {
             color: #999;
             font-size: 13px;
         }

         .breadcrumb-item + .breadcrumb-item::before {
             color: #ccc;
             content: "×";
             font-weight: bold;
             margin: 0 8px;
         }

         /* Page Title */
         .products-main-content h1 {
             color: #212121;
             font-weight: 700;
             font-size: 1.8rem;
             margin-bottom: 5px;
         }

             .products-main-content h1 small {
                 color: #666 !important;
                 font-weight: 400;
                 font-size: 0.9rem;
             }

         /* Sale Banner */
         .sale-banner {
             margin-bottom: 30px;
             background: linear-gradient(135deg, #1a1d23 0%, #2c3e50 100%);
             color: white;
             text-align: center;
             position: relative;
             overflow: hidden;
             border-radius: 22px;
             min-height: 420px;
             box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
         }

         .sale-banner::before {
             content: '';
             position: absolute;
             top: -28%;
             right: -8%;
             width: 340px;
             height: 340px;
             background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 72%);
             pointer-events: none;
             z-index: 1;
         }

         .sale-banner-media {
             position: absolute;
             inset: 0;
             z-index: 0;
             overflow: hidden;
         }

         .sale-banner-video {
             width: 100%;
             height: 100%;
             object-fit: cover;
             transform: scale(1.08);
             transform-origin: center center;
             filter: saturate(1.02) contrast(1.04);
         }

         .sale-banner-overlay {
             position: absolute;
             inset: 0;
             background:
                 linear-gradient(180deg, rgba(7, 11, 18, 0.48) 0%, rgba(7, 11, 18, 0.18) 34%, rgba(7, 11, 18, 0.12) 58%, rgba(7, 11, 18, 0.42) 100%),
                 linear-gradient(90deg, rgba(8, 12, 18, 0.52) 0%, rgba(8, 12, 18, 0.18) 38%, rgba(8, 12, 18, 0.08) 60%, rgba(8, 12, 18, 0.46) 100%);
         }

         .sale-banner-content {
             position: relative;
             z-index: 2;
             min-height: 420px;
             padding: 2rem 2rem 2.2rem;
             display: grid;
             grid-template-columns: minmax(0, 1fr);
             grid-template-rows: auto auto 1fr auto auto;
             align-items: stretch;
             gap: 1rem;
         }

         .sale-banner .sale-badge {
             display: inline-flex;
             align-items: center;
             gap: 8px;
             padding: 8px 18px;
             background: rgba(254, 175, 57, 0.2);
             border: 1px solid rgba(254, 175, 57, 0.35);
             border-radius: 50px;
             font-weight: 700;
             color: white;
             margin-bottom: 0;
             justify-self: center;
             align-self: start;
         }

         .sale-banner-copy {
             display: flex;
             width: 100%;
         }

         .sale-banner-copy--top {
             align-items: flex-start;
             justify-content: center;
             padding-top: 0.35rem;
         }

         .sale-banner-copy--bottom {
             align-items: flex-end;
             justify-content: center;
             padding-bottom: 0.15rem;
         }

         .sale-banner h1 {
             font-size: 3rem;
             font-weight: 900;
             margin: 0;
             line-height: 1.1;
             text-shadow: 0 2px 18px rgba(0, 0, 0, 0.34);
         }

         .sale-banner p {
             font-size: 1.1rem;
             opacity: 0.92;
             margin: 0;
             text-align: center;
             text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
         }

         .sale-banner-facts {
             align-self: center;
             justify-self: center;
             display: flex;
             flex-wrap: wrap;
             justify-content: center;
             gap: 10px;
             margin-top: 0;
         }

         .sale-banner-facts span {
             display: inline-flex;
             align-items: center;
             justify-content: center;
             min-height: 38px;
             padding: 0 14px;
             border-radius: 999px;
             background: rgba(255, 255, 255, 0.08);
             border: 1px solid rgba(255, 255, 255, 0.1);
             font-size: 0.9rem;
             font-weight: 600;
             color: rgba(255, 255, 255, 0.92);
         }

         @media (max-width: 768px) {
             .sale-banner {
                 min-height: 360px;
             }

             .sale-banner h1 {
                 font-size: 2.2rem;
             }

             .sale-banner-content {
                 min-height: 360px;
                 padding: 1.5rem 1rem 1.6rem;
                 gap: 0.85rem;
             }

             .sale-banner-copy--top {
                 padding-top: 0.15rem;
             }

             .sale-banner-copy--bottom {
                 padding-bottom: 0;
             }
         }

         /* View Toggle & Sort - Moderne Buttons */
         .view-toggle .btn {
             padding: 10px 14px;
             border: 1px solid #d0d0d0;
             color: #666;
             background: #ffffff;
             transition: all 0.3s ease;
         }

             .view-toggle .btn:first-child {
                 border-radius: 8px 0 0 8px;
             }

             .view-toggle .btn:last-child {
                 border-radius: 0 8px 8px 0;
             }

             .view-toggle .btn:hover {
                 border-color: #feaf39;
                 color: #feaf39;
                 background: rgba(254, 175, 57, 0.05);
             }

             .view-toggle .btn.active {
                 background: #feaf39;
                 border-color: #feaf39;
                 color: #ffffff;
                 box-shadow: 0 2px 8px rgba(254, 175, 57, 0.3);
             }

         .sort-select {
             background: #ffffff;
             border: 1px solid #d0d0d0;
             color: #212121;
             border-radius: 8px;
             padding: 10px 40px 10px 14px;
             font-size: 13px;
             min-width: 160px;
             font-weight: 500;
             transition: all 0.3s ease;
             background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
             background-repeat: no-repeat;
             background-position: right 12px center;
             background-size: 12px;
             cursor: pointer;
         }

             .sort-select:focus {
                 border-color: #feaf39;
                 box-shadow: 0 0 0 3px rgba(254, 175, 57, 0.1);
                 outline: none;
             }

             .sort-select option {
                 background: #ffffff;
                 color: #212121;
             }

         /* Product Grid - Moderne Cards wie Details.cshtml */
         .product-grid {
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
             gap: 25px;
             margin-bottom: 40px;
         }

         /* Legacy card styles removed – product-card.css (layout-global) is the
            single source of truth for .product-card, .product-image, .product-title
            and related card-level rules. */

         /* Pagination */
         .pagination-info {
             font-size: 14px;
         }
         
         .pagination {
             gap: 5px;
         }
         
         .pagination .page-item .page-link {
             background: #ffffff;
             border: 1px solid #d0d0d0;
             color: #666;
             border-radius: 8px;
             padding: 10px 16px;
             font-weight: 600;
             font-size: 14px;
             transition: all 0.2s ease;
             text-decoration: none;
             min-width: 44px;
             min-height: 44px;
             display: flex;
             align-items: center;
             justify-content: center;
             text-align: center;
         }
         
         .pagination .page-item .page-link:hover {
             background: #feaf39;
             border-color: #feaf39;
             color: #ffffff;
             transform: translateY(-2px);
             box-shadow: 0 4px 12px rgba(254, 175, 57, 0.3);
         }
         
         .pagination .page-item.active .page-link {
             background: #feaf39;
             border-color: #feaf39;
             color: #ffffff;
             box-shadow: 0 2px 8px rgba(254, 175, 57, 0.3);
         }
         
         .pagination .page-item.disabled .page-link {
             background: #f5f5f5;
             border-color: #e0e0e0;
             color: #bbb;
             cursor: not-allowed;
             transform: none;
             box-shadow: none;
         }
         
         .pagination .page-item.disabled .page-link:hover {
             background: #f5f5f5;
             transform: none;
             box-shadow: none;
         }

         /* Responsive */
         @media (max-width: 1200px) {
             .filter-bar-row {
                 flex-wrap: wrap;
             }

             .filter-bar-group {
                 flex: 1 1 220px;
                 min-width: 200px;
             }

             .filter-bar-actions {
                 width: 100%;
                 margin-left: 0;
             }
         }

         @media (max-width: 991px) {
             .filter-bar {
                 top: var(--products-header-offset);
             }

             .filter-bar-row {
                 gap: 10px;
             }

             .filter-bar-group label {
                 display: flex;
             }

             .products-main-content {
                 padding: 25px;
             }

             .products-header {
                 flex-direction: column;
             }

             .product-grid {
                 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
                 gap: 20px;
             }
         }

         @media (max-width: 767px) {
             .filter-bar {
                 position: relative;
                 top: 0;
             }

             .filter-bar-row {
                 flex-direction: column;
                 align-items: stretch;
                 gap: 10px;
             }

             .filter-bar-group {
                 width: 100%;
                 min-width: 0;
             }

             .filter-bar-group label {
                 min-width: 0;
             }

             .filter-bar .form-select,
             .filter-bar .form-control {
                 flex: 1;
             }

             .filter-bar .price-inputs {
                 width: 100%;
             }

             .filter-bar .price-inputs .form-control {
                 flex: 1;
                 min-width: 0;
             }

             .filter-bar .filter-checkbox {
                 justify-content: center;
                 width: 100%;
                 align-self: stretch;
             }

             .filter-bar-actions,
             .filter-bar .btn-filter,
             .filter-bar .btn-reset {
                 width: 100%;
                 justify-content: center;
             }

             .products-main-content {
                 padding: 20px 15px;
             }

             .product-grid {
                 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
                 gap: 15px;
             }
         }

         @media (max-width: 576px) {
             .product-grid {
                 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
             }

             .sale-banner {
                 flex-direction: column;
                 text-align: center;
                 gap: 20px;
             }

             /* View Toggle und Sort auf Mobile kompakter */
             .view-toggle .btn {
                 padding: 10px 12px;
                 min-height: 44px;
             }

             .sort-select {
                 min-width: 120px;
                 font-size: 12px;
                 min-height: 44px;
             }

             .pagination {
                 flex-wrap: wrap;
                 justify-content: center;
             }

             .pagination-info {
                 font-size: 13px;
                 text-align: center;
             }
         }

/* ========== EIGENSCHAFTEN-FILTER ========== */
.filter-bar-group--properties {
    flex: 0 1 auto;
    min-width: 180px;
}

/* Dropdown-Wrapper */
.filter-props-dropdown {
    position: relative;
}

/* Trigger-Button – gleicher Look wie form-select */
.filter-props-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    background: #ffffff;
    border: 1px solid #d3dae4;
    border-radius: 12px;
    color: #111827;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
    text-align: left;
}

.filter-props-trigger:hover {
    border-color: #feaf39;
}

.filter-props-trigger--active {
    border-color: #feaf39;
    background: #fffaf2;
    color: #9a6700;
    font-weight: 600;
}

.filter-props-chevron {
    font-size: 11px;
    color: #9ca3af;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.filter-props-dropdown.is-open .filter-props-chevron {
    transform: rotate(180deg);
}

.filter-props-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #feaf39;
    color: #1a1d23;
    font-size: 11px;
    font-weight: 800;
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
}

/* Panel – dunkler Stil wie Navbar-Dropdown */
.filter-props-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    max-width: 300px;
    max-height: 320px;
    overflow-y: auto;
    background: linear-gradient(180deg, #1a1d23 0%, #111318 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
    z-index: 999;
    padding: 8px;
    color: #f5f1e8;
}

.filter-props-dropdown.is-open .filter-props-panel {
    display: block;
}

/* Einzelne Einträge */
.filter-props-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.15s ease;
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    user-select: none;
}

.filter-props-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.filter-props-item--checked {
    background: rgba(254, 175, 57, 0.1);
    color: #feaf39;
    font-weight: 600;
}

/* Versteckte native Checkbox */
.filter-props-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Custom Checkbox */
.filter-props-checkbox {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    transition: all 0.15s ease;
    position: relative;
}

.filter-props-item--checked .filter-props-checkbox {
    background: #feaf39;
    border-color: #feaf39;
}

.filter-props-item--checked .filter-props-checkbox::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: 2px solid #1a1d23;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

@media (max-width: 768px) {
    .filter-bar-group--properties {
        flex: 1 1 100%;
        min-width: 0;
    }

    .filter-props-panel {
        min-width: 100%;
        max-width: 100%;
    }
}

/* ========== OMNIBUS-RICHTLINIE PREISHINWEIS ========== */
.omnibus-price-hint {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
    line-height: 1.3;
}

/* ========== EIGENSCHAFTEN-BADGES DETAILSEITE ========== */
.product-properties-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 4px;
}