:root {
  --blue: #123f66;
  --blue-dark: #082a47;
  --blue-light: #e9f1f8;
  --red: #ce2525;
  --red-dark: #941616;
  --gold: #f2b827;
  --ink: #333333;
  --muted: #666666;
  --line: #b7b7b7;
  --page-width: 1020px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: #cfd3d6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M0 0h8v1H0z' fill='%23ffffff' opacity='.16'/%3E%3C/svg%3E"); font: 13px/1.55 Arial, Helvetica, sans-serif; letter-spacing: 0; }
img { display: block; max-width: 100%; }
a { color: #155a8d; }
a:hover { color: var(--red-dark); }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 8px 12px; color: #fff; background: #000; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.page { width: min(var(--page-width), calc(100% - 20px)); margin: 10px auto 28px; background: #fff; border: 1px solid #93999d; box-shadow: 0 2px 9px rgba(0,0,0,.25); }

.welcome-bar { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 6px 14px; color: #ddd; background: #282828; font-size: 11px; }
.welcome-bar a { color: #fff; }
.site-header { min-height: 115px; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 18px 24px; background: #fff; }
.logo { display: block; width: 150px; color: var(--blue-dark); text-decoration: none; }
.brand-logo { width: 100%; height: auto; }
.phone-block { display: grid; justify-items: end; }
.phone-block small { color: var(--muted); }
.phone-block a { color: var(--red-dark); font-size: 25px; font-weight: bold; text-decoration: none; }
.phone-block span { color: #777; font-size: 10px; }

.main-nav { display: flex; min-height: 43px; padding-left: 9px; border-top: 1px solid #092845; border-bottom: 5px solid var(--red); background: linear-gradient(#1f5b8c, #0c3558); }
.main-nav a { display: flex; align-items: center; padding: 10px 19px; color: #fff; border-right: 1px solid rgba(255,255,255,.19); text-decoration: none; font-weight: bold; text-shadow: 0 -1px #000; }
.main-nav a:hover { color: #fff; background: linear-gradient(#e64242, #a81515); }
.main-nav a[aria-current="page"] { color: #fff; background: linear-gradient(#e64242, #a81515); }
.service-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #bbb; background: linear-gradient(#f7f7f7, #dedede); }
.service-strip > span { display: grid; justify-items: center; padding: 9px 12px; border-right: 1px solid #bbb; text-align: center; }
.service-strip > span:last-child { border-right: 0; }
.service-strip strong { color: var(--blue-dark); font-size: 12px; }
.service-strip small { color: var(--muted); font-size: 10px; }

main { padding: 18px; }
.home-layout { display: grid; grid-template-columns: 205px minmax(0, 1fr); gap: 16px; }
aside { display: grid; align-content: start; gap: 14px; }
.side-box { border: 1px solid #9da7ae; background: #f5f5f5; }
.side-box h2 { margin: 0; padding: 8px 10px; color: #fff; background: linear-gradient(#285f89, #103a5e); font-size: 13px; text-shadow: 0 -1px #000; }
.category-box ul { margin: 0; padding: 0; list-style: none; }
.category-box li { border-bottom: 1px solid #d0d0d0; }
.category-box li:last-child { border-bottom: 0; }
.category-box a { display: block; padding: 9px 10px 9px 18px; color: #2e4f68; background: linear-gradient(#fff, #ededed); text-decoration: none; font-weight: bold; }
.category-box a::before { content: "\203a"; margin-left: -9px; margin-right: 5px; color: var(--red); }
.category-box a:hover { color: var(--red-dark); background: #fff4e1; }
.help-box, .contact-box { padding-bottom: 12px; }
.help-box p, .contact-box p { margin: 11px; }
.help-box { background: #fff7db; border-color: #c9ae65; }
.help-box h2 { background: linear-gradient(#dc3b3b, #a91818); }
.small-button { display: inline-block; margin: 0 11px; border: 1px solid #7c0f0f; padding: 7px 11px; color: #fff; background: linear-gradient(#df4141, #aa1717); text-decoration: none; font-weight: bold; }
.contact-box a { overflow-wrap: anywhere; }

.main-column { min-width: 0; }
.hero { min-height: 350px; display: grid; grid-template-columns: 1fr 1.15fr; overflow: hidden; border: 1px solid #9fa3a5; background: #e7e8e9; }
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero-copy { align-self: center; padding: 31px; }
.pretitle { margin: 0 0 6px; color: var(--red-dark); font-size: 10px; font-weight: bold; text-transform: uppercase; }
.hero h1 { margin: 0 0 15px; color: var(--blue-dark); font: bold 34px/1.08 Georgia, 'Times New Roman', serif; }
.hero-copy > p:not(.pretitle) { margin: 0 0 20px; color: #555; font-size: 14px; }
.red-button { display: inline-block; border: 1px solid #850e0e; padding: 9px 14px; color: #fff; background: linear-gradient(#e94444, #a81717); box-shadow: inset 0 1px rgba(255,255,255,.35); text-decoration: none; font-weight: bold; }
.red-button:hover { color: #fff; background: var(--blue); }
.notice-box { display: flex; gap: 8px; margin-top: 11px; border: 1px solid #d7b75e; padding: 9px 12px; color: #51451d; background: #fff8d9; font-size: 11px; }

.catalog { margin-top: 20px; }
.section-title { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 11px; border: 1px solid #999; border-bottom: 4px solid var(--red); color: #fff; background: linear-gradient(#484848, #292929); }
.section-title h2 { margin: 0; font-size: 17px; }
.section-title a { color: #fff; font-size: 11px; }
.product-row { display: grid; grid-template-columns: repeat(3, 1fr); border-left: 1px solid #bbb; }
.product-row article { min-width: 0; padding: 12px; border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; background: #fff; }
.product-row img { width: 100%; height: 125px; object-fit: cover; border: 1px solid #aaa; }
.product-row h3 { margin: 10px 0 5px; color: var(--blue-dark); font-size: 14px; }
.product-row p { min-height: 59px; margin: 0 0 7px; color: #666; font-size: 11px; }
.product-row a { font-size: 11px; font-weight: bold; }
.inventory-note { margin: 8px 0 0; color: #777; font-size: 10px; }

.fitment-section, .company-section, .contact-section { margin-top: 35px; padding: 29px; border: 1px solid #aaa; }
.fitment-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 32px; background: var(--blue-light); }
.fitment-section h2, .company-section h2, .contact-section h2 { margin: 0 0 9px; color: var(--blue-dark); font: bold 26px/1.15 Georgia, 'Times New Roman', serif; }
.fitment-section > div > p { margin-bottom: 0; }
.fitment-section ol { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fitment-section li { display: grid; grid-template-columns: 34px 1fr; padding: 12px; border: 1px solid #bccbd7; background: #fff; }
.fitment-section li > span { grid-row: 1 / span 2; align-self: center; color: var(--red); font-size: 22px; font-weight: bold; }
.fitment-section strong, .fitment-section small { display: block; }
.fitment-section small { color: var(--muted); font-size: 10px; }

.company-section { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; background: #fafafa; }
.company-copy p:not(.pretitle) { color: #555; }
table { width: 100%; align-self: start; border-collapse: collapse; background: #fff; }
caption { border: 1px solid #999; border-bottom: 0; padding: 8px; color: #fff; background: var(--blue); text-align: left; font-weight: bold; }
th, td { border: 1px solid #c5c5c5; padding: 8px; text-align: left; vertical-align: top; }
th { width: 95px; color: #555; background: #eee; font-size: 11px; }
td { overflow-wrap: anywhere; }

.contact-section { display: grid; grid-template-columns: .72fr 1.28fr; gap: 35px; border-top: 6px solid var(--red); background: #f2f2f2; }
.email-help { margin-top: 24px; border: 1px solid #c9ae65; padding: 12px; background: #fff9df; }
.email-help p { margin: 5px 0 0; overflow-wrap: anywhere; }
form { min-width: 0; }
fieldset { display: grid; gap: 12px; margin: 0; border: 1px solid #999; padding: 19px; background: #fff; }
legend { padding: 0 7px; color: var(--blue-dark); font-weight: bold; }
label { display: grid; gap: 4px; color: #444; font-size: 11px; font-weight: bold; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.vehicle-row { display: grid; grid-template-columns: .55fr 1fr 1fr; gap: 11px; }
input, select, textarea { width: 100%; min-width: 0; border: 1px solid #8d8d8d; border-radius: 0; padding: 8px; color: #222; background: #fff; }
textarea { resize: vertical; }
.check-label { grid-template-columns: 18px 1fr; align-items: start; font-weight: normal; }
.check-label input { width: 15px; height: 15px; margin: 1px 0 0; }
form button { width: max-content; border: 1px solid #7b1111; border-radius: 0; padding: 9px 14px; color: #fff; background: linear-gradient(#e33e3e, #a81717); font-weight: bold; cursor: pointer; }
form button:hover { background: var(--blue); }
.form-status { min-height: 19px; margin: 0; color: #356016; font-size: 11px; font-weight: bold; }
.form-status.error { color: #9b1717; }
.prepared-link { font-weight: bold; }
.prepared-link[hidden] { display: none; }

footer { padding: 24px; border-top: 5px solid var(--blue); color: #ccc; background: #292929; text-align: center; font-size: 11px; }
footer nav { margin-bottom: 13px; color: #777; }
footer a { color: #fff; }
footer p { margin: 4px 0; }
.footer-logo { width: 112px; display: block; margin: 0 auto 13px; padding: 5px; background: #fff; }
.footer-logo img { width: 100%; height: auto; }

.classic-breadcrumb { margin-bottom: 14px; border-bottom: 1px solid #ccc; padding: 0 0 9px; color: #777; font-size: 11px; }
.catalog-page-heading, .contact-page-heading { border: 1px solid #aaa; border-top: 6px solid var(--red); padding: 25px 28px; background: linear-gradient(90deg, #f5f5f5, #fff); }
.catalog-page-heading h1, .contact-page-heading h1, .fitment-hero h1, .about-hero h1 { margin: 0 0 10px; color: var(--blue-dark); font: bold 34px/1.08 Georgia, 'Times New Roman', serif; }
.catalog-page-heading > p:last-child, .contact-page-heading > p:last-child { max-width: 700px; margin: 0; color: #555; font-size: 14px; }
.catalog-full { margin-top: 18px; }
.catalog-help-band { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 28px; border: 1px solid #b7c8d6; padding: 22px; background: var(--blue-light); }
.catalog-help-band h2 { margin: 0 0 5px; color: var(--blue-dark); font: bold 22px/1.15 Georgia, 'Times New Roman', serif; }
.catalog-help-band p { margin: 0; }
.fitment-hero, .about-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 360px; overflow: hidden; border: 1px solid #999; background: #e8e8e8; }
.fitment-hero > img, .about-hero > img { width: 100%; height: 100%; object-fit: cover; }
.fitment-hero > div, .about-hero > div { align-self: center; padding: 36px; }
.fitment-hero > img { order: 2; }
.fitment-hero > div > p:last-child, .about-hero > div > p:last-child { margin-bottom: 0; color: #555; font-size: 14px; line-height: 1.65; }
.standalone-fitment, .standalone-request { margin-top: 20px; }
.about-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 38px; margin-top: 22px; border: 1px solid #aaa; padding: 28px; background: #fafafa; }
.about-detail h2, .about-services h2, .contact-method-grid h2 { margin: 0 0 10px; color: var(--blue-dark); font: bold 25px/1.15 Georgia, 'Times New Roman', serif; }
.about-detail > div > p { color: #555; line-height: 1.7; }
.about-services { margin-top: 22px; border: 1px solid #a9bac8; padding: 25px; background: var(--blue-light); }
.about-services > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.about-services article { border: 1px solid #b9c8d4; padding: 17px; background: #fff; }
.about-services article > strong { color: var(--blue-dark); font-size: 15px; }
.about-services article > p { min-height: 58px; color: #555; }
.about-services article > a { font-weight: bold; }
.contact-method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.contact-method-grid article { min-width: 0; border: 1px solid #aaa; border-top: 5px solid var(--blue); padding: 22px; background: #f6f6f6; }
.contact-method-grid article:first-child { border-top-color: var(--red); background: #fff8e2; }
.contact-method-grid a { overflow-wrap: anywhere; }
.contact-method-grid .small-button { margin: 0; }
.large-phone { color: var(--red-dark); font-size: 21px; font-weight: bold; text-decoration: none; }
.contact-company { align-items: center; }
.contact-company > img { width: 100%; height: 250px; object-fit: cover; border: 1px solid #aaa; }

@media (max-width: 780px) {
  .home-layout { grid-template-columns: 1fr; }
  aside { grid-template-columns: 1fr 1fr; }
  .category-box { grid-row: 1 / span 2; }
  .hero { grid-template-columns: .9fr 1.1fr; }
  .fitment-section, .company-section, .contact-section { grid-template-columns: 1fr; }
  .about-detail, .contact-method-grid { grid-template-columns: 1fr; }
  .about-services > div { grid-template-columns: 1fr; }
  .about-services article > p { min-height: 0; }
}

@media (max-width: 600px) {
  body { background: #fff; }
  .page { width: 100%; margin: 0; border: 0; box-shadow: none; }
  .welcome-bar { align-items: flex-start; flex-direction: column; gap: 2px; padding: 7px 12px; }
  .site-header { min-height: 96px; padding: 14px 12px; }
  .logo { width: 120px; }
  .phone-block small, .phone-block span { display: none; }
  .phone-block a { font-size: 15px; }
  .main-nav { overflow-x: auto; padding-left: 0; }
  .main-nav a { flex: 0 0 auto; padding: 10px 12px; font-size: 11px; }
  .service-strip { grid-template-columns: 1fr; }
  .service-strip > span { border-right: 0; border-bottom: 1px solid #ccc; }
  .service-strip > span:last-child { border-bottom: 0; }
  main { padding: 12px; }
  aside { grid-template-columns: 1fr; }
  .category-box { grid-row: auto; }
  .hero { min-height: 0; grid-template-columns: 1fr; }
  .hero img { height: 230px; }
  .hero-copy { padding: 25px 20px; }
  .hero h1 { font-size: 30px; }
  .notice-box { flex-direction: column; }
  .product-row { grid-template-columns: 1fr; }
  .product-row article { display: grid; grid-template-columns: 115px 1fr; gap: 5px 12px; }
  .product-row img { grid-row: 1 / span 3; width: 115px; height: 105px; }
  .product-row h3, .product-row p { margin: 0; min-height: 0; }
  .fitment-section, .company-section, .contact-section { margin-top: 24px; padding: 20px 15px; }
  .fitment-section ol, .field-row, .vehicle-row { grid-template-columns: 1fr; }
  .fitment-hero, .about-hero { grid-template-columns: 1fr; }
  .fitment-hero > img { order: 0; height: 230px; }
  .about-hero > img { height: 230px; }
  .fitment-hero > div, .about-hero > div { padding: 25px 20px; }
  .catalog-page-heading, .contact-page-heading, .about-detail, .about-services { padding: 20px 15px; }
  .catalog-help-band { align-items: flex-start; flex-direction: column; }
  th { width: 78px; }
  fieldset { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }