.compare-hero{position:relative;background-image:linear-gradient(rgba(11,94,116,.95),rgba(10,75,62,.9)),url(https://www.transparenttextures.com/patterns/woven.png);padding:6rem 1rem;text-align:center;color:#fff;margin-bottom:4rem;overflow:hidden}.hero-content{position:relative;z-index:2;max-width:800px;margin:0 auto}.hero-badge{display:inline-block;background:rgba(255,255,255,.15);padding:6px 16px;border-radius:30px;font-size:.75rem;letter-spacing:2px;font-weight:700;text-transform:uppercase;margin-bottom:1.5rem;border:1px solid rgba(255,255,255,.2);color:#e0f7fa}.compare-hero h1{color:#fff!important;font-size:3.5rem;margin-bottom:1rem;font-family:var(--font-heading);letter-spacing:-1px}.compare-hero p{color:rgba(255,255,255,.85);font-size:1.2rem;line-height:1.6;max-width:600px;margin:0 auto}.hero-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at top right,rgba(255,255,255,.1),transparent 40%);z-index:1;pointer-events:none}.btn-outline-light{border:2px solid rgba(255,255,255,.6);color:#fff;background:0 0;padding:.8rem 2rem;border-radius:50px;transition:all .3s ease}.btn-outline-light:hover{background:#fff;color:var(--primary);border-color:#fff;transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,.2)}.compare-matrix{display:grid;grid-template-columns:200px repeat(3,1fr);border:1px solid #eee;border-radius:12px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.05);background:#fff;min-height:500px}.matrix-header{position:sticky;top:0;background:#fff;z-index:10;border-bottom:2px solid var(--primary);padding:1.5rem;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:280px;transition:background .3s}.matrix-header.label-col{align-items:flex-start;justify-content:center;text-align:left;background:#f8f9fa;border-right:1px solid #eee;font-weight:700;color:var(--primary);font-size:1.2rem;z-index:11;padding-left:2rem}.prod-img{width:140px;height:140px;object-fit:cover;border-radius:8px;margin-bottom:1rem;box-shadow:0 4px 15px rgba(0,0,0,.1)}.prod-title{font-weight:700;color:var(--text);font-size:1.1rem;line-height:1.3;margin-bottom:.5rem}.prod-price{font-size:1.2rem;color:var(--accent);font-weight:700}.remove-btn{position:absolute;top:10px;right:10px;background:#fff;border:1px solid #fee2e2;color:#ef4444;width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}.remove-btn:hover{background:#ef4444;color:#fff;border-color:#ef4444}.matrix-header.empty-slot{background-color:#fafafa;border-bottom:2px dashed #ddd;justify-content:center;padding:1rem}.add-slot-card{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s;color:#888;border-radius:8px}.add-slot-card:hover{transform:translateY(-5px);color:var(--primary)}.add-icon-circle{width:60px;height:60px;background:#fff;border:1px solid #ddd;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;box-shadow:0 4px 10px rgba(0,0,0,.05);transition:.3s;color:var(--primary)}.add-slot-card:hover .add-icon-circle{background:var(--primary);color:#fff;box-shadow:0 8px 20px rgba(11,94,116,.3)}.add-text{font-weight:600;text-transform:uppercase;letter-spacing:1px;font-size:.9rem}.matrix-row{display:contents}.matrix-cell{padding:1.5rem;border-bottom:1px solid #eee;border-right:1px solid #f9f9f9;display:flex;align-items:center;justify-content:center;text-align:center;color:#555;font-size:.95rem}.matrix-cell.label{justify-content:flex-start;text-align:left;font-weight:600;color:var(--text);background:#f8f9fa;border-right:1px solid #eee;padding-left:2rem}.matrix-row:nth-child(even) .matrix-cell:not(.label){background-color:#fcfcfc}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:2000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(3px)}.modal-overlay.open{display:flex}.search-modal-content{background:#fff;width:90%;max-width:500px;border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.2);overflow:visible;display:flex;flex-direction:column;max-height:80vh}.vastra-select-wrapper{z-index:100}.vs-options{z-index:105;max-height:200px;overflow-y:auto}.modal-header{padding:1.5rem;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center;background:#f8f9fa}.modal-header h3{margin:0;font-size:1.2rem;color:var(--primary)}.close-modal{cursor:pointer;color:#999;transition:.2s}.close-modal:hover{color:var(--danger)}.modal-body{padding:1.5rem;overflow-y:auto}.modal-divider{display:flex;align-items:center;text-align:center;margin:1.5rem 0;color:#999;font-size:.85rem;font-weight:600}.modal-divider::after,.modal-divider::before{content:"";flex:1;border-bottom:1px solid #eee}.modal-divider::before{margin-right:10px}.modal-divider::after{margin-left:10px}.search-bar-container{position:relative;border:1px solid #ddd;border-radius:8px;background:#fff;display:flex;align-items:center;padding:5px 15px;transition:border-color .2s}.search-bar-container:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(11,94,116,.1)}.modal-search-input{border:none;outline:0;width:100%;padding:10px;font-size:1rem;color:var(--text)}.search-icon-modal{color:#999;width:20px;height:20px}.search-results-list{border:1px solid #f0f0f0;border-radius:8px;background:#fafafa}.search-result-item{display:flex;align-items:center;gap:15px;padding:12px;border-bottom:1px solid #eee;cursor:pointer;transition:background .2s;background:#fff}.search-result-item:last-child{border-bottom:none}.search-result-item:hover{background:#f0f9ff}.result-img{width:40px;height:40px;object-fit:cover;border-radius:4px;background:#eee}.empty-state{padding:2rem;text-align:center;color:#999;font-size:.9rem}.vastra-select-wrapper{position:relative;user-select:none;width:100%}.vastra-select-wrapper select{display:none}.vs-trigger{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;background:#fff;border:1px solid #ddd;border-radius:8px;cursor:pointer;font-size:.95rem}.vs-options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ddd;border-top:none;z-index:50;max-height:200px;overflow-y:auto;display:none;border-radius:0 0 8px 8px;box-shadow:0 4px 10px rgba(0,0,0,.1)}.vastra-select-wrapper.open .vs-options{display:block}.vs-option{padding:10px 15px;cursor:pointer;transition:.2s}.vs-option:hover{background:#f0f9ff;color:var(--primary)}@media (max-width:992px){.compare-hero h1{font-size:3rem}.prod-title{font-size:1rem}}@media (max-width:768px){.compare-hero{padding:4rem 1rem;margin-bottom:2rem}.compare-hero h1{font-size:2.2rem}.compare-matrix{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:15px;padding-bottom:20px;background:0 0;border:none;box-shadow:none;grid-template-columns:none;min-height:auto}.matrix-cell.label,.matrix-header.label-col{display:none!important}.compare-matrix{display:grid;grid-template-columns:100px repeat(3,260px);overflow-x:auto;width:100%;background:#fff;border-radius:8px;align-items:start}.matrix-header.label-col{display:flex!important;position:sticky;left:0;z-index:20;min-width:100px;background:#f8f9fa;border-right:1px solid #ddd;box-shadow:2px 0 5px rgba(0,0,0,.05);font-size:.8rem;justify-content:center;padding-left:.5rem}.matrix-cell.label{display:flex!important;position:sticky;left:0;z-index:15;min-width:100px;background:#f8f9fa;border-right:1px solid #ddd;box-shadow:2px 0 5px rgba(0,0,0,.05);font-size:.8rem;padding-left:.5rem}.matrix-header{min-width:260px}.matrix-cell{min-width:260px}.search-modal-content{width:95%;max-height:85vh;border-radius:12px}.modal-search-input{font-size:16px}}