/* ============================================================
   COLOR CHANGE WRAPS — page-specific styles
   Consumer/enthusiast tone. Visual-first. Editorial spacing.
   ============================================================ */

/* ---- Finish Explorer cards ---- */
.finish-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.finish-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: white;
  transition: all 350ms cubic-bezier(.2,.7,.2,1);
  cursor: default;
}
.finish-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -12px rgba(15,23,42,.2);
  border-color: var(--blue);
}
.finish-swatch {
  height: 180px;
  position: relative;
  overflow: hidden;
}
/* Simulated finish textures via CSS */
.finish-swatch.matte {
  background: linear-gradient(145deg, #1a1a1a 0%, #2a2a2a 50%, #1e1e1e 100%);
}
.finish-swatch.satin {
  background: linear-gradient(145deg, #1a1a1a 0%, #3a3a3a 40%, #252525 70%, #2e2e2e 100%);
}
.finish-swatch.satin::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%);
}
.finish-swatch.gloss {
  background: linear-gradient(135deg, #0a0a0a 0%, #333 35%, #111 60%, #444 90%);
}
.finish-swatch.gloss::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 20%, rgba(255,255,255,.15) 45%, transparent 55%);
}
.finish-swatch.metallic {
  background: linear-gradient(135deg, #2a3040 0%, #4a5568 40%, #2d3748 70%, #4a5568 100%);
}
.finish-swatch.metallic::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.2), transparent),
    radial-gradient(1px 1px at 60% 50%, rgba(255,255,255,.15), transparent),
    radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,.2), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,.1), transparent),
    linear-gradient(135deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%);
}
.finish-swatch.chrome {
  background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 25%, #a0a0a0 50%, #e8e8e8 75%, #c0c0c0 100%);
}
.finish-swatch.carbon {
  background:
    repeating-linear-gradient(45deg, #1a1a1a, #1a1a1a 2px, #222 2px, #222 4px),
    repeating-linear-gradient(-45deg, #1a1a1a, #1a1a1a 2px, #252525 2px, #252525 4px);
  background-size: 8px 8px;
}
.finish-swatch .finish-tag {
  position: absolute;
  bottom: 0.75rem; left: 0.75rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: white;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.finish-swatch.chrome .finish-tag { color: #1a1a1a; text-shadow: none; }

.finish-body {
  padding: 1.5rem;
}
.finish-vibe {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--blue);
  margin-bottom: 0.65rem;
}
.finish-body > p {
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 1rem;
}
.finish-meta {
  display: grid;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-soft);
}
.finish-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.82rem;
}
.finish-meta-row .k {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.finish-meta-row .v { color: var(--text); font-weight: 500; }
.finish-colors {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.1rem;
}
.finish-colors .dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.1);
}
@media (max-width: 960px) { .finish-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .finish-grid { grid-template-columns: 1fr; } }

/* ---- Color swatches section ---- */
.color-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.color-card {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: white;
  transition: all var(--ease);
  cursor: default;
}
.color-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(15,23,42,.15);
}
.color-swatch {
  height: 100px;
  position: relative;
}
.color-swatch .rank {
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(0,0,0,.5);
  color: white;
  padding: 0.2rem 0.45rem;
  border-radius: 3px;
}
.color-info {
  padding: 0.85rem 1rem;
}
.color-info h3 { font-size: 0.92rem; margin-bottom: 0.2rem; }
.color-info p { font-size: 0.75rem; color: var(--text-muted); }
@media (max-width: 860px) { .color-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Comparison table ---- */
.compare-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  background: white;
}
.compare-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}
.compare-table thead th {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1rem 1.25rem;
  text-align: left;
  border-bottom: 2px solid var(--border);
  background: var(--bg-alt);
}
.compare-table thead th:first-child { color: var(--text-muted); }
.compare-table thead th:nth-child(2) { color: var(--blue); }
.compare-table thead th:nth-child(3) { color: var(--text-muted); }
.compare-table td {
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.92rem;
  color: var(--text-2);
  vertical-align: top;
}
.compare-table td:first-child {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  color: var(--navy);
  width: 160px;
}
.compare-table td:nth-child(2) { color: var(--text); }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table .win { color: var(--blue); font-weight: 600; }

/* ---- Price matrix ---- */
.price-matrix-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  background: white;
}
.price-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.price-matrix thead th {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 2px solid var(--border);
  background: var(--bg-alt);
  color: var(--text-muted);
  white-space: nowrap;
}
.price-matrix td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-2);
  white-space: nowrap;
}
.price-matrix td:first-child {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  color: var(--navy);
}
.price-matrix tr:last-child td { border-bottom: none; }
.price-matrix .amt {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  color: var(--blue);
}

/* ---- Vehicles brands grid ---- */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.85rem;
}
.brand-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  transition: all var(--ease);
}
.brand-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.brand-card h3 { font-size: 0.95rem; margin-bottom: 0.3rem; }
.brand-card p { font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; }
@media (max-width: 960px) { .brand-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .brand-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Care guide ---- */
.care-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.care-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}
.care-card h3 { margin-bottom: 0.85rem; font-size: 1.05rem; }
.care-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
}
.care-list li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.5;
}
.care-list li::before {
  content: '→';
  color: var(--blue);
  font-weight: 600;
  flex-shrink: 0;
}
@media (max-width: 860px) { .care-grid { grid-template-columns: 1fr; } }