/* ==================================================
   FONT SYSTEM — INTER
   ================================================== */

body,
button,
input,
select,
textarea {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ==================================================
   GLOBAL
   ================================================== */

body {
  background-color: #ffffff;
  margin: 0;
}

/* ==================================================
   HEADER / NAV
   ================================================== */

header {
  background-color: #ffffff;
  border-top: none !important;
  border-bottom: 6px solid #c40000 !important;
}

header .navbar {
  padding-top: 12px;
  padding-bottom: 12px;
  min-height: 92px;
  display: flex;
  align-items: flex-end;
}

.navbar-brand {
  display: flex;
  align-items: center;
}

.navbar-nav {
  display: flex;
  align-items: center;
}

.navbar-nav .nav-item {
  margin-left: 18px;
}

.navbar-nav .nav-link {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 0;
  color: #000000;
  white-space: nowrap;
}

.navbar-nav .nav-link:hover {
  color: #be0000;
}

.navbar-nav .dropdown-toggle::after {
  margin-left: 6px;
  vertical-align: middle;
}

.navbar i,
.navbar svg {
  color: #000000;
  vertical-align: middle;
}

.navbar .btn-primary {
  margin-left: 20px;
  padding: 12px 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background-color: #be0000 !important;
  border-color: #be0000 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

.navbar .btn-primary:hover {
  background-color: #a80000 !important;
  border-color: #a80000 !important;
}
/* ==================================================
   NAV — COMPACT FIT
   ================================================== */

.navbar-nav .nav-item {
  margin-left: 10px !important;
}

.navbar-nav .nav-link {
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
}

.navbar-brand img {
  max-width: 211px !important;
}

.m-adder {
  flex-shrink: 0;
}
/* ==================================================
   GLOBAL SECTION NORMALIZATION
   (THIS IS WHAT WAS CAUSING THE SPACE)
   ================================================== */

section {
  padding: 0;
  margin: 0;
}

/* ==================================================
   HERO / BANNER — FINAL, LOCKED
   ================================================== */

section.banner {
  background-color: #f5f5f5 !important;
  padding: 48px 0 !important;
  margin: 0 !important;
}

/* Neutralize wrapper spacing */
section.banner .container,
section.banner .row {
  margin: 0 !important;
  padding: 0 !important;
}

section.banner .row {
  display: flex;
  align-items: center;
}

/* Text column */
section.banner .col-md-6:first-child {
  max-width: 520px;
}

/* Desktop spacing between text + image */
@media (min-width: 992px) {
  section.banner .col-md-6:first-child {
    margin-right: 64px;
  }

  section.banner .col-md-6:last-child {
    margin-left: auto;
  }
}

/* Hero typography */
section.banner h1 {
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}

section.banner h2 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}

section.banner p {
  font-weight: 400;
  line-height: 1.6;
  max-width: 520px;
}

/* Image safety */
section.banner img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* ==================================================
   SECTION HEADINGS
   ================================================== */

section h2 {
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* ==================================================
   BRAND RED — BUTTONS
   ================================================== */

.btn-primary,
.btn.btn-primary,
.btn-info,
.btn.btn-info {
  background-color: #be0000 !important;
  border-color: #be0000 !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
.btn-info:hover,
.btn.btn-info:hover {
  background-color: #a80000 !important;
  border-color: #a80000 !important;
}

/* ==================================================
   FEATURE / CTA CARDS
   ================================================== */

.bg-theme {
  background-color: #be0000 !important;
  color: #ffffff !important;
}

.card {
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
  border-radius: 4px;
}

/* ==================================================
   HERO / BANNER — FIGMA MATCH
   ================================================== */

/* Banner background stays full width */
section.banner {
  background-color: #f5f5f5 !important;
  padding: 48px 0 !important;
}

/* Re-introduce max width like Figma */
section.banner .container {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Vertically center banner content */
section.banner .row {
  align-items: center !important;
}

/* Text column sizing */
section.banner .col-md-6:first-child {
  max-width: 520px !important;
}

/* Space between text and image (desktop only) */
@media (min-width: 992px) {
  section.banner .col-md-6:first-child {
    margin-right: 64px !important;
  }
}

/* Image safety */
section.banner img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Space after banner */
section.banner + section {
  margin-top: 48px !important;
}

/* ==================================================
   HEADER → HERO DIVIDER (RED LINE)
   ================================================== */

hr,
.header-border,
.border-primary {
  border-color: #be0000 !important;
  background-color: #be0000 !important;
  height: 6px !important;
  margin: 0 !important;
  opacity: 1 !important;
}

/* Ensure divider hugs header */
header + hr,
header + .header-border,
header + .border-primary {
  margin-top: 0 !important;
}

/* Body section dividers — constrained to content width, thinner */
div > hr {
  max-width: 1200px !important;
  height: 2px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Remove accidental spacing before banner */
header + section,
header + .banner {
  margin-top: 0 !important;
}

/* ==================================================
   FOOTER CTA — FULL-WIDTH SPLIT (FINAL)
   ================================================== */

/* Paint the full viewport split on the wrapper */
.bg-grd.footer-cta-split {
  background-image: none !important;
  background: linear-gradient(
    to right,
    #2b333b 0%,
    #2b333b 50%,
    #be0000 50%,
    #be0000 100%
  ) !important;
}

/* Make inner columns transparent so wrapper shows */
.bg-grd.footer-cta-split .col-sm-6 {
  background: transparent !important;
  background-image: none !important;
}
/* ==================================================
   OTHER EXHAUST REMOVAL NEEDS — FINAL HOVER FIX
   ================================================== */

/* 1. Neutralize hover on column + link (kills blue bleed) */
.other-product,
.other-product:hover,
.other-product > a,
.other-product > a:hover {
  background: transparent !important;
  text-decoration: none;
}

/* 2. Base card styles (ensure text is visible by default) */
.other-product .card {
  background: #ffffff !important;
}

.other-product .card-body {
  background: #ffffff !important;
  color: #222222 !important;
}

/* Ensure headings + text show normally */
.other-product h5,
.other-product p {
  color: #222222 !important;
}

/* 3. Apply RED hover ONLY on the card */
.other-product a:hover .card,
.other-product a:hover .card-body {
  background-color: #be0000 !important;
}

/* 4. Text color on hover */
.other-product a:hover h5,
.other-product a:hover p {
  color: #ffffff !important;
}

/* 5. Border stays red */
.other-product a:hover .card {
  border-color: #be0000 !important;
}

/* 6. Smooth transition */
.other-product .card,
.other-product .card-body,
.other-product h5,
.other-product p {
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* ==================================================
   DESIGN GUIDE WIZARD — MOBILE IMAGE SIZING
   ================================================== */

@media (max-width: 640px) {
  #step-1 .wiz-tile img,
  #step-3 .wiz-tile img,
  #step-4 .wiz-tile img {
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    object-fit: contain !important;
  }
}

/* ==================================================
   SHOP PAGE — STACK BANNER ON MOBILE (IMAGE BELOW TEXT)
   ================================================== */
@media (max-width: 575px) {
  section.banner .row {
    flex-wrap: wrap !important;
  }
  section.banner .row .col-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}