/* ===== REPLACEMENT SPARES PAGE STYLES ===== */

/* Commitment Grid */
.rs-commitment-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
     padding: 2rem 0;
     justify-content: center;
}

.rs-commitment-item {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     font-weight: 600;
     color: var(--color-navy);
     font-size: 0.95rem;
     background: var(--color-white);
     border: 1px solid var(--color-gray-200, #e0e0e0);
     border-radius: 8px;
     padding: 0.75rem 1.25rem;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.rs-commitment-item i {
     color: #28a745;
     font-size: 1.1rem;
     flex-shrink: 0;
}

/* Brand Section */
.rs-brand-section {
     padding: 2.5rem 0;
     border-bottom: 1px solid var(--color-gray-200, #eee);
}

.rs-alt {
     background: #f8f9fb;
}

.rs-brand-card {
     background: var(--color-white);
     border-radius: 16px;
     padding: 2rem 2.5rem;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.07);
     border: 1px solid var(--color-gray-200, #e5e5e5);
     transition: box-shadow 0.3s ease;
}

.rs-alt .rs-brand-card {
     background: var(--color-white);
}

.rs-brand-card:hover {
     box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

/* Brand Header */
.rs-brand-header {
     display: flex;
     gap: 1.25rem;
     align-items: center;
}

.rs-brand-badge {
     width: 52px;
     height: 52px;
     border-radius: 12px;
     background: var(--color-navy);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
}

.rs-brand-badge i {
     font-size: 1.3rem;
     color: var(--color-secondary, #f90);
}

.rs-brand-title {
     font-size: 1.4rem;
     font-weight: 700;
     color: var(--color-navy);
     margin: 0;
     line-height: 1.3;
}

/* Why Grid */
.rs-why-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 1.5rem;
     margin-top: 3rem;
}

.rs-why-card {
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.15);
     padding: 2rem;
     border-radius: 12px;
     backdrop-filter: blur(10px);
     transition: transform 0.3s ease;
}

.rs-why-card:hover {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.15);
}

.rs-why-card i {
     font-size: 2.25rem;
     color: var(--color-secondary, #f90);
     margin-bottom: 1.25rem;
     display: block;
}

.rs-why-card h3 {
     font-size: 1.1rem;
     font-weight: 600;
     color: var(--color-white);
     margin-bottom: 0.75rem;
}

.rs-why-card p {
     font-size: 0.9rem;
     color: rgba(255, 255, 255, 0.78);
     line-height: 1.65;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
     .rs-brand-title {
          font-size: 1.15rem;
     }

     .rs-brand-header {
          gap: 1rem;
     }

     .rs-commitment-grid {
          flex-direction: column;
     }

     .rs-brand-card {
          padding: 1.5rem;
     }
}

@media (max-width: 480px) {
     .rs-why-grid {
          grid-template-columns: 1fr;
     }
}