@charset "UTF-8";
/* theme/theme.css — the "Storefront" theme for usedenginesales.net (Concept B).
   Loaded by theme/head.php instead of 0style.css / p7 menus / Bootstrap when the theme is
   active (theme/switch.php). Every selector is prefixed .ues- or scoped under body.ues so the
   old stylesheets and this one can never collide. Legacy markup that is included unchanged
   (searchbox.php, enginelinks.php) is restyled in the "Legacy includes" section at the end.
   Breakpoints: 1120 (nav collapses), 1024, 900, 640, 480. */

/* ---------- Tokens ---------- */
:root {
  --ues-orange: #FF4C00;
  --ues-orange-dark: #E04300;
  --ues-orange-text: #D84000;
  --ues-navy: #1C2D37;
  --ues-navy-dark: #0F1A21;
  --ues-ink: #1C2D37;
  --ues-body: #3E4B55;
  --ues-muted: #6B7680;
  --ues-line: #E4E0D8;
  --ues-line-soft: #ECE8E1;
  --ues-panel: #F6F5F2;
  --ues-tint: #FFF1EA;
  --ues-white: #FFFFFF;
  --ues-font-display: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ues-font-body: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ues-gutter: clamp(16px, 4.5vw, 64px);
  --ues-max: 1760px;
  --ues-radius: 16px;
  --ues-radius-sm: 10px;
  --ues-shadow: 0 24px 60px rgba(28, 45, 55, .12);
  --ues-header-h: 92px;
}

/* ---------- Base ----------
   Base rules are wrapped in :where() so they carry no specificity: any .ues-* component rule
   wins over them regardless of order. */
body.ues {
  margin: 0;
  font-family: var(--ues-font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ues-ink);
  background: var(--ues-white);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
.ues *, .ues *::before, .ues *::after { box-sizing: border-box; }
:where(.ues) img { max-width: 100%; height: auto; }
:where(.ues) a { color: var(--ues-orange-text); }
:where(.ues) a:hover { color: var(--ues-orange); }
:where(.ues) h1, :where(.ues) h2, :where(.ues) h3, :where(.ues) h4 { font-family: var(--ues-font-display); line-height: 1.15; margin: 0; color: var(--ues-ink); }
:where(.ues) p { margin: 0; }
body.ues :focus-visible { outline: 3px solid var(--ues-orange); outline-offset: 2px; }

.ues-wrap { width: 100%; max-width: var(--ues-max); margin-inline: auto; padding-inline: var(--ues-gutter); }
.ues-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ues-navy); color: #fff; padding: 10px 14px; border-radius: 8px; }
.ues-skip:focus { left: 8px; }

.ues-h2 { font-size: clamp(28px, 3.2vw, 42px); font-weight: 700; letter-spacing: -.01em; }
.ues-sub { margin-top: 8px; font-size: 18px; color: var(--ues-body); }
.ues-link { font-weight: 700; text-decoration: none; }
.ues-fineprint { font-size: 14px; color: var(--ues-muted); }

/* ---------- Buttons ---------- */
.ues-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 12px; border: 0; cursor: pointer;
  font-family: var(--ues-font-display); font-size: 16px; font-weight: 700; letter-spacing: .01em;
  text-decoration: none; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s;
}
.ues-btn--orange { background: var(--ues-orange); color: #fff; }
.ues-btn--orange:hover { background: var(--ues-orange-dark); color: #fff; }
.ues-btn--navy { background: var(--ues-navy); color: #fff; }
.ues-btn--navy:hover { background: var(--ues-navy-dark); color: #fff; }
.ues-btn--outline { background: #fff; color: var(--ues-ink); border: 1.5px solid #D6D1C8; }
.ues-btn--outline:hover { border-color: var(--ues-ink); color: var(--ues-ink); }
.ues-btn svg { flex: none; }

/* ---------- Announcement bar / promo ---------- */
.ues-bar { background: var(--ues-orange); color: #fff; font-size: 15px; font-weight: 600; }
.ues-bar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.ues-bar a { color: #fff; }
.ues-bar__link { text-decoration: none; }
.ues-bar__link:hover { text-decoration: underline; }
.ues-promo { background: var(--ues-navy); color: #fff; text-align: center; font-weight: 600; font-size: 16px; padding: 10px 0; }

/* ---------- Header ---------- */
.ues-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1.5px solid var(--ues-line-soft); }
.ues-header__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--ues-header-h); }
.ues-logo { display: flex; align-items: center; flex: none; }
.ues-logo img { height: 74px; width: auto; display: block; }
.ues-nav { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.ues-nav a { color: var(--ues-ink); text-decoration: none; font-weight: 600; font-size: 16px; padding: 10px 12px; border-radius: 8px; white-space: nowrap; }
.ues-nav a:hover { background: var(--ues-panel); color: var(--ues-ink); }
.ues-nav a[aria-current="page"] { color: var(--ues-orange-text); }
.ues-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.ues-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--ues-ink); text-decoration: none; font-family: var(--ues-font-display); font-size: 20px; font-weight: 700; min-height: 44px; }
.ues-phone svg { color: var(--ues-orange); }
.ues-cart { min-height: 48px; padding: 0 16px; }
.ues-cart__count { font-weight: 700; color: var(--ues-orange-text); }
.ues-burger { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; border: 1.5px solid #D6D1C8; background: #fff; color: var(--ues-ink); cursor: pointer; padding: 0; }
.ues-burger__close { display: none; }
.ues-burger[aria-expanded="true"] .ues-burger__open { display: none; }
.ues-burger[aria-expanded="true"] .ues-burger__close { display: block; }

/* Mobile drawer */
.ues-drawer { position: fixed; z-index: 49; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); background: #fff; box-shadow: -20px 0 60px rgba(28, 45, 55, .18); padding: calc(var(--ues-header-h) + 16px) 20px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; }
.ues-drawer[hidden] { display: none; }
.ues-drawer__nav { display: flex; flex-direction: column; }
.ues-drawer__nav a { color: var(--ues-ink); text-decoration: none; font-family: var(--ues-font-display); font-size: 19px; font-weight: 600; padding: 13px 10px; border-bottom: 1px solid var(--ues-line-soft); border-radius: 6px; }
.ues-drawer__nav a[aria-current="page"] { color: var(--ues-orange-text); }
.ues-drawer__foot { display: flex; flex-direction: column; gap: 12px; }
.ues-drawer__foot .ues-btn { width: 100%; }
.ues-drawer__note { font-size: 14px; color: var(--ues-muted); line-height: 1.45; }
.ues-drawer-backdrop { position: fixed; inset: 0; z-index: 48; background: rgba(15, 26, 33, .45); }
.ues-drawer-backdrop[hidden] { display: none; }
body.ues.ues-drawer-open { overflow: hidden; }

/* ---------- Hero + quote form ---------- */
.ues-hero { background: var(--ues-panel); padding: 40px 0 48px; }
.ues-hero__in {
  display: grid; grid-template-columns: minmax(0, 1fr) 540px; grid-template-rows: auto 1fr;
  grid-template-areas: "copy quote" "more quote"; column-gap: 64px; row-gap: 20px; align-items: stretch;
}
.ues-hero__copy { grid-area: copy; display: flex; flex-direction: column; gap: 16px; padding-top: 4px; }
.ues-quote { grid-area: quote; }
.ues-hero__more { grid-area: more; display: flex; flex-direction: column; gap: 20px; min-height: 0; }
.ues-pill { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1.5px solid var(--ues-line); font-size: 14px; font-weight: 600; }
.ues-pill svg { color: var(--ues-orange); }
.ues-hero__title { font-size: clamp(36px, 4vw, 56px); font-weight: 800; letter-spacing: -.02em; line-height: 1.04; }
/* The headline is split so the alternate version (v2.css) can two-tone it; this design does not. */
.ues-hero__title strong { font-weight: inherit; }
.ues-hero__lead { font-size: clamp(18px, 1.5vw, 21px); color: var(--ues-body); max-width: 640px; }
.ues-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 17px; font-weight: 500; flex: none; }
.ues-checks li { position: relative; padding-left: 34px; }
.ues-checks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--ues-orange); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF4C00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 12 3 3 6-7'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ues-hero__img { width: 100%; flex: 1 1 0; min-height: 140px; height: auto; object-fit: cover; object-position: center top; border-radius: var(--ues-radius); border: 1.5px solid var(--ues-line); background: #fff; }

/* ---------- Trust strip ---------- */
.ues-trust { border-bottom: 1.5px solid var(--ues-line-soft); }
.ues-trust__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: 22px; }
.ues-trust__item { display: flex; align-items: center; gap: 14px; padding-inline: 24px; border-left: 1.5px solid var(--ues-line-soft); }
.ues-trust__item:first-child { padding-left: 0; border-left: 0; }
.ues-trust__icon { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--ues-tint); color: var(--ues-orange); display: flex; align-items: center; justify-content: center; }
.ues-trust__item strong { display: block; font-family: var(--ues-font-display); font-size: 18px; font-weight: 700; }
.ues-trust__item span { display: block; font-size: 15px; color: var(--ues-muted); }

/* ---------- Sections ---------- */
.ues-section { padding: 52px 0; }
.ues-section--panel { background: var(--ues-panel); }
.ues-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.ues-section__head--center { justify-content: center; text-align: center; }

/* Shop by part */
.ues-parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ues-part { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: #fff; border: 1.5px solid var(--ues-line); border-radius: var(--ues-radius); text-decoration: none; color: var(--ues-ink); transition: border-color .15s, transform .15s; }
.ues-part:hover { border-color: var(--ues-ink); color: var(--ues-ink); transform: translateY(-2px); }
.ues-part__icon { display: flex; align-items: center; justify-content: center; height: 110px; border-radius: 12px; background: var(--ues-panel); color: var(--ues-orange); }
.ues-part h3 { font-size: 24px; font-weight: 700; }
.ues-part p { color: var(--ues-body); font-size: 16px; }
.ues-part__cta { color: var(--ues-orange-text); font-weight: 700; margin-top: auto; }

/* How it works */
.ues-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ues-step { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: #fff; border: 1.5px solid var(--ues-line); border-radius: var(--ues-radius); }
.ues-step__n { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ues-orange); color: #fff; font-family: var(--ues-font-display); font-size: 20px; font-weight: 700; }
.ues-step h3 { font-size: 24px; font-weight: 700; }
.ues-step p { color: var(--ues-body); font-size: 16px; }

/* Why buy */
.ues-why { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 64px; align-items: start; }
.ues-reasons { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.ues-reasons li { position: relative; padding-left: 48px; }
.ues-reasons li::before { content: ""; position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--ues-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF4C00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / 18px no-repeat; }
.ues-reasons strong { display: block; font-family: var(--ues-font-display); font-size: 19px; font-weight: 700; }
.ues-reasons span { display: block; margin-top: 3px; font-size: 16px; color: var(--ues-body); }
.ues-warranty { display: flex; flex-direction: column; gap: 14px; padding: 28px; background: var(--ues-navy); color: #fff; border-radius: 20px; }
.ues-warranty svg { color: #FF6A2A; }
.ues-warranty h3 { color: #fff; font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; }
.ues-warranty p { color: #C3CCD2; }
.ues-warranty .ues-btn { align-self: flex-start; }

/* Reviews */
.ues-rating { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ues-stars { display: inline-block; color: var(--ues-orange); font-size: 18px; letter-spacing: 2px; line-height: 1; }
.ues-stars::before { content: "★★★★★"; }
.ues-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ues-review { margin: 0; display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #fff; border: 1.5px solid var(--ues-line); border-radius: var(--ues-radius); }
.ues-review blockquote { margin: 0; font-size: 17px; line-height: 1.55; color: #2C3941; }
.ues-review figcaption { font-family: var(--ues-font-display); font-weight: 700; font-size: 16px; }
.ues-review figcaption span { font-weight: 400; color: var(--ues-muted); }

/* Browse by make (enginelinks.php restyled below) */
.ues-makes { margin-top: 4px; }

/* About / SEO copy */
.ues-about { border-top: 1.5px solid var(--ues-line-soft); }
.ues-about__in { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 64px; align-items: start; }
.ues-about__aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--ues-header-h) + 24px); }
.ues-about__warranty { padding: 18px 20px; background: var(--ues-navy); color: #fff; border-radius: 12px; font-size: 16px; line-height: 1.4; }
.ues-about__warranty strong { display: block; font-family: var(--ues-font-display); font-size: 22px; font-weight: 700; }
.ues-about__title { font-size: clamp(26px, 2.6vw, 36px); }
.ues-about__body { font-size: 16px; line-height: 1.65; color: var(--ues-body); }
.ues-about__body > * + * { margin-top: 16px; }
.ues-about__body h3 { font-size: 22px; font-weight: 700; margin-top: 22px; }
.ues-about__body ul { padding-left: 22px; margin: 0; }
.ues-about__body li + li { margin-top: 6px; }
.ues-spanish { color: #ac535c; }

/* Call to action */
.ues-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 32px 40px; background: var(--ues-tint); border-radius: 20px; }
.ues-cta__title { font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; }
.ues-cta p { margin-top: 8px; font-size: 18px; color: var(--ues-body); }
.ues-cta__actions { display: flex; align-items: center; gap: 14px; flex: none; flex-wrap: wrap; }
.ues-cta__actions .ues-btn { min-height: 56px; font-size: 18px; }

/* ---------- Footer ---------- */
.ues-footer { background: var(--ues-navy); color: #F4F1EC; padding: 44px 0 28px; }
.ues-footer a { color: #C3CCD2; text-decoration: none; }
.ues-footer a:hover { color: #fff; }
.ues-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.ues-footer__brand { display: flex; flex-direction: column; gap: 16px; }
/* The logo's lettering is transparent, so it needs a light plate on the navy footer. */
.ues-footer__logo { display: inline-flex; align-self: flex-start; background: #fff; padding: 6px 12px; border-radius: 10px; }
.ues-footer__logo img { height: 44px; width: auto; display: block; }
.ues-footer__tagline { font-size: 15px; line-height: 1.55; color: #C3CCD2; max-width: 360px; }
.ues-footer__phone { font-family: var(--ues-font-display); font-size: 26px; font-weight: 700; color: #fff !important; }
.ues-social { display: flex; gap: 10px; }
.ues-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid #3A4C58; color: #F4F1EC; }
.ues-footer__col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.ues-footer__heading { color: #fff; font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.ues-footer__text { color: #C3CCD2; line-height: 1.5; }
.ues-paylist { display: flex; gap: 8px; flex-wrap: wrap; }
.ues-paylist span { padding: 6px 10px; border: 1px solid #3A4C58; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.ues-footer__legal { border-top: 1px solid #2A3C47; margin-top: 28px; padding-top: 20px; font-size: 13px; color: #8E9BA4; line-height: 1.5; display: flex; flex-direction: column; gap: 8px; }
.ues-footer__legal a { color: #C3CCD2; }
.ues-footer__bottom { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ues-footer__links { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- Legacy includes ---------- */

/* searchbox.php — included unchanged; its rows are label/input div pairs. */
.ues #searchform { background: #fff; border-radius: 20px; border: 1.5px solid var(--ues-line-soft); box-shadow: var(--ues-shadow); padding: 22px 26px 24px; height: auto !important; }
.ues #searchform .h3pad { margin-bottom: 4px; }
.ues #searchform h3.up { font-family: var(--ues-font-display); font-size: 26px; font-weight: 700; margin: 0; }
.ues #searchform .h3pad::after { content: "Complete the fields to check our inventory."; display: block; font-family: var(--ues-font-body); font-size: 16px; font-weight: 400; color: var(--ues-body); margin-top: 6px; }
.ues #searchform .searchpad { padding: 0; }
.ues #quoteform { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.ues #searchform .clear, .ues #searchform br.clearfloat { display: none; }
.ues #searchform .searchcontainerl { font-size: 14px; font-weight: 600; color: var(--ues-ink); margin-top: 6px; }
.ues #searchform .searchcontainerl br { display: none; }
.ues #searchform .quotesmall { font-weight: 400; color: var(--ues-muted); }
.ues #searchform .searchcontainerr { width: 100%; }
.ues #searchform .input-holder { display: block; }
/* The selects carry inline font styles from the old design; the !important entries override them. */
.ues #searchform select.list1, .ues #searchform input.list2, .ues #searchform input.cap-input {
  width: 100%; min-height: 46px; padding: 0 40px 0 14px; border: 1.5px solid #D6D1C8; border-radius: 10px; background-color: #fff;
  color: var(--ues-ink) !important; font-family: var(--ues-font-body) !important; font-size: 16px !important; font-weight: 500 !important;
  -webkit-appearance: none; appearance: none;
}
.ues #searchform select.list1 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2D37' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.ues #searchform input.list2, .ues #searchform input.cap-input { padding-right: 14px; }
.ues #searchform select.list1:focus, .ues #searchform input.list2:focus { border-color: var(--ues-orange); outline: none; box-shadow: 0 0 0 3px var(--ues-tint); }
.ues #searchform .cap-label { font-size: 14px; color: var(--ues-body); }
.ues #searchform .cap-input { max-width: 110px; }
.ues #searchform .g-captcha-container { margin: 12px 0 0 !important; width: auto !important; }
.ues #searchform .search-btn1, .ues #searchform #movesearchbtn { display: block; margin: 14px 0 0 !important; }
.ues #aSubmit { width: 100%; min-height: 52px; font-size: 18px; }
.ues #aSubmit::after { content: "→"; font-size: 20px; }
.ues #searchform::after { content: "Quote appears on screen and by email. No obligation."; display: block; margin-top: 10px; font-size: 14px; color: var(--ues-muted); text-align: center; }

/* enginelinks.php — a plain <ul> of make links, shown as chips. */
.ues-makes .enginelinks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ues-makes .enginelinks a { display: inline-block; padding: 10px 16px; border: 1.5px solid var(--ues-line); border-radius: 999px; background: #fff; color: var(--ues-ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.ues-makes .enginelinks a:hover { border-color: var(--ues-orange); color: var(--ues-orange-text); }

/* ---------- Responsive ---------- */
/* The masthead carries an eight-item nav plus a phone number and a cart button. Measured,
   that stops fitting at full size below ~1440px and does not fit at all below ~1200px, where the
   nav ran straight into the actions. So the links tighten first and the phone drops to an icon
   button; below that the whole nav gives way to the burger. */
@media (max-width: 1200px) {
  .ues-nav { display: none; }
  .ues-burger { display: inline-flex; }
}
@media (min-width: 1201px) and (max-width: 1520px) {
  .ues-nav a { font-size: 14px; padding: 10px 10px; }
  .ues-phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ues-phone { width: 46px; height: 46px; justify-content: center; gap: 0; border-radius: 12px; background: var(--ues-tint); }
}
@media (max-width: 1024px) {
  .ues-hero__in { grid-template-columns: minmax(0, 1fr) 460px; column-gap: 40px; }
  .ues-why { grid-template-columns: 1fr; gap: 40px; }
  .ues-about__in { grid-template-columns: 1fr; gap: 32px; }
  .ues-about__aside { position: static; }
  .ues-footer__grid { grid-template-columns: 1fr 1fr; }
  .ues-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --ues-header-h: 76px; }
  .ues-bar__in { justify-content: center; text-align: center; }
  .ues-bar__mid, .ues-bar__link { display: none; }
  .ues-logo img { height: 54px; }
  .ues-hero { padding: 28px 0 36px; }
  .ues-hero__in { grid-template-columns: 1fr; grid-template-areas: "copy" "quote" "more"; row-gap: 20px; }
  .ues-hero__img { flex: none; min-height: 0; aspect-ratio: 646 / 350; }
  .ues-hero__copy { padding-top: 0; gap: 16px; }
  .ues #searchform { padding: 22px 18px 24px; }
  .ues-trust__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-block: 24px; }
  .ues-trust__item { padding: 14px; border: 1.5px solid var(--ues-line-soft); border-radius: 14px; align-items: flex-start; flex-direction: column; gap: 10px; }
  .ues-trust__item:first-child { padding-left: 14px; border-left: 1.5px solid var(--ues-line-soft); }
  .ues-trust__icon { width: 40px; height: 40px; }
  .ues-section { padding: 40px 0; }
  .ues-section__head { flex-direction: column; align-items: flex-start; }
  .ues-section__head--center { align-items: center; }
  .ues-steps { grid-template-columns: 1fr; }
  .ues-reviews { grid-template-columns: 1fr; }
  .ues-reasons { grid-template-columns: 1fr; }
  .ues-cta { flex-direction: column; align-items: stretch; padding: 28px 22px; }
  .ues-cta__actions .ues-btn { width: 100%; }
  .ues-about__body { column-count: 1; }
}
@media (min-width: 1200px) {
  .ues-about__body { column-count: 2; column-gap: 40px; }
  .ues-about__body h3, .ues-about__body ul { break-inside: avoid; }
}
@media (max-width: 640px) {
  .ues-phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ues-phone { width: 48px; height: 48px; justify-content: center; border-radius: 12px; background: var(--ues-orange); color: #fff; }
  .ues-phone svg { color: #fff; }
  .ues-cart__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ues-cart { width: 48px; padding: 0; }
  .ues-actions { gap: 8px; }
  .ues-header__in { gap: 12px; }
  .ues-parts { gap: 10px; }
  .ues-part { padding: 12px; gap: 8px; }
  .ues-part__icon { height: 100px; }
  .ues-part__icon svg { width: 40px; height: 40px; }
  .ues-part h3 { font-size: 18px; }
  .ues-part p { font-size: 14px; }
  .ues-review, .ues-step { padding: 20px; }
  .ues-warranty { padding: 24px; }
  .ues-footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .ues-footer { padding: 44px 0 28px; }
}
@media (max-width: 480px) {
  .ues-bar { font-size: 14px; }
  .ues-hero__title { font-size: 38px; }
  .ues-makes .enginelinks a { padding: 9px 13px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  body.ues * { transition: none !important; scroll-behavior: auto !important; }
}