@charset "UTF-8";
/* theme/legacy.css — makes the untouched legacy page bodies render inside the new theme.
 *
 * Almost every page in this site shares one structure, inherited from the original design:
 *
 *   #outerwrapper > #outercontainer > #container
 *     #sliderleft        the quote form (searchbox.php)
 *     #mainimage         the page banner image
 *     #main
 *       #mainleft        sidebar: call-today, testimonials, free shipping, cards, social, links
 *       #mainright > .mainrightcenter > .mainpad   the page content
 *
 * Rewriting ~25 page bodies to new markup would be a large, risky diff through checkout and
 * warranty code for no visual gain, so instead this file restyles that structure into the
 * Storefront layout: a responsive content + sidebar grid, modern typography, and the legacy
 * float/spacer elements neutralised. Page bodies stay byte-identical, which also means the old
 * theme is completely unaffected — this file only loads when the new theme is active.
 *
 * Loaded by theme/head.php after theme.css. Delete it at cutover only together with the page
 * bodies it supports.
 */

/* ---------- Neutralise the old wrappers, spacers and float clears ---------- */
.ues #outerwrapper,
.ues #outercontainer { background: none !important; width: auto; min-width: 0; padding: 0; margin: 0; }
.ues .clear,
.ues br.clearfloat,
.ues .slidertoppad,
.ues #slidertop,
.ues #slidervertspacer,
.ues .maintopspacer,
.ues .mainrighttop,
.ues .mainrightbot,
.ues #sliderbg,
.ues .cus-slider-container,
.ues .cus-slider-container-mob { display: none !important; }

/* The theme renders its own footer; hide every legacy footer variant, inline or included. */
.ues #footer_bot,
.ues .contentleftbot,
.ues #nav,
.ues #p7PMnav,
.ues #dtmenu,
.ues #mobmenu,
.ues #logo,
.ues #reviews { display: none !important; }

/* ---------- Page shell ---------- */
.ues #container { width: 100%; max-width: var(--ues-max); margin-inline: auto; padding: 0 var(--ues-gutter); }
/* Block by default so pages with no sidebar columns (cart, checkout, order) simply flow.
   The two-column grid is opted into only when both columns are present; a browser without
   :has() support falls back to the same single-column stack, which is degraded but usable. */
.ues #main { display: block; padding: 32px 0 48px; width: auto; float: none; }
.ues #main:has(> #mainleft):has(> #mainright) {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start;
}
.ues #mainright { grid-column: 1; grid-row: 1; width: auto; float: none; margin: 0; padding: 0; background: none; }
.ues #mainleft { grid-column: 2; grid-row: 1; width: auto; float: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
/* Without the grid the sidebar follows the content; keep it from looking like a full-width block. */
.ues #mainleft { max-width: 100%; }
.ues .mainrightcenter,
.ues .mainpad,
.ues #margin1,
.ues .cushycms { width: auto; margin: 0; padding: 0; background: none; border: 0; float: none; }


/* ---------- Content typography ---------- */
.ues #mainright { font-size: 16px; line-height: 1.65; color: var(--ues-body); overflow-wrap: anywhere; }
/* Some pages print full URLs as link text (warranty.php prints the activation URL); without
   this they cannot wrap and push a horizontal scrollbar onto phones. */
.ues #mainright a { overflow-wrap: anywhere; }
.ues #mainright h1 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; letter-spacing: -.01em; margin: 0 0 16px; }
.ues #mainright h2 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; margin: 28px 0 12px; }
.ues #mainright h3 { font-size: 20px; font-weight: 700; margin: 22px 0 10px; }
.ues #mainright h4 { font-size: 18px; font-weight: 700; margin: 18px 0 8px; }
.ues #mainright p { margin: 0 0 14px; }
.ues #mainright ul,
.ues #mainright ol { margin: 0 0 16px; padding-left: 22px; }
.ues #mainright li { margin-bottom: 6px; }
.ues #mainright img { border-radius: 10px; height: auto; }
.ues #mainright hr { border: 0; border-top: 1px solid var(--ues-line); margin: 24px 0; }
.ues .redheading2 { color: var(--ues-orange-text); font-family: var(--ues-font-display); font-weight: 700; }
.ues .faqa { margin: 0 0 20px; padding: 0 0 20px; border-bottom: 1px solid var(--ues-line-soft); }
.ues .space-left { padding-left: 0; }
.ues .full-page { border: 1.5px solid var(--ues-line); border-radius: var(--ues-radius); padding: 28px; margin: 0; }

/* Legacy tables — the content pages use them for specs, warranty terms and order summaries. */
.ues #mainright table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.ues #mainright th,
.ues #mainright td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ues-line-soft); vertical-align: top; }
.ues #mainright th { font-family: var(--ues-font-display); font-weight: 700; color: var(--ues-ink); }
/* Layout tables (no border attribute set to 1) must not inherit the grid look. */
.ues #mainright table[cellspacing="0"][border="0"] td,
.ues #mainright table[border="0"] td { border-bottom: 0; padding: 2px 4px; }

/* Legacy form controls anywhere in the page body. */
.ues #mainright input[type="text"],
.ues #mainright input[type="email"],
.ues #mainright input[type="tel"],
.ues #mainright input[type="number"],
.ues #mainright input[type="password"],
.ues #mainright select,
.ues #mainright textarea {
  font: 500 16px var(--ues-font-body); color: var(--ues-ink); background: #fff;
  border: 1.5px solid #D6D1C8; border-radius: 10px; padding: 11px 14px; max-width: 100%;
}
.ues #mainright textarea { min-height: 120px; }
.ues #mainright input[type="submit"],
.ues #mainright button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 12px; background: var(--ues-orange); color: #fff; cursor: pointer;
  font: 700 16px var(--ues-font-display);
}
.ues #mainright input[type="submit"]:hover,
.ues #mainright button[type="submit"]:hover { background: var(--ues-orange-dark); }

/* ---------- The quote form when it appears in a page body ---------- */
.ues #sliderleft { margin: 24px 0 0; max-width: 520px; }
.ues #searchform { width: auto !important; background-image: none; }

/* ---------- Page banner image ---------- */
.ues #mainimage { margin: 20px 0 0; }
/* The banner images are 646x350; full-bleed would upscale them 2x. Cap the height and crop. */
.ues #mainimage img { display: block; width: 100%; max-width: 100%; height: auto; max-height: 320px; object-fit: cover; object-position: center; border-radius: var(--ues-radius); }

/* ---------- Sidebar cards ---------- */
.ues #mainleft > div { width: auto !important; float: none; }
.ues #mainleft .calltoday,
.ues #mainleft .testimonials,
.ues #mainleft .reviewbuzz {
  background: #fff; border: 1.5px solid var(--ues-line); border-radius: var(--ues-radius);
  padding: 18px 20px; margin: 0; height: auto; background-image: none;
}
.ues #mainleft .calltoday { background: var(--ues-tint); border-color: #F6D9CB; text-align: center; }
.ues #mainleft .calltodaystyle1 { font-family: var(--ues-font-display); font-size: 18px; font-weight: 700; color: var(--ues-ink); padding: 0; }
.ues #mainleft .calltodaystyle1 h2 { font-size: 26px; margin: 6px 0 0; color: var(--ues-ink); }
.ues #mainleft .calltodaystyle2 { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--ues-orange-text); padding: 0; }
.ues #mainleft .testimonials { font-size: 15px; line-height: 1.55; color: var(--ues-body); }
.ues #mainleft .testimonialspad { padding: 0; }
.ues #mainleft .quotel,
.ues #mainleft .quoter { display: none; }
.ues #mainleft .reviewbuzz { cursor: pointer; }
.ues #mainleft .reviewbuzzstyle1 { font-family: var(--ues-font-display); font-weight: 700; color: var(--ues-ink); }
.ues #mainleft .freeshipping,
.ues #mainleft .cc,
.ues #mainleft .video { margin: 0; text-align: center; }
.ues #mainleft .freeshipping img,
.ues #mainleft .cc img { width: 100%; height: auto; max-width: 320px; border-radius: var(--ues-radius); }
.ues #mainleft .socialmedia { margin: 0; }
.ues #mainleft .socialmedia table { margin: 0 auto; }
.ues #mainleft .socialmedia img { height: 32px; width: auto; border-radius: 0; }

/* Engine make links: chips, in the sidebar and in page bodies alike. */
.ues .enginelinks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ues .enginelinks a {
  display: inline-block; padding: 8px 13px; border: 1.5px solid var(--ues-line); border-radius: 999px;
  background: #fff; color: var(--ues-ink); text-decoration: none; font-weight: 600; font-size: 14px;
}
.ues .enginelinks a:hover { border-color: var(--ues-orange); color: var(--ues-orange-text); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .ues #main:has(> #mainleft):has(> #mainright) { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ues #mainright { grid-column: 1; grid-row: 1; }
  .ues #mainleft { grid-column: 1; grid-row: 2; }
  .ues #mainleft .freeshipping img,
  .ues #mainleft .cc img { max-width: 260px; }
}
@media (max-width: 640px) {
  .ues #main { padding: 24px 0 36px; }
  .ues #sliderleft #searchform,
  .ues #mainleft #searchform { padding: 20px 16px 22px; }
  .ues #mainright { font-size: 16px; }
  /* Legacy pages hardcode pixel widths inline; stop them forcing a horizontal scrollbar. */
  .ues #mainright table,
  .ues #mainright img,
  .ues #mainright div,
  .ues #mainright p,
  .ues #mainright iframe,
  .ues #mainright fieldset,
  .ues #mainright form,
  .ues #mainright select,
  .ues #mainright input,
  .ues #mainright textarea { max-width: 100% !important; }
  .ues #mainright table { display: block; overflow-x: auto; }
}

/* ---------- Quote results (getprice.php, classic single-price layout) ----------
 * The classic results markup is float-based with hardcoded pixel widths inline. It is shared
 * with the cart/checkout flow and is not worth rewriting, so the widths are relaxed and the
 * price/Add-to-cart pair becomes a flex row that wraps on small screens.
 */
.ues #mainright.get-price-main { width: auto; float: none; }
.ues .multiprice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; width: auto !important; padding: 16px 0; }
.ues .priceblock {
  font-family: var(--ues-font-display); font-size: clamp(26px, 3vw, 34px); font-weight: 700;
  color: var(--ues-ink); width: auto !important; float: none; line-height: 1.2;
}
.ues .addtocartblock { width: auto !important; float: none; max-width: 260px; flex: none; }
.ues .addtocartblock img.add-cart-btn { width: 100% !important; height: auto; border-radius: 10px; }
.ues .lmline { width: auto !important; border-top-color: var(--ues-line) !important; }
.ues .key_points { background: var(--ues-panel); border-radius: var(--ues-radius); padding: 18px 20px; margin: 0 0 20px; }
.ues .key_points ul { margin: 0; padding-left: 20px; }
.ues .right-holder { width: auto !important; float: none; }
.ues .mpe, .ues .text-muted { color: var(--ues-muted) !important; }

/* ---------- Bootstrap grid shim (cart, checkout, order, warranty portal) ----------
 * Those flows are laid out with Bootstrap grid/utility classes, and the old <head> pulled in a
 * Bootstrap 5 beta stylesheet from a CDN. The new theme does not load Bootstrap — its reboot
 * would fight the theme's own type and colours — so the handful of classes those pages actually
 * use are reimplemented here. Nothing outside this block depends on them.
 * Breakpoints match Bootstrap's: sm 576px, md 768px.
 */
/* No negative margins: Bootstrap pairs them with a padded .container ancestor, and in this
   markup .row also turns up inside wrappers that have none, which pushed a horizontal
   scrollbar onto phones. The cost is 12px of extra inset at the outer edges. */
.ues .row { display: flex; flex-wrap: wrap; margin-left: 0; margin-right: 0; }
.ues [class*="col-"], .ues .col, .ues .col-md { padding-left: 12px; padding-right: 12px; width: 100%; box-sizing: border-box; }
.ues .col, .ues .col-md { flex: 1 0 0%; width: auto; }
.ues .col-xs-12 { width: 100%; }
@media (min-width: 576px) {
  .ues .col-sm-1 { width: 8.3333%; } .ues .col-sm-2 { width: 16.6667%; } .ues .col-sm-3 { width: 25%; }
  .ues .col-sm-4 { width: 33.3333%; } .ues .col-sm-5 { width: 41.6667%; } .ues .col-sm-6 { width: 50%; }
  .ues .col-sm-7 { width: 58.3333%; } .ues .col-sm-8 { width: 66.6667%; } .ues .col-sm-9 { width: 75%; }
  .ues .col-sm-10 { width: 83.3333%; } .ues .col-sm-11 { width: 91.6667%; } .ues .col-sm-12 { width: 100%; }
}
@media (min-width: 768px) {
  .ues .col-md-1 { width: 8.3333%; } .ues .col-md-2 { width: 16.6667%; } .ues .col-md-3 { width: 25%; }
  .ues .col-md-4 { width: 33.3333%; } .ues .col-md-5 { width: 41.6667%; } .ues .col-md-6 { width: 50%; }
  .ues .col-md-7 { width: 58.3333%; } .ues .col-md-8 { width: 66.6667%; } .ues .col-md-9 { width: 75%; }
  .ues .col-md-10 { width: 83.3333%; } .ues .col-md-11 { width: 91.6667%; } .ues .col-md-12 { width: 100%; }
}
.ues .table-responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ues .img-responsive { display: block; max-width: 100%; height: auto; }
.ues .text-center { text-align: center; }
.ues .text-right { text-align: right; }
.ues .text-left { text-align: left; }
.ues .alert { position: relative; padding: 14px 18px; margin-bottom: 16px; border: 1.5px solid transparent; border-radius: 12px; font-size: 16px; line-height: 1.5; }
.ues .alert-success { color: #17532B; background: #E7F6EC; border-color: #B7E2C6; }
.ues .alert-warning { color: #6B4A00; background: #FFF6E0; border-color: #F3DFA8; }
.ues .alert-danger  { color: #7A1C10; background: #FDEBE8; border-color: #F3C2BA; }
.ues .alert-info    { color: #10405A; background: #E7F2F8; border-color: #B7D8E8; }
.ues .alert .close {
  position: absolute; top: 8px; right: 12px; padding: 4px 8px; border: 0; background: transparent;
  font-size: 22px; line-height: 1; font-weight: 700; color: inherit; opacity: .6; cursor: pointer;
}
.ues .alert .close:hover { opacity: 1; }
.ues .form-group { margin-bottom: 16px; }
.ues .form-control {
  display: block; width: 100%; min-height: 46px; padding: 10px 14px; box-sizing: border-box;
  font: 500 16px var(--ues-font-body); color: var(--ues-ink); background: #fff;
  border: 1.5px solid #D6D1C8; border-radius: 10px;
}
.ues .form-control:focus { border-color: var(--ues-orange); outline: none; box-shadow: 0 0 0 3px var(--ues-tint); }
.ues .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px;
  padding: 0 20px; border: 0; border-radius: 12px; cursor: pointer; text-decoration: none;
  font: 700 16px var(--ues-font-display); background: var(--ues-panel); color: var(--ues-ink);
}
.ues .btn-primary, .ues .btn-success { background: var(--ues-orange); color: #fff; }
.ues .btn-primary:hover, .ues .btn-success:hover { background: var(--ues-orange-dark); color: #fff; }
.ues .btn-default, .ues .btn-secondary { background: #fff; color: var(--ues-ink); border: 1.5px solid #D6D1C8; }
.ues .btn-danger { background: #C43A26; color: #fff; }
/* `req` marks required-field labels in checkout. */
.ues .req { color: var(--ues-orange-text); font-weight: 700; }

/* ---------- Order page (order.php) ---------- */
.ues #logo2 { display: none !important; }
.ues #orderright { width: auto !important; float: none; margin: 24px 0 0; }
.ues #orderright iframe { display: none; }   /* dead Google +1 button */

/* ---------- Engine links inside the sidebar ----------
 * enginelinks.php lists ~40 makes. As chips in a 320px column that ran to ~900px and dwarfed
 * the page content, so in the sidebar they become a compact two-column text list instead.
 * Everywhere else (page bodies, the homepage) they stay chips.
 */
.ues #mainleft .enginelinks ul { display: block; column-count: 2; column-gap: 16px; }
.ues #mainleft .enginelinks li { break-inside: avoid; margin: 0; }
.ues #mainleft .enginelinks a {
  display: block; padding: 4px 0; border: 0; border-radius: 0; background: none;
  font-size: 14px; font-weight: 500; color: var(--ues-body);
}
.ues #mainleft .enginelinks a:hover { color: var(--ues-orange-text); background: none; }
.ues #mainleft .freeshipping img { max-width: 240px; }

/* A <fieldset> defaults to min-inline-size: min-content, so it refuses to shrink below its
   widest child and pushes a scrollbar onto phones (contact.php's form does exactly this). */
.ues fieldset { min-inline-size: 0; min-width: 0; }

/* shippingdelay.php hardcodes min-width:400px inline on its wrapper, which is wider than a
   small phone. Overridden here rather than editing the page, so its body stays untouched. */
@media (max-width: 640px) {
  .ues #container_ { min-width: 0 !important; }
}

/* ---------- Content pages: put the page content beside the quote form ----------
 * These pages open #container with the quote form, and the old design filled the space to its
 * right with the nivo slider. The slider is gone in this theme, so that space was left blank
 * and the page content began below the form.
 *
 * Two markup shapes exist: #container > #sliderleft directly (about, warranty, contact, faq,
 * …) and #container > .row > .cus-srch-container > #sliderleft (all-used-engines,
 * used-engines). Both are handled the same way: #main is dissolved with display:contents so
 * its two columns join the page, then the form and the sidebar furniture are floated into a
 * narrow left column while the banner and the content take the rest.
 *
 * Floats rather than a grid on purpose. The content column is often far taller than the form
 * (warranty.php runs to ~12,000px), and in a grid the tall item's height is distributed across
 * the rows it spans, which pushed the sidebar thousands of pixels down the page. Floats let
 * the two columns flow independently, which is exactly what this layout needs.
 */
.ues #container:has(#sliderleft):has(#main) { display: flow-root; padding-block: 28px 48px; }
/* Shape C (used-engines.php) puts #main inside the SAME .row as the form, so the row is
 * dissolved too and both columns end up as siblings, exactly as in shapes A and B. Without
 * this the row -- page content and all -- was floated into the 360px left column. */
.ues #container:has(#sliderleft):has(#main) > .row:has(#sliderleft):has(#main) { display: contents; }
.ues #container:has(#sliderleft):has(#main) > #main,
.ues #container:has(#sliderleft):has(#main) > .row:has(#sliderleft):has(#main) > #main { display: contents; }

/* Left column: the quote form, then the sidebar furniture beneath it. */
.ues #container:has(#sliderleft):has(#main) > #sliderleft,
.ues #container:has(#sliderleft):has(#main) > .row:has(#sliderleft):not(:has(#main)),
.ues #container:has(#sliderleft):has(#main) > .row:has(#sliderleft):has(#main) > .cus-srch-container:has(#sliderleft),
.ues #container:has(#sliderleft):has(#main) #mainleft {
  float: left; clear: left; width: 360px; max-width: 100%; margin: 0 0 24px;
}
/* Right column: banner and content. flow-root keeps them clear of the float instead of
 * wrapping their text around it.
 *
 * Descendant selectors, not child ones: display:contents changes how .row RENDERS but not
 * where its children sit in the DOM, so on shape C #mainimage is still a child of .row and a
 * '>' combinator never reaches it -- which left the banner full width under the form. */
.ues #container:has(#sliderleft):has(#main) #mainimage,
.ues #container:has(#sliderleft):has(#main) #mainright {
  display: flow-root; margin-left: 400px; margin-bottom: 24px;
}
/* Shape B nests the form two levels down; let those wrappers fill the column. */
.ues #container:has(#sliderleft) .cus-srch-container { max-width: none; padding: 0; }
.ues #container:has(#sliderleft) .row:has(#sliderleft):not(:has(#main)) .cus-srch-container { width: 100%; }
.ues #container:has(#sliderleft) .row:has(#sliderleft):not(:has(#main)) { display: block; }

@media (max-width: 1024px) {
  /* One column: form, banner, content, then the sidebar furniture. */
  .ues #container:has(#sliderleft):has(#main) > #sliderleft,
  .ues #container:has(#sliderleft):has(#main) > .row:has(#sliderleft):not(:has(#main)),
  .ues #container:has(#sliderleft):has(#main) > .row:has(#sliderleft):has(#main) > .cus-srch-container:has(#sliderleft),
  .ues #container:has(#sliderleft):has(#main) #mainleft { float: none; width: auto; }
  .ues #container:has(#sliderleft):has(#main) #mainimage,
  .ues #container:has(#sliderleft):has(#main) #mainright { margin-left: 0; }
}

/* ---------- Cart table (common/cart.include.php) ----------
 * The <th width=…> attributes add up to 122%, so browsers squeeze the last columns down to
 * ~50px: the Total and Action columns collided and the Remove button, which floats right with
 * a 20px margin, ended up drawn on top of the line total. Dropping the attribute widths lets
 * the table size itself from its content.
 */
.ues .tablec { width: 100%; border-collapse: collapse; }
.ues .tablec th,
.ues .tablec td { width: auto !important; padding: 12px 10px; vertical-align: middle; border-bottom: 1px solid var(--ues-line-soft); }
.ues .tablec thead th { font-family: var(--ues-font-display); font-weight: 700; color: var(--ues-ink); border-bottom: 2px solid var(--ues-line); white-space: nowrap; }
.ues .tablec td:nth-child(5),
.ues .tablec td:nth-child(6),
.ues .tablec td:nth-child(7) { white-space: nowrap; }
.ues .tablec td:last-child { text-align: right; white-space: nowrap; }
/* The Remove control floats right inline; let the cell do the alignment instead. */
.ues .tablec td:last-child img,
.ues .tablec td:last-child image { float: none !important; margin: 0 !important; max-width: 90px; height: auto; }
/* The product thumbnail is emitted at whatever size the yard supplied. */
.ues .tablec td:nth-child(2) img { max-width: 110px; height: auto; border-radius: 8px; }

/* The totals rows are four cells wide on purpose: the Clear Cart / Checkout buttons sit beside
   them in a cell that spans the remaining four columns and five rows. So the table layout is
   left alone here — the label is simply right-aligned so it sits next to its amount instead of
   being stranded at the far left of a very wide cell. */
.ues .tablec tfoot td { border-bottom: 0; }
.ues .tablec tfoot td:first-child { text-align: right; padding-right: 18px; }
.ues .tablec tfoot .hidbtn { text-align: right; vertical-align: bottom; }
.ues .tablec input[type="image"] { max-width: 100%; height: auto; }

/* ---------- "Optional Products" block on the cart page ----------
 * Its columns carry both a numbered class and the bare auto-width one (class="col-md-2 col-md"),
 * and the bare rule made them grow, blowing the 10% image column up to half the page. Numbered
 * columns must not grow — that is Bootstrap's own behaviour and it restores the inline widths.
 */
.ues [class*="col-sm-"],
.ues [class*="col-md-"],
.ues [class*="col-lg-"] { flex: 0 0 auto; }
.ues .hideoptional + form .row,
.ues form.hideoptional .row { align-items: flex-start; }
.ues form.hideoptional .col-md-10 { display: flex; flex-wrap: wrap; }
.ues form.hideoptional img.img-responsive { max-width: 140px; height: auto; border-radius: 8px; }

/* ---------- Checkout form (common/checkout.include.php) ----------
 * Every row is a bare <fieldset>, which the browser draws with its default groove border — the
 * "grid lines" across the page. The old stylesheet reset them; this one has to as well. The
 * label/control pair then becomes a flex row so the inputs line up in one column.
 */
.ues fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.ues fieldset:has(> label.w20) {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  padding: 9px 0; border-bottom: 1px solid var(--ues-line-soft);
}
.ues label.w20 { flex: 0 0 260px; max-width: 100%; font-weight: 600; color: var(--ues-ink); }
.ues fieldset input[type="text"],
.ues fieldset input[type="email"],
.ues fieldset input[type="tel"],
.ues fieldset input[type="password"],
.ues fieldset select,
.ues fieldset textarea {
  max-width: 100%; min-height: 44px; padding: 9px 12px; box-sizing: border-box;
  font: 500 16px var(--ues-font-body); color: var(--ues-ink); background: #fff;
  border: 1.5px solid #D6D1C8; border-radius: 10px;
}
.ues fieldset input:focus,
.ues fieldset select:focus,
.ues fieldset textarea:focus { border-color: var(--ues-orange); outline: none; box-shadow: 0 0 0 3px var(--ues-tint); }
.ues .breckline { border-top: 1px solid var(--ues-line); margin: 26px 0 6px; height: 0 !important; }
.ues h2.big { font-family: var(--ues-font-display); font-weight: 700; color: var(--ues-ink); margin: 26px 0 10px; }

@media (max-width: 640px) {
  .ues label.w20 { flex-basis: 100%; }
  .ues fieldset input[type="text"],
  .ues fieldset select { width: 100% !important; }

}

@media (max-width: 767px) {
  /* The Optional Products row pairs an inline width:10% image column with a sibling that is
     full width below the md breakpoint, so the row added up to 110% and pushed the page wide.
     Stack the block instead. */
  .ues form.hideoptional .row,
  .ues form.hideoptional .col-md-10 { display: block; }
  .ues form.hideoptional [class*="col-"] { width: auto !important; max-width: 100%; }
  .ues form.hideoptional img.img-responsive { max-width: 120px; }
}

/* ---------- Cart action buttons ----------
 * Checkout and Clear Cart ship as bitmaps (checkout.png / clear_cart.png). cart.include.php
 * emits real buttons instead when this theme is active, so Checkout can carry the weight it
 * should have as the page's primary action. Both still float right, which puts Checkout — first
 * in the markup — on the right where the primary action belongs.
 */
.ues .ues-cartbtn {
  display: inline-flex; align-items: center; justify-content: center;
  float: right; margin: 0 0 0 12px; border: 0; cursor: pointer; text-decoration: none;
  min-height: 58px; padding: 0 40px; border-radius: 12px;
  font-family: var(--ues-font-display); font-size: 20px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap; transition: background-color .15s, box-shadow .15s;
}
.ues .ues-cartbtn--primary { background: var(--ues-orange); color: #fff !important; box-shadow: 0 10px 22px rgba(255, 76, 0, .28); }
.ues .ues-cartbtn--primary:hover { background: var(--ues-orange-dark); color: #fff !important; box-shadow: 0 12px 26px rgba(255, 76, 0, .34); }
.ues .ues-cartbtn--ghost {
  background: #fff; color: var(--ues-body) !important; border: 1.5px solid #D6D1C8;
  min-height: 50px; padding: 0 22px; font-size: 16px;
}
.ues .ues-cartbtn--ghost:hover { border-color: var(--ues-ink); color: var(--ues-ink) !important; }
/* The cell holds a bare link plus a form; keep them on one line and clear of the totals. */
.ues .hidbtn, .ues .visbtn { padding-bottom: 8px; }
.ues .hidbtn > form, .ues .visbtn > form { display: inline; }
.ues .hidbtn::after, .ues .visbtn::after { content: ""; display: block; clear: both; }

@media (max-width: 640px) {
  .ues .ues-cartbtn { float: none; display: flex; width: 100%; margin: 8px 0 0; }
  .ues .ues-cartbtn--primary { order: -1; }
}

/* ---------- Checkout: input widths and small-screen containment ----------
 * The inputs carry inline widths (240-278px) sized for the old fixed-width layout, which leaves
 * them looking cramped in the wider column this theme gives them. Let them grow to fill the row
 * instead. Desktop only — below 641px they go full width via the rule further up.
 */
@media (min-width: 641px) {
  .ues fieldset:has(> label.w20) > input[type="text"],
  .ues fieldset:has(> label.w20) > input[type="email"],
  .ues fieldset:has(> label.w20) > input[type="tel"],
  .ues fieldset:has(> label.w20) > input[type="password"],
  .ues fieldset:has(> label.w20) > select,
  .ues fieldset:has(> label.w20) > textarea {
    flex: 1 1 380px; width: auto !important; max-width: 620px;
  }
}

@media (max-width: 767px) {
  /* The payment-mode boxes are hardcoded to width:560px and the page only relaxes that below
     500px, so between 501 and 767px they pushed a horizontal scrollbar onto the page. */
  .ues #p1, .ues #p2 { width: auto !important; }
  /* Belt and braces for the rest of the form: it is full of inline pixel widths sized for a
     desktop layout, and any one of them overflowing makes the whole page scroll sideways. */
  .ues #orderform,
  .ues #orderform * { max-width: 100% !important; }
  .ues #orderform img { height: auto; }
}

@media (max-width: 1024px) {
  /* Between the phone breakpoint and the desktop layout the eight-column cart table still has
     to fit. The action cell's two side-by-side buttons were the widest thing holding it open,
     so they stack; the table can then shrink to the viewport. */
  .ues .tablec .ues-cartbtn { float: none; display: flex; width: 100%; margin: 8px 0 0; }
  .ues .tablec .hidbtn, .ues .tablec .visbtn { min-width: 170px; }
  .ues .tablec td:nth-child(2) img { max-width: 76px; }
}


@media (max-width: 1024px) {
  /* An eight-column cart table does not fit below the desktop layout. Scrolling it sideways buried the Checkout
     button inside the scroller, so each row becomes a card instead and the totals and buttons
     sit underneath at full width. The header row is dropped, so the cells that are not
     self-describing get their label back with ::before. */
  .ues .tablec { display: block; overflow: visible; white-space: normal; }
  .ues .tablec thead { display: none; }
  .ues .tablec tbody,
  .ues .tablec tbody tr,
  .ues .tablec tbody td,
  .ues .tablec tfoot,
  .ues .tablec tfoot tr,
  .ues .tablec tfoot td { display: block; width: auto !important; }
  .ues .tablec tbody tr { border: 1.5px solid var(--ues-line); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
  .ues .tablec tbody td { border-bottom: 0; padding: 5px 0; text-align: left; }
  .ues .tablec tbody td:empty { display: none; }
  .ues .tablec tbody td::before { font-weight: 700; color: var(--ues-ink); }
  .ues .tablec tbody td:nth-child(1)::before { content: "Quote #: "; }
  .ues .tablec tbody td:nth-child(4)::before { content: "Quantity: "; }
  .ues .tablec tbody td:nth-child(5)::before { content: "Price: "; }
  .ues .tablec tbody td:nth-child(6)::before { content: "Core: "; }
  .ues .tablec tbody td:nth-child(7)::before { content: "Total: "; }
  .ues .tablec tbody td:last-child { text-align: left; padding-top: 10px; }
  .ues .tablec tfoot td { padding: 4px 0; }
  .ues .tablec tfoot td:first-child { text-align: left; padding-right: 0; }
  .ues .tablec .hidbtn, .ues .tablec .visbtn { padding-top: 14px; }
  /* The button row comes first in the markup; stacked, the total should be read before acting. */
  .ues .tablec tfoot { display: flex; flex-direction: column; }
  .ues .tablec tfoot tr:has(.hidbtn),
  .ues .tablec tfoot tr:has(.visbtn) { order: 2; }
}

/* ---------- Contact form (contact.php) ----------
 * The markup is a stack of bare <fieldset>s holding an inline <label> and an unsized control,
 * so without these rules the label and the box sit on one line and every input renders at the
 * browser's default ~177px regardless of how much room the column has.
 *
 * Scoped to #contact-form so it cannot reach the checkout fieldsets above, which lay their
 * label/control pairs out side by side via label.w20 and must keep doing so.
 */
.ues #contact-form { max-width: 620px; margin-top: 16px; }
.ues #contact-form fieldset { display: block; border: 0; margin: 0 0 18px; padding: 0; }
.ues #contact-form label {
  display: block; margin-bottom: 7px;
  font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--ues-ink);
}
/* The captcha sits inside a <label> of its own and carries its own row markup. */
.ues #contact-form label:has(table) { font-weight: 400; }
.ues #contact-form input[type="text"]:not(.cap-input),
.ues #contact-form select,
.ues #contact-form textarea { display: block; width: 100%; box-sizing: border-box; }
.ues #contact-form textarea { min-height: 160px; line-height: 1.5; resize: vertical; }
.ues #contact-form small { display: block; margin-top: 8px; color: var(--ues-muted); font-size: 13px; }

/* Captcha row: the digits are images, so they need a baseline that matches the text around
   them, and the answer box should read as one of the form's inputs rather than a bare cell. */
.ues #contact-form .cap-img { width: 30px; height: auto; vertical-align: middle; border-radius: 4px; }
.ues #contact-form table { margin: 2px 0 0; border-collapse: collapse; }
.ues #contact-form table td { padding: 0; vertical-align: middle; font-size: 15px; color: var(--ues-ink); }
.ues #contact-form .cap-strong { color: var(--ues-ink); }
.ues #contact-form .cap-input {
  width: 62px !important; margin: 0 !important; min-height: 44px; text-align: center;
}

/* <input type="button"> gets none of the anchor-based .ues-btn styling the rest of the site
   uses, so it is restated here rather than changing the markup's event wiring. */
.ues #contact-form input[type="button"] {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 38px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--ues-orange); color: #fff;
  font-family: var(--ues-font-display); font-size: 16px; font-weight: 700;
  transition: background-color .15s;
}
.ues #contact-form input[type="button"]:hover { background: var(--ues-orange-dark); }

/* The intro copy above the form is a <p> full of <br> pairs plus a loose <b>; give it the same
   measure as the form so the two read as one block. .cushycms is the shared content wrapper on
   ~76 pages, so this is matched through the form it contains rather than on the class itself. */
.ues .cushycms:has(#contact-form) { max-width: 620px; }
.ues .cushycms:has(#contact-form) > b { display: block; margin: 20px 0 4px; font-size: 17px; color: var(--ues-ink); }

/* ---------- Replacement artwork for the new designs ----------
 * None of the old site's photographs or badges are reused here. The page bodies are legacy
 * markup inlined across ~50 files, so the images are swapped with content: url() rather than
 * edited in place -- one place to change, and ?theme=old keeps every original untouched.
 *
 * URLs resolve against THIS file, which lives in theme/, hence the leading ../.
 *
 * The artwork is deliberately palette-neutral steel. The shipped design is navy/orange and the
 * alternate one indigo/gold, and a single <img> cannot inherit either, so neutral is the only
 * thing that sits correctly against both. The logo is the exception and is picked per design.
 */

/* Page banners. Generic first, then the pages that deserve their own subject. */
.ues #mainimage img { content: url("../images/new/banner-engines.svg"); }
.ues #mainimage img[src*="warranty"] { content: url("../images/new/banner-trust.svg"); }
.ues #mainimage img[src*="about"],
.ues #mainimage img[src*="contact"],
.ues #mainimage img[src*="faq"] { content: url("../images/new/banner-support.svg"); }

/* Sidebar furniture. */
.ues .freeshipping img { content: url("../images/new/freeshipping.svg"); }
.ues img[src*="picts/cc.png"] { content: url("../images/new/cards.svg"); }

/* Old homepage slider stills, still rendered by a couple of page bodies. */
.ues img[src*="images/001"],
.ues img[src*="images/002"],
.ues img[src*="images/003"] { content: url("../images/new/banner-engines.svg"); }

/* Cart "Continue shopping" was hotlinked from other MWE sites' servers
   (engine-transmission.com, remanns.com). Local now, and on-theme. */
.ues img[src*="continue.png"],
.ues img[src*="tran01.png"] { content: url("../images/new/continue.svg"); }

/* The legacy social badges are the previous site's branded artwork, and the new footer already
   carries its own icons, so the block is dropped rather than redrawn. */
.ues table.socialmedialeft { display: none; }

/* Any legacy chrome still pointing at the old logo PNG; v2.css swaps this for its own mark. */
.ues img[src*="picts/logo.png"] { content: url("../picts/logo-new.svg"); }

/* A few page bodies (privacy, sitemap, thanks, ...) still submit the quote form with the old
 * picts/search-button.jpg image instead of the themed control searchbox.php emits. Swapping the
 * picture would mean baking in a brand colour, and the two designs disagree on what that is --
 * so the image is dropped and its anchor becomes a real button, which reads the tokens. */
.ues .search-btn1 a img[src*="search-button"] { display: none; }
.ues .search-btn1 a:has(img[src*="search-button"]) {
  display: inline-flex; align-items: center; justify-content: center;
  height: auto; min-height: 48px; padding: 0 24px; border-radius: var(--ues-radius-sm, 10px);
  background: var(--ues-orange); color: #fff; text-decoration: none;
  font-family: var(--ues-font-display); font-size: 16px; font-weight: 700;
}
.ues .search-btn1 a:has(img[src*="search-button"])::after { content: "Get my instant quote \2192"; }
.ues .search-btn1 a:has(img[src*="search-button"]):hover { background: var(--ues-orange-dark); color: #fff; }