/* ============================================================
   US Auto HQ — shared stylesheet
   Palette sampled from the logo.
   ============================================================ */

:root {
  /* Brand */
  --navy:        #002860;
  --navy-deep:   #001A40;
  --navy-soft:   #133C7A;
  --red:         #D00018;
  --red-dark:    #A50013;
  --ink:         #101418;

  /* Surfaces */
  --page:        #F7F8FA;
  --card:        #FFFFFF;
  --line:        #DFE3EA;
  --line-strong: #C3CAD6;
  --muted:       #5A6472;

  /* Condition grades — deliberately outside the brand red */
  --grade-a:     #1F7A4D;
  --grade-b:     #B87400;
  --grade-c:     #5A6472;

  /* Type */
  --display: "Saira Condensed", "Arial Narrow", sans-serif;
  --body:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy); }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

.wrap { width: min(1200px, 92vw); margin-inline: auto; }

/* ---------- Header ---------- */

/* White header — the logo carries navy in its own artwork, so it needs a
   light field to read against. The red rule ties it to the hero below. */
.site-header {
  background: #fff;
  color: var(--ink);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 3px solid var(--red);
  box-shadow: 0 1px 8px rgba(0,40,96,.06);
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 28px;
}

.logo-link { display: flex; align-items: center; flex-shrink: 0; }
.logo-link img { height: 46px; width: auto; display: block; }

.site-nav {
  display: flex;
  gap: 26px;
  margin-left: auto;
  align-items: center;
}

.site-nav a {
  color: var(--navy);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color .15s ease;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { border-bottom-color: var(--red); }

.header-phone {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  padding-left: 26px;
  border-left: 1px solid var(--line);
}
.header-phone span {
  display: block;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  font-family: var(--body);
}

.nav-toggle { display: none; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 13px 26px;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); }

.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-deep); }

.btn-ghost {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--line-strong);
}
.btn-ghost:hover { border-color: var(--navy); }

.btn-block { width: 100%; }

/* ---------- Hero: the fitment finder ---------- */

.hero {
  background:
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  padding: 62px 0 54px;
  position: relative;
  overflow: hidden;
}

/* faint gear-tooth rhythm along the bottom, nodding to the badge */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 10px;
  background: repeating-linear-gradient(90deg,
    var(--red) 0 26px, transparent 26px 52px);
  opacity: .5;
}

.hero-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin: 0 0 12px;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(38px, 5.6vw, 66px);
  line-height: .98;
  letter-spacing: -.005em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.hero h1 em { font-style: normal; color: #6FA0E8; }

.hero-sub {
  margin: 0 0 30px;
  font-size: 17px;
  color: rgba(255,255,255,.78);
  max-width: 56ch;
}

/* The finder */
.finder {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 3px;
  padding: 22px;
}

.finder-legend {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin: 0 0 14px;
}

.finder-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 12px;
}

.finder select {
  appearance: none;
  width: 100%;
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23002860' stroke-width='2' fill='none'/%3E%3C/svg%3E")
    no-repeat right 14px center;
  border: 0;
  border-radius: 2px;
  padding: 15px 34px 15px 14px;
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
}
.finder select:disabled { color: var(--muted); background-color: #E9ECF1; cursor: not-allowed; }

.finder-note {
  margin: 15px 0 0;
  font-size: 14px;
  color: rgba(255,255,255,.7);
}
.finder-note a { color: #fff; text-underline-offset: 3px; }

/* ---------- Shop status banner ---------- */

.notice {
  padding: 13px 0;
  font-size: 15px;
  border-bottom: 1px solid var(--line);
}
.notice .wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.notice b {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Away — amber, deliberately not red so it never reads as a button */
.notice-away { background: #FBF0DA; color: #6B4400; border-bottom-color: #E4C489; }
.notice-away b { color: #7A4E00; }

/* Normal operating note — quiet */
.notice-open { background: #EFF2F6; color: var(--muted); border-bottom-color: var(--line); }
.notice-open b { color: var(--navy); }

.ship-date {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}
.ship-date.delayed { color: #7A4E00; }

.ack {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #FBF0DA;
  border: 1px solid #E4C489;
  border-radius: 2px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #6B4400;
  line-height: 1.45;
}
.ack input { margin-top: 3px; flex-shrink: 0; }

/* ---------- Trust strip ---------- */

.trust {
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.trust-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 18px 26px;
  padding: 18px 0;
  align-items: start;
}
.trust-item {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.trust-item b {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--navy);
}
.trust-item span { font-size: 13px; color: var(--muted); }
.trust-item .lic { font-family: var(--mono); font-size: 13px; color: var(--muted); }

/* ---------- Sections ---------- */

.section { padding: 54px 0; }
.section-alt { background: #fff; border-block: 1px solid var(--line); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
  border-bottom: 2px solid var(--navy);
  padding-bottom: 12px;
}

.section-head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0;
  color: var(--navy);
}
.section-head p { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.section-head a {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
  white-space: nowrap;
}
.section-head a:hover { text-decoration: underline; }

/* ---------- Donor vehicle cards ---------- */

.donor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
}

.donor {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--navy);
  border-radius: 2px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.donor:hover {
  border-color: var(--line-strong);
  border-top-color: var(--red);
  box-shadow: 0 3px 14px rgba(0,40,96,.09);
}

.donor-stock {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--muted);
}
.donor h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0;
  color: var(--navy);
}
.donor-spec {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.donor-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
}
.donor-count { font-family: var(--mono); color: var(--navy); font-weight: 600; }
.donor-cta {
  font-family: var(--display);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--red);
}

/* ---------- Part cards: the shop tag ---------- */

.part-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 20px;
}

.part {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: box-shadow .15s ease, transform .15s ease;
}
.part:hover { box-shadow: 0 6px 20px rgba(0,40,96,.12); transform: translateY(-2px); }

.part-photo {
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(45deg, #EEF1F5 0 10px, #E7EBF1 10px 20px);
  display: grid;
  place-items: center;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  border-bottom: 1px solid var(--line);
}

/* the tag header — punched hole + stock number */
.part-tag {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  background: #EFF2F6;
  border-bottom: 1px dashed var(--line-strong);
}
.part-hole {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--page);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  flex-shrink: 0;
}
.part-stock {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--navy);
  font-weight: 600;
}
.grade {
  margin-left: auto;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  padding: 2px 8px;
  border-radius: 2px;
}
.grade-a { background: var(--grade-a); }
.grade-b { background: var(--grade-b); }
.grade-c { background: var(--grade-c); }

.part-body { padding: 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.part-body h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
  text-transform: uppercase;
}
.part-fits { font-size: 13px; color: var(--muted); margin: 0; }
.part-num { font-family: var(--mono); font-size: 12px; color: var(--muted); margin: 0; }

.part-foot {
  margin-top: auto;
  padding-top: 11px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--line);
}
.price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 25px;
  color: var(--navy);
  letter-spacing: .01em;
}
.ship {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
}
.ship-free   { color: var(--grade-a); }
.ship-flat   { color: var(--muted); }
.ship-quote  { color: var(--red); }

/* ---------- Two-up action panels ---------- */

.panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.panel {
  background: var(--navy);
  color: #fff;
  padding: 34px;
  border-radius: 2px;
  border-left: 5px solid var(--red);
}
.panel h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 29px;
  text-transform: uppercase;
  margin: 0 0 10px;
  line-height: 1.05;
}
.panel p { color: rgba(255,255,255,.78); margin: 0 0 22px; font-size: 15px; }
.panel-alt { background: #fff; color: var(--ink); border: 1px solid var(--line); border-left: 5px solid var(--navy); }
.panel-alt h2 { color: var(--navy); }
.panel-alt p { color: var(--muted); }

/* ---------- Shop layout ---------- */

.shop-layout {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: 32px;
  align-items: start;
}

.filters {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 20px;
  position: sticky;
  top: calc(var(--header-h) + 18px);
}
.filter-group { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.filter-group:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.filter-group h3 {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 11px;
}
.filter-group label { display: flex; align-items: center; gap: 9px; font-size: 14px; padding: 3px 0; cursor: pointer; }
.filter-group select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  font-family: var(--body);
  font-size: 14px;
  margin-bottom: 8px;
  background: #fff;
}
.filter-count { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted); }

.shop-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--navy);
  flex-wrap: wrap;
}
.shop-bar h1 {
  font-family: var(--display);
  font-size: 30px;
  text-transform: uppercase;
  margin: 0;
  color: var(--navy);
}
.result-count { font-family: var(--mono); font-size: 13px; color: var(--muted); }

.applied { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 5px 11px;
  font-size: 13px;
}
.chip b { font-weight: 600; }
.chip button { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 15px; line-height: 1; padding: 0; }

/* ---------- Part detail ---------- */

.detail {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 44px;
  align-items: start;
}
.gallery-main {
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(45deg, #EEF1F5 0 12px, #E7EBF1 12px 24px);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-align: center;
  padding: 20px;
}
.gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin-top: 9px; }
.gallery-thumbs div {
  aspect-ratio: 1;
  background: repeating-linear-gradient(45deg, #EEF1F5 0 7px, #E7EBF1 7px 14px);
  border: 1px solid var(--line);
  cursor: pointer;
}
.gallery-thumbs div:first-child { border-color: var(--red); border-width: 2px; }

.detail h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.03;
  text-transform: uppercase;
  margin: 8px 0 14px;
  color: var(--ink);
}

.detail-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #EFF2F6;
  border: 1px dashed var(--line-strong);
  padding: 7px 13px;
  border-radius: 2px;
}

.detail-price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 46px;
  color: var(--navy);
  line-height: 1;
}
.detail-ship { font-size: 14px; color: var(--muted); margin: 6px 0 0; }

.buybox {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--red);
  padding: 22px;
  margin: 22px 0;
  border-radius: 2px;
}
.stock-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--grade-a);
  margin-bottom: 16px;
}
.stock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--grade-a); }

.spec-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.spec-table th, .spec-table td {
  text-align: left;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  vertical-align: top;
}
.spec-table th {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  width: 42%;
  font-size: 13px;
}
.spec-table td { font-family: var(--mono); font-size: 13px; }
.spec-table td.plain { font-family: var(--body); font-size: 14px; }

.fitment-list { list-style: none; margin: 0; padding: 0; }
.fitment-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.fitment-list li span { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.fitment-note { font-size: 13px; color: var(--red); font-weight: 600; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,.72);
  padding: 46px 0 26px;
  margin-top: 60px;
  border-top: 4px solid var(--red);
  font-size: 14px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 34px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255,255,255,.13);
}
.footer-grid h4 {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 13px;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-grid a { color: rgba(255,255,255,.72); text-decoration: none; }
.footer-grid a:hover { color: #fff; text-decoration: underline; }
.footer-logo img {
  height: 58px;
  margin-bottom: 14px;
  background: #fff;
  border-radius: 50%;
  padding: 7px;
}
.footer-lic { font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,.55); margin-top: 12px; }
.footer-bottom {
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255,255,255,.5);
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .finder-row { grid-template-columns: 1fr 1fr; }
  .finder-row .btn { grid-column: span 2; }
  .detail { grid-template-columns: 1fr; gap: 28px; }
  .shop-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .panels { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .site-nav {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    background: #fff;
    box-shadow: 0 8px 18px rgba(0,40,96,.12);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 4vw 16px;
    border-bottom: 3px solid var(--red);
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 13px 0; border-bottom: 1px solid var(--line); }
  .nav-toggle {
    display: block;
    margin-left: auto;
    background: none;
    border: 2px solid var(--line-strong);
    color: var(--navy);
    font-family: var(--display);
    font-size: 15px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 2px;
    cursor: pointer;
  }
  .header-phone { display: none; }
  .logo-link img { height: 38px; }
  .finder-row { grid-template-columns: 1fr; }
  .finder-row .btn { grid-column: auto; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { padding: 40px 0 36px; }
}

/* ---------- Live-data additions ----------
   The comp used grey "PHOTO" placeholders. Real photographs go in the same boxes; these
   rules are all that is needed to make them sit correctly. */

.part-photo img,
.gallery-main img,
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Stand-in imagery until the real photograph is uploaded: show the whole logo on white
   rather than cropping it to a band the way a photo crop would. */
.part-photo img[src*="placeholder"],
.gallery-main img[src*="placeholder"] {
  object-fit: contain;
  background: #fff;
  padding: 14%;
}
.gallery-main img { object-fit: contain; background: #fff; }
.gallery-thumbs img { aspect-ratio: 1; }
.gallery-thumbs button { padding: 0; border: 1px solid var(--line); background: none; cursor: pointer; }
.gallery-thumbs button[aria-current="true"] { border-color: var(--red); border-width: 2px; }

/* Loading / empty states, so a slow or empty section never looks broken. */
.state {
  grid-column: 1 / -1;
  padding: 44px 20px;
  text-align: center;
  color: var(--muted);
  background: var(--card);
  border: 1px dashed var(--line-strong);
  border-radius: 2px;
}
.state b { display: block; font-family: var(--display); font-size: 20px; text-transform: uppercase; color: var(--navy); margin-bottom: 6px; }

/* Forms — the parts request and the we-buy-cars pages. */
.form-page { display: grid; grid-template-columns: 1.2fr .8fr; gap: 44px; align-items: start; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field > span {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  font-family: var(--body);
  font-size: 15px;
  background: #fff;
  color: var(--ink);
}
.field textarea { resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-hint { font-size: 13px; color: var(--muted); margin: -10px 0 16px; }

.msg { padding: 14px 16px; border-radius: 2px; font-size: 15px; margin-top: 16px; }
.msg-ok  { background: #E8F4ED; border: 1px solid #A9D6BE; color: #14603A; }
.msg-err { background: #FBE9EA; border: 1px solid #E9AEB3; color: #8E0011; }

.prose h2 {
  font-family: var(--display);
  font-size: 27px;
  text-transform: uppercase;
  color: var(--navy);
  margin: 38px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--navy);
}
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 15px; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 7px; }
.prose { max-width: 74ch; }

@media (max-width: 860px) {
  .form-page { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   eBay listings shown alongside our own inventory.
   They must read as ours-but-elsewhere: same card, same grid, never disguised.
   The card itself does not hover or lift, because unlike our parts it isn't a
   link — only the button goes anywhere, and it goes off-site.
   --------------------------------------------------------------------------- */

.part-ebay { cursor: default; }
.part-ebay:hover { box-shadow: none; transform: none; }

.badge-ebay {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  background: var(--navy-soft);
  padding: 2px 8px;
  border-radius: 2px;
}

/* eBay reports a condition word ("Used"), not one of our A/B/C grades. */
.grade-used {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line-strong);
}

.btn-ebay {
  margin-top: 4px;
  background: var(--navy);
  color: #fff;
  text-align: center;
  font-size: 14px;
  padding: 9px 12px;
}
.btn-ebay:hover { background: var(--navy-deep); }

/* "may depend on trim or engine" — a caution, not a decoration. */
.part-maybe {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: #7A4E00;
  background: #FFF8E8;
  border-left: 3px solid var(--grade-b);
  padding: 6px 8px;
}

/* Shown only when eBay is unreachable. Quiet on purpose: our parts are still there. */
.ebay-note {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--muted);
  border-left: 3px solid var(--line-strong);
  padding: 6px 10px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   Header lockup: the shield, plus the name set in live text rather than baked
   into the image. The shield's own wordmark is unreadable at 46px, and text
   stays crisp on every screen. Colours follow the logo: US in red, the rest navy.
   --------------------------------------------------------------------------- */

.logo-link { gap: 11px; }
.logo-word {
  font-family: var(--display);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--navy);
  line-height: 1;
  white-space: nowrap;
}
.logo-word b { color: var(--red); font-weight: 700; }

@media (max-width: 720px) {
  .logo-word { font-size: 21px; }
}
@media (max-width: 380px) {
  .logo-word { display: none; }   /* the shield alone below a phone's narrowest */
}