.compare-hero {padding:140px clamp(20px, 6vw, 100px) 40px;background:radial-gradient(circle at 50% 100%, var(--navy-light) 0%, var(--navy) 70%);color:var(--white);text-align:center;} .compare-hero h1 {font-family:var(--font-head);font-weight:900;font-size:clamp(2rem, 4vw, 3.2rem);text-transform:uppercase;letter-spacing:-2px;} .compare-hero p {color:var(--muted);max-width:600px;margin:15px auto 0;font-size:1rem;} .compare-section {max-width:1200px;margin:50px auto 100px;padding:0 20px;} .compare-grid {display:grid;grid-template-columns:250px repeat(3, 1fr);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--white);box-shadow:0 10px 30px rgba(0, 0, 0, 0.05);} .compare-row {display:contents;} .compare-cell {padding:20px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;font-size:14px;} .compare-cell:nth-child(4n) {border-right:0;} .compare-row:last-child .compare-cell {border-bottom:0;} .compare-header-cell {background:var(--paper);font-family:var(--font-head);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--navy);justify-content:center;} .compare-bike-header {text-align:center;align-items:center;justify-content:flex-start;min-height:340px;position:relative;background:var(--white);padding-top:40px;} .compare-bike-header img {height:140px;object-fit:contain;margin-bottom:15px;transition:var(--transition);} .compare-bike-header img:hover {transform:scale(1.05);} .compare-bike-title {font-family:var(--font-head);font-weight:850;font-size:1.15rem;text-transform:uppercase;color:var(--navy);margin-bottom:8px;} .compare-bike-price {font-family:var(--font-head);font-weight:800;font-size:1.25rem;color:var(--red);margin-bottom:15px;} .compare-remove-btn {position:absolute;top:15px;right:15px;background:rgba(227, 6, 19, 0.1);color:var(--red);border:0;width:28px;height:28px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:bold;transition:var(--transition);} .compare-remove-btn:hover {background:var(--red);color:var(--white);transform:scale(1.1);} .compare-empty-slot {border:2px dashed var(--line);background:var(--paper);margin:15px;border-radius:var(--radius);height:calc(100% - 30px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 15px;} .compare-empty-slot p {color:var(--muted);font-size:12px;margin-bottom:15px;} .compare-add-select {width:100%;height:42px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);font-family:var(--font-head);font-size:11px;font-weight:700;text-transform:uppercase;cursor:pointer;background:var(--white);} .compare-val {text-align:center;align-items:center;font-weight:600;color:var(--navy-light);} .compare-val b {font-family:var(--font-head);font-weight:800;font-size:15px;} .compare-action-cell {align-items:center;padding:25px 15px;} .compare-wa-btn {background:#25d366;color:var(--white);font-family:var(--font-head);font-weight:800;font-size:10px;text-transform:uppercase;padding:12px 18px;border-radius:var(--radius);border:0;cursor:pointer;transition:var(--transition);display:inline-flex;align-items:center;gap:8px;letter-spacing:0.5px;box-shadow:0 4px 10px rgba(37, 211, 102, 0.2);} .compare-wa-btn:hover {background:#20ba59;transform:translateY(-2px);box-shadow:0 6px 15px rgba(37, 211, 102, 0.35);} @media (max-width:900px) {.compare-section {padding:0;overflow-x:auto;} .compare-grid {grid-template-columns:180px repeat(3, 240px);width:max-content;} .compare-cell {padding:15px 10px;}} .color-swatches {display:flex;gap:8px;margin:15px 0;justify-content:center;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;} .compare-selected-color {font-family:var(--font-head);font-weight:700 !important;color:var(--navy) !important;}