.catalogue-hero {padding:170px clamp(20px, 6vw, 100px) 92px;background:radial-gradient(circle at 74% 58%, rgba(227, 6, 19, 0.28), transparent 28%), linear-gradient(118deg, #0b2246 0%, #123568 100%);color:var(--white);text-align:left;position:relative;overflow:hidden;} .catalogue-hero:after {content:"PRODUCTS";position:absolute;right:-24px;bottom:-32px;font-family:var(--font-head);font-size:clamp(5rem, 15vw, 15rem);font-weight:900;line-height:0.8;letter-spacing:-10px;color:rgba(255, 255, 255, 0.035);} .catalogue-hero h1 {font-family:var(--font-head);font-weight:900;font-size:clamp(3rem, 7vw, 6.6rem);text-transform:uppercase;letter-spacing:-2px;} .catalogue-hero p {color:#a8b4c5;max-width:620px;margin:18px 0 0;font-size:1rem;} .filter-section {background:rgba(255, 255, 255, 0.92);backdrop-filter:blur(14px);padding:30px clamp(20px, 6vw, 100px);border-bottom:1px solid var(--line);position:sticky;top:72px;z-index:100;box-shadow:0 18px 45px rgba(7, 16, 31, 0.08);} .filter-wrapper {max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;} .search-box {position:relative;flex:1;min-width:260px;} .search-box input {width:100%;height:48px;padding:0 15px 0 45px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);font-size:14px;transition:var(--transition);} .search-box input:focus {border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-glow);} .search-box:before {content:"🔍";position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:16px;color:var(--muted);} .filter-controls {display:flex;flex-wrap:wrap;gap:15px;align-items:center;} .select-wrapper {position:relative;} .select-wrapper select {height:48px;padding:0 40px 0 15px;border:1px solid var(--line);background:var(--white);border-radius:var(--radius);font-size:13px;font-family:var(--font-head);font-weight:700;text-transform:uppercase;cursor:pointer;appearance:none;transition:var(--transition);} .select-wrapper select:focus, .select-wrapper select:hover {border-color:var(--blue);} .select-wrapper:after {content:"▼";font-size:8px;position:absolute;right:15px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted);} .price-filter {display:flex;align-items:center;gap:15px;font-family:var(--font-head);font-weight:700;font-size:12px;text-transform:uppercase;color:var(--blue);} .price-slider-container {display:flex;flex-direction:column;gap:5px;min-width:180px;} .price-slider-container input[type="range"] {width:100%;height:4px;background:var(--line);outline:none;appearance:none;border-radius:2px;} .price-slider-container input[type="range"]::-webkit-slider-thumb {appearance:none;width:16px;height:16px;border-radius:50%;background:var(--red);cursor:pointer;transition:var(--transition);} .price-slider-container input[type="range"]::-webkit-slider-thumb:hover {transform:scale(1.2);} .price-values {display:flex;justify-content:space-between;color:var(--muted);font-size:10px;} .catalogue-container {max-width:1200px;margin:60px auto;padding:0 20px;} .catalogue-grid {display:grid;grid-template-columns:repeat(3, 1fr);gap:30px;} .no-results {grid-column:1 / -1;text-align:center;padding:80px 20px;background:var(--paper);border-radius:var(--radius-lg);border:1px dashed var(--line);} .no-results h3 {font-family:var(--font-head);font-size:1.5rem;color:var(--navy);margin-bottom:10px;} .no-results p {color:var(--muted);} .catalogue-grid .product-card {background:var(--white);border:1px solid var(--line);color:var(--ink);border-radius:16px;overflow:hidden;box-shadow:0 4px 20px rgba(7, 16, 31, 0.04);display:flex;flex-direction:column;transition:transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;} .catalogue-grid .product-card:hover {border-color:rgba(227, 6, 19, 0.3);transform:translateY(-8px);box-shadow:0 20px 40px rgba(7, 16, 31, 0.1);} .catalogue-grid .product-top {display:flex;justify-content:space-between;align-items:center;padding:20px 24px 0;} .catalogue-grid .product-top .tag {background:rgba(15, 68, 146, 0.1);color:var(--blue);padding:4px 12px;border-radius:20px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:0.5px;} .catalogue-grid .product-top .cc-badge {font-family:var(--font-head);font-weight:700;color:var(--muted);font-size:12px;} .catalogue-grid .product-image-container {padding:20px 24px;display:flex;justify-content:center;align-items:center;height:200px;} .catalogue-grid .product-image-container img {max-height:100%;max-width:100%;object-fit:contain;transition:transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);} .catalogue-grid .product-card:hover .product-image-container img {transform:scale(1.08);} .catalogue-grid .product-body {padding:0 24px 24px;display:flex;flex-direction:column;flex:1;} .catalogue-grid .product-body h3 {color:var(--navy);font-size:1.5rem;margin:0 0 4px;line-height:1.2;} .catalogue-grid .model-color-label {font-size:12px;color:var(--muted);margin:0;} .catalogue-grid .model-color-label span {font-weight:600;color:var(--ink);} .catalogue-grid .specs {display:grid;grid-template-columns:repeat(3, 1fr);gap:15px;margin:20px 0;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .catalogue-grid .spec-item {display:flex;flex-direction:column;gap:4px;} .catalogue-grid .spec-label {font-size:9px;text-transform:uppercase;color:var(--muted);letter-spacing:0.5px;} .catalogue-grid .spec-value {font-size:12px;font-weight:800;color:var(--navy);} .color-swatches {display:flex;gap:8px;margin:15px 0;justify-content:flex-start;align-items:center;} .swatch {width:18px;height:18px;border-radius:50%;border:1px solid rgba(0, 0, 0, 0.15);cursor:pointer;transition:var(--transition);position:relative;box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.1);} .swatch:hover, .swatch.active {transform:scale(1.25);box-shadow:0 0 0 2px var(--white), 0 0 0 4px var(--red);} .swatch.has-note:after {content:"*";color:var(--muted);font-size:10px;position:absolute;top:-6px;right:-6px;} .product-price {font-family:var(--font-head);font-weight:800;font-size:1.4rem;color:var(--red);margin-bottom:10px;} .card-actions {display:flex;justify-content:space-between;align-items:center;margin-top:auto;border-top:1px solid var(--line);padding-top:18px;gap:15px;} .detail-btn {background:var(--blue);color:var(--white);padding:10px 18px;font-family:var(--font-head);font-weight:700;font-size:11px;text-transform:uppercase;border:0;border-radius:var(--radius);cursor:pointer;transition:var(--transition);display:inline-flex;align-items:center;gap:5px;} .detail-btn:hover {background:var(--red);transform:translateY(-2px);} .download-btn {background:var(--red);color:var(--white);padding:10px 18px;font-family:var(--font-head);font-weight:700;font-size:11px;text-transform:uppercase;border:0;border-radius:var(--radius);cursor:pointer;transition:var(--transition);display:inline-flex;align-items:center;gap:5px;box-shadow:0 4px 10px rgba(227, 6, 19, 0.2);} .download-btn:hover {background:#c8000a;transform:translateY(-2px);box-shadow:0 6px 15px rgba(227, 6, 19, 0.35);} .compare-checkbox-label {display:flex;align-items:center;gap:8px;font-size:12px;font-family:var(--font-head);font-weight:700;text-transform:uppercase;cursor:pointer;user-select:none;color:var(--muted);} .compare-checkbox-label input {display:none;} .compare-checkbox-custom {width:18px;height:18px;border:2px solid var(--line);border-radius:var(--radius);display:inline-block;position:relative;transition:var(--transition);} .compare-checkbox-label input:checked + .compare-checkbox-custom {background:var(--red);border-color:var(--red);} .compare-checkbox-label input:checked + .compare-checkbox-custom:after {content:"✓";color:var(--white);font-size:11px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-weight:bold;} .compare-checkbox-label:hover .compare-checkbox-custom {border-color:var(--red);} .compare-checkbox-label input:checked ~ span {color:var(--red);} @media (max-width:1024px) {.catalogue-grid {grid-template-columns:repeat(2, 1fr);}} @media (max-width:768px) {.filter-section {position:static;padding:20px;} .filter-wrapper {flex-direction:column;align-items:stretch;} .filter-controls {flex-direction:column;align-items:stretch;} .select-wrapper select {width:100%;} .price-filter {flex-direction:column;align-items:stretch;margin-top:10px;} .catalogue-grid {grid-template-columns:1fr;gap:20px;}}