.config-header {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) auto auto;
  gap: 24px;
  align-items: center;
  padding: 15px max(28px, calc((100vw - 1380px) / 2));
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.config-header nav { display: flex; gap: 20px; align-items: center; color: var(--navy); font-size: 0.9rem; font-weight: 850; }

.config-header nav button { min-height: 38px; border: 1px solid var(--teal); padding: 0 12px; color: var(--teal); background: #fff; font-weight: 850; cursor: pointer; }

.config-rfq-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; color: #fff; background: var(--navy); font-weight: 900; white-space: nowrap; }

.config-rfq-link b { display: inline-grid; place-items: center; min-width: 21px; height: 21px; color: var(--navy); background: #f5c967; font-size: 0.78rem; }

.configure-page { background: #f6fafb; }

.config-breadcrumb { display: flex; gap: 10px; max-width: 1380px; margin: 0 auto; padding: 22px max(28px, calc((100vw - 1380px) / 2)) 0; color: var(--muted); font-size: 0.88rem; font-weight: 750; }

.config-breadcrumb a { color: var(--teal); }

.config-hero { display: grid; grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 82px); align-items: center; max-width: 1380px; margin: 0 auto; padding: clamp(32px, 5vw, 70px) max(28px, calc((100vw - 1380px) / 2)); }

.config-media { border-top: 4px solid var(--teal); background: #fff; box-shadow: var(--shadow); }

.config-media img { width: 100%; aspect-ratio: 1.45; object-fit: cover; background: #eff6f7; }

.config-brand { display: inline-block; margin: 10px 0 0; padding: 4px 8px; color: #0a655f; background: #e3f6f4; font-size: 0.74rem; font-weight: 900; letter-spacing: 0.06em; }

.config-copy h1 { margin: 12px 0 0; font-size: clamp(2.25rem, 5vw, 4.65rem); line-height: 0.98; letter-spacing: 0; }

.config-intro { max-width: 680px; margin: 20px 0 0; color: var(--muted); font-size: 1.06rem; }

.config-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 28px 0 0; }

.config-details div { padding: 12px; border-left: 3px solid var(--blue); background: #fff; }

.config-details dt { color: var(--teal); font-size: 0.76rem; font-weight: 900; }

.config-details dd { margin: 3px 0 0; color: var(--navy); font-size: 0.89rem; font-weight: 750; }

.config-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, 380px); gap: 22px; max-width: 1380px; margin: 0 auto; padding: 0 max(28px, calc((100vw - 1380px) / 2)) 72px; }

.config-form, .config-summary { padding: 30px; background: #fff; border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(12, 45, 55, 0.05); }

.config-heading h2, .config-summary h2, .compatibility-note h2 { margin: 8px 0 0; font-size: clamp(1.65rem, 3vw, 2.5rem); line-height: 1.04; }

.config-heading > p:last-child { margin: 13px 0 0; color: var(--muted); }

.config-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }

.config-field { display: grid; gap: 8px; color: var(--navy); font-weight: 850; }

.config-field select, .config-field input, .config-field textarea { width: 100%; border: 1px solid #b9cbd0; padding: 12px; color: var(--ink); background: #fff; outline: 0; }

.config-field select:focus, .config-field input:focus, .config-field textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(8, 123, 120, 0.13); }

.quantity-field { width: min(230px, 100%); margin-top: 16px; }

.wide-field { margin-top: 16px; }

.config-summary { align-self: start; position: sticky; top: 20px; border-top: 4px solid var(--blue); }

.summary-lines { display: grid; gap: 0; margin-top: 22px; border-top: 1px solid var(--line); }

.summary-lines div { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }

.summary-lines dt { color: var(--muted); font-size: 0.82rem; font-weight: 750; }

.summary-lines dd { max-width: 62%; margin: 0; color: var(--navy); text-align: right; font-size: 0.83rem; font-weight: 900; }

.summary-actions { display: grid; gap: 10px; margin-top: 24px; }

.add-rfq, .send-rfq { min-height: 46px; border: 0; color: #fff; background: var(--teal); font-weight: 900; cursor: pointer; }

.send-rfq { color: var(--navy); background: #f5c967; }

.summary-note { margin: 14px 0 0; color: var(--muted); font-size: 0.79rem; }

.compatibility-note { max-width: 1380px; margin: 0 auto; padding: 64px max(28px, calc((100vw - 1380px) / 2)); color: #e3f5f4; background: var(--navy); }

.compatibility-note .section-kicker { color: #65d9ce; }

.compatibility-note h2 { max-width: 740px; }

.compatibility-note p:last-child { max-width: 820px; margin: 20px 0 0; color: #bfd4d8; }

@media (max-width: 980px) {
  .config-header { grid-template-columns: 1fr auto; padding: 14px 18px; }
  .config-header nav { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; }
  .config-hero, .config-layout { grid-template-columns: 1fr; }
  .config-hero { padding: 38px 18px; }
  .config-layout { padding: 0 18px 56px; }
  .config-breadcrumb { padding: 20px 18px 0; }
  .config-summary { position: static; }
  .compatibility-note { padding: 52px 18px; }
}

@media (max-width: 600px) {
  .config-header nav a { font-size: 0.82rem; }
  .config-rfq-link { min-width: 42px; padding: 0 10px; font-size: 0; }
  .config-rfq-link b { font-size: 0.78rem; }
  .config-details, .config-fields { grid-template-columns: 1fr; }
  .config-form, .config-summary { padding: 22px; }
}