/* ==========================================================================
   ALLPRO PACE 2 CUSTOM CSS
   Organized Oct 19, 2026 (Claude, for Evan). Same rules as before, grouped
   by area, with a label on every block. Dead code was removed.

   HOW TO ADD TO THIS FILE
   - Add new rules at the end of the section they belong to, in a labeled
     block that starts with a line like  === AllPro <what> (<who>, <Mon YYYY>) ===
     and ends with  === end <what> ===  (both inside CSS comments).
   - Phone-only rules go in SECTION 8. It comes last so it wins on phones.
   - CSS only: no style tags and no JavaScript here (JS goes in Custom JS).
   - Save a copy before big edits: SharePoint AllData > 3. PACE and Website
     Data > Design > CSS JAVA.

   CONTENTS (search for "SECTION 3" etc. to jump)
   1. Site-wide: nav bar, sub-bar, cart button, focus ring
   2. Info pages: Contact, Request Access, Reset Password, spacing, category pages
   3. Landing pages and the Spray Update page
   4. Home page, logged in: middle row, Pro Rebates, carousel, Spray Updates panel
   5. Home page, logged out
   6. Footer
   7. Catalog, product page and header search (Thomas): order buttons, prices,
      list view, Locations pop-up, product messages, kit lists
   8. Phones (max-width 767px)
   ========================================================================== */


/* ==========================================================================
   SECTION 1. SITE-WIDE: NAV BAR, SUB-BAR, CART BUTTON, FOCUS RING
   ========================================================================== */

/* AllPro nav — vertical dividers between top-level menu items */
#bottom-navbar.navbar .navbar-nav > li {
  border-left: 1px solid rgba(255,255,255,0.4) !important;
}
#bottom-navbar.navbar .navbar-nav > li:last-child {
  border-right: 1px solid rgba(255,255,255,0.4) !important;
}
/* AllPro sub-nav — dividers between all items + end cap after last */
#bottom-subnavbar .nav.navbar-nav > li + li {
  border-left: 1px solid rgba(0,0,0,0.18) !important;
}
/* Brands and Categories: red hover pill at rest, bar stays blue */
#bottom-navbar .navbar-nav > li:has(> a[href="catalog/brands"]),
#bottom-navbar .navbar-nav > li:has(> a[href="catalog/categories"]){
  margin:0;
  background:transparent!important;
  border-left-color:transparent!important;
  border-right-color:transparent!important;
}
#bottom-navbar a[href="catalog/brands"],
#bottom-navbar a[href="catalog/categories"],
#top-navbar a[href="catalog/brands"],
#top-navbar a[href="catalog/categories"]{
  display:inline-flex!important;
  align-items:center;
  height:auto;
  margin:0;
  padding:6px 12px;
  background:#C8102E!important;
  color:#fff!important;
  font-weight:700;
  border-radius:3px;
}
#bottom-navbar a[href="catalog/brands"]:hover,
#bottom-navbar a[href="catalog/categories"]:hover{
  background:#A50D26!important;
  color:#fff!important;
}

/* Cart nav button: hide the small duplicate FA cart icon (keep the SVG cart). Added 9/3 - EH */
#btn-view-orders-nav > i.fa-shopping-cart, #btn-view-orders-nav > svg.fa-shopping-cart { display: none !important; }

/* Subnav dividers: inset pseudo-elements instead of full-height borders (PACE 2.1.1 slimmed the bar) - EH 9/14 */
#bottom-subnavbar .nav.navbar-nav > li + li { border-left: 0 !important; position: relative; }
#bottom-subnavbar .nav.navbar-nav > li + li::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: rgba(0,0,0,.18); }
#bottom-subnavbar .nav.navbar-nav > li:last-child { border-right: 0 !important; position: relative; }
#bottom-subnavbar .nav.navbar-nav > li:last-child::after { content: ""; position: absolute; right: 0; top: 8px; bottom: 8px; width: 1px; background: rgba(0,0,0,.18); }

/* Locator nav icon (added 9/18/26). Suppressed: the JS shim draws the pin, so this ::before would double it. */
#bottom-navbar.navbar .navbar-nav > li > a[href*="locator"]::before,
#bottom-subnavbar .nav.navbar-nav > li > a[href*="location"]::before,
#bottom-navbar.navbar .navbar-nav > li > a[href*="location"]::before,
#bottom-subnavbar .nav.navbar-nav > li > a[href*="locator"]::before { content: none !important; }

/* === AllPro nav dropdowns: icon and label side by side, labels aligned (Claude, Sept 2026) === */
#bottom-navbar .dropdown-menu a:has(> i, > svg){justify-content:flex-start!important;gap:12px}
#bottom-navbar .dropdown-menu a > i,#bottom-navbar .dropdown-menu a > svg{width:20px;flex:0 0 20px;margin:0!important;text-align:center}
#bottom-navbar .dropdown-menu:has(a > i, a > svg) a:not(:has(> i, > svg)){display:flex!important;justify-content:flex-start!important;gap:12px}
#bottom-navbar .dropdown-menu:has(a > i, a > svg) a:not(:has(> i, > svg))::before{content:"";flex:0 0 20px;width:20px}
/* === end nav dropdowns === */

/* === AllPro navbar Brands and Categories pills (Claude, Oct 2026) ===
   White pills with AllPro blue text, same rounded shape as the phone
   button, with a divider on each side and equal 14px spacing. Overrides
   the red button rule above (kept in place). Delete this block to go
   back to the red buttons. === */
html body #bottom-navbar a[href="catalog/brands"],html body #bottom-navbar a[href="catalog/categories"],html body #top-navbar a[href="catalog/brands"],html body #top-navbar a[href="catalog/categories"]{display:inline-flex!important;align-items:center;background:#fff!important;color:#0057B8!important;font-weight:700!important;border-radius:999px!important;padding:6px 16px!important;margin:0!important;line-height:21px!important;box-shadow:0 1px 2px rgba(0,0,0,.18)!important;transition:none!important}
html body #bottom-navbar a[href="catalog/brands"]:hover,html body #bottom-navbar a[href="catalog/brands"]:focus,html body #bottom-navbar a[href="catalog/categories"]:hover,html body #bottom-navbar a[href="catalog/categories"]:focus,html body #top-navbar a[href="catalog/brands"]:hover,html body #top-navbar a[href="catalog/brands"]:focus,html body #top-navbar a[href="catalog/categories"]:hover,html body #top-navbar a[href="catalog/categories"]:focus{background:#EAF2FC!important;color:#0057B8!important}
html body #bottom-navbar .navbar-nav > li:has(> a[href="catalog/brands"]),html body #top-navbar .navbar-nav > li:has(> a[href="catalog/brands"]){border-left:1px solid rgba(255,255,255,.4)!important;padding:0 4px 0 14px!important;margin:0!important;transition:none!important}
html body #bottom-navbar .navbar-nav > li:has(> a[href="catalog/categories"]),html body #top-navbar .navbar-nav > li:has(> a[href="catalog/categories"]){border-left-color:transparent!important;padding:0 12px 0 4px!important;margin:0!important;transition:none!important}
/* === end AllPro navbar Brands and Categories pills === */

/* === AllPro navbar Brands and Categories beside the phone (Claude, Oct 2026) ===
   Moves Brands and Categories to the front of the bar, right after the
   phone pill, styled exactly like it (10px between the three pills, 14px
   to the divider). Overrides the white-pill block and Thomas's red rule
   above. Delete this block to go back to the white pills. === */
html body #bottom-navbar a[href="catalog/brands"],html body #bottom-navbar a[href="catalog/categories"],html body #top-navbar a[href="catalog/brands"],html body #top-navbar a[href="catalog/categories"]{display:inline-flex!important;align-items:center;background:rgba(255,255,255,.12)!important;color:#fff!important;font-size:14px!important;font-weight:600!important;line-height:18.2px!important;border:1px solid rgba(255,255,255,.32)!important;border-radius:999px!important;padding:6.3px 14.7px!important;margin:0!important;height:32.8px!important;box-sizing:border-box!important;box-shadow:0 1px 2px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.12)!important;transition:none!important}
html body #bottom-navbar a[href="catalog/brands"]:hover,html body #bottom-navbar a[href="catalog/brands"]:focus,html body #bottom-navbar a[href="catalog/categories"]:hover,html body #bottom-navbar a[href="catalog/categories"]:focus,html body #top-navbar a[href="catalog/brands"]:hover,html body #top-navbar a[href="catalog/brands"]:focus,html body #top-navbar a[href="catalog/categories"]:hover,html body #top-navbar a[href="catalog/categories"]:focus{background:rgba(255,255,255,.2)!important;border-color:rgba(255,255,255,.48)!important;color:#fff!important;box-shadow:0 2px 6px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.16)!important}
html body #bottom-navbar .navbar-nav > li:has(> a[href="catalog/brands"]),html body #top-navbar .navbar-nav > li:has(> a[href="catalog/brands"]),html body #bottom-navbar .navbar-nav > li:has(> a[href="catalog/categories"]),html body #top-navbar .navbar-nav > li:has(> a[href="catalog/categories"]){order:-1!important;border-left-color:transparent!important;margin:0!important;transition:none!important}
html body #bottom-navbar .navbar-nav > li:has(> a[href="catalog/brands"]),html body #top-navbar .navbar-nav > li:has(> a[href="catalog/brands"]){padding:0 3.5px 0 1px!important}
html body #bottom-navbar .navbar-nav > li:has(> a[href="catalog/categories"]),html body #top-navbar .navbar-nav > li:has(> a[href="catalog/categories"]){padding:0 12px 0 3.5px!important}
html body #bottom-navbar .nav-phone-slot,html body #top-navbar .nav-phone-slot{padding-right:0!important}
/* === end AllPro navbar Brands and Categories beside the phone === */

/* Dealer nav: one line at laptop widths, including 110% zoom (Oct 2026) */
@media (min-width: 992px) and (max-width: 1500px) {
  #bottom-navbar {
    position: relative;
    flex-wrap: nowrap !important;
    align-items: stretch;
    overflow: visible;
  }
  #bottom-navbar #nav-phone {
    flex: 0 0 auto;
  }
  #bottom-navbar #nav-links {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 96px;
    box-sizing: border-box;
  }
  #bottom-navbar #nav-links .navbar-nav {
    flex-wrap: nowrap !important;
  }
  #bottom-navbar .navbar-nav > li > a,
  #bottom-navbar .nav-link {
    padding-left: 5px !important;
    padding-right: 5px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
  #bottom-navbar .navbar-nav a > i,
  #bottom-navbar .navbar-nav a > svg,
  #bottom-navbar .ap-nav-ico {
    width: 12px !important;
    margin-right: 3px !important;
  }
  #bottom-navbar .nav-phone-link {
    padding: 5px 8px !important;
    font-size: 12px !important;
  }
  html body #bottom-navbar a[href="catalog/brands"],
  html body #bottom-navbar a[href="catalog/categories"] {
    padding: 3px 8px !important;
    font-size: 12px !important;
    height: auto !important;
  }
  html body #bottom-navbar .navbar-nav > li:has(> a[href="catalog/brands"]) {
    padding: 0 2px 0 1px !important;
  }
  html body #bottom-navbar .navbar-nav > li:has(> a[href="catalog/categories"]) {
    padding: 0 4px 0 2px !important;
  }
  #bottom-navbar #btn-view-orders-nav {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    white-space: nowrap;
  }
  #bottom-subnavbar .nav.navbar-nav {
    flex-wrap: nowrap !important;
  }
  #bottom-subnavbar .nav.navbar-nav > li > a {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }
}

/* Clean up cart left edge */
#btn-view-orders-nav,
#bottom-navbar .cart-btn,
a[href*="cart"].btn {
  border-left: 0 !important;
  border-radius: 0 !important;
  margin-left: 0 !important;
}
/* Cart refinements */
#btn-view-orders-nav,
#bottom-navbar .cart-btn,
a[href*="cart"].btn {
  gap: 8px !important;
  transition: background 0.15s ease;
}
#btn-view-orders-nav:hover,
#bottom-navbar .cart-btn:hover {
  background: #A50D26 !important;
}
#btn-view-orders-nav .badge,
#btn-view-orders-nav .cart-count,
#btn-view-orders-nav .cart-badge {
  background: #fff !important;
  color: #C8102E !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  min-width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  padding: 0 5px !important;
  border-radius: 9px !important;
  margin-left: 4px !important;
}


/* --- Signed-out nav: hide the extra login item (Thomas) --- */
#bottom-navbar #nav-unlogged { display: none !important; }

/* Restore the click focus ring PACE 1 has (Bootstrap 5 limits it to :focus-visible) - EH 9/10 */
a:focus, .btn:focus, button:focus, .ap-hb-hotspot:focus, .ap-gb-hotspot:focus, .ap-hotspot:focus { outline: 5px auto -webkit-focus-ring-color !important; outline-offset: 0; }


/* === AllPro blue nav on laptops (Claude for Evan, Oct 19, 2026). Under 1366px wide the menu ran under VIEW CART (About overlapped it at 1280). PACE sizes the links with --nav-link-padding-x-compact and --nav-link-font-size, so this narrows those as the screen narrows and drops the menu icons under 1280px. Fits from 992px up. === */
@media (min-width:992px) and (max-width:1365px){html body #bottom-navbar #nav-links{--nav-link-padding-x-compact:9px}}
@media (min-width:992px) and (max-width:1279px){html body #bottom-navbar #nav-links{--nav-link-padding-x-compact:8px}html body #bottom-navbar #nav-links a.nav-link > svg.ap-nav-ico{display:none!important}}
@media (min-width:992px) and (max-width:1199px){html body #bottom-navbar #nav-links{--nav-link-padding-x-compact:7px;--nav-link-font-size:13px}}
@media (min-width:992px) and (max-width:1099px){html body #bottom-navbar #nav-links{--nav-link-padding-x-compact:5px;--nav-link-font-size:12px}}
/* === end AllPro blue nav on laptops === */


/* ==========================================================================
   SECTION 2. INFO PAGES: CONTACT, REQUEST ACCESS, RESET PASSWORD, SPACING, CATEGORY PAGES
   ========================================================================== */


/* --- Custom pages: hide the platform page title and rule; hide the Contact hero (Thomas) --- */
.col-12 > h1:first-child,
.col-12 > h1:first-child + hr { display: none; }
.contact-us-hero { display: none; }

/* ============================================================
   Contact Us page (added 8/25/26)
   Hides PACE's built-in "Need a hand?" hero — redundant with the
   branded masthead in Pages > Contact Us content — and restyles
   the built-in card headings to match the AllPro design system.
   Remove this block to restore the stock look.
   ============================================================ */
.contact-us-page .contact-us-hero { display: none; }
.contact-us-card h2 {
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #15181D;
  padding-left: 13px;
  border-left: 4px solid #C8102E;
}
/* Contact Us page — stack "Talk with us first" + "Send a message"
   into the same 820px column as the branded content above
   (added 8/25/26) */
.contact-us-page .contact-us-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
.contact-us-page .contact-us-method-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-us-page .contact-us-method-item { margin: 0; }
@media (max-width: 640px) {
  .contact-us-page .contact-us-method-list { grid-template-columns: 1fr; }
}
/* "Talk with us first" card hidden — its phone/email are already
   covered by the General Inquiries panel in the page content.
   Delete this rule to bring the card back. (added 8/25/26) */
.contact-us-page .contact-us-card--summary { display: none; }
/* Contact Us page — breathing room above and below the
   "Send a message" card (added 8/25/26) */
.contact-us-page .contact-us-layout {
  margin-top: 55px; /* matches the 55px gap above the card boundary */
  margin-bottom: 64px;
}

/* === AllPro Contact page box: remove the border, shadow and rounded frame around the page (Claude, Sept 2026) === */
.contact-us-marketing:has(.ap-contactpg){border:0!important;box-shadow:none!important;border-radius:0!important;background:transparent!important}
/* === end Contact page box === */

/* === AllPro Request Access page (Claude, Sept 2026). Matches the About / Privacy / Terms design. Only affects /account/request-access. === */
.ap-ra{max-width:820px;margin:0 auto;padding:8px 20px 64px;font-family:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;font-size:17px;line-height:1.68;color:#414852;-webkit-font-smoothing:antialiased}
.ap-ra .ap-ra-hide{display:none!important}
.ap-ra-eyebrow{font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-weight:600;font-size:15px;line-height:1.68;letter-spacing:2.4px;text-transform:uppercase;color:#C8102E;margin:0 0 6px}
.ap-ra-h1{font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif!important;font-weight:700!important;font-size:54px!important;line-height:1.02!important;letter-spacing:-.54px;text-transform:uppercase;color:#15181D!important;margin:0 0 16px!important;text-align:left!important}
.ap-ra-stamp{display:inline-block;font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-weight:600;font-size:14px;line-height:1.68;letter-spacing:1.4px;text-transform:uppercase;color:#6B7482;background:#F5F7FA;border:1px solid #DDE2E8;border-radius:3px;padding:5px 12px;margin:0 0 22px}
.ap-ra-lede{text-wrap:balance;font-size:18.5px;line-height:1.62;margin:0 0 18px;color:#414852}
.ap-ra-note{text-wrap:balance;background:#F5F7FA;border-left:4px solid #2B4A94;border-radius:0 3px 3px 0;padding:16px 20px;font-size:16.5px;line-height:1.6;margin:0 0 8px;color:#414852}
.ap-ra-note strong{color:#15181D}
.ap-ra a{color:#2B4A94;text-decoration:underline;text-underline-offset:3px}
.ap-ra a:hover{color:#1B2F5E}
.ap-ra form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:18px;margin:0}
.ap-ra form>*{grid-column:1/-1}
.ap-ra form>input:not([type="submit"]){display:none!important}
.ap-ra form>:is(.form-group,.row):has([name="request[first_name]"]),.ap-ra form>:is(.form-group,.row):has([name="request[last_name]"]),.ap-ra form>:is(.form-group,.row):has([name="request[email]"]),.ap-ra form>:is(.form-group,.row):has([name="request[phone]"]),.ap-ra form>:is(.form-group,.row):has([name="request[custom-20]"]),.ap-ra form>:is(.form-group,.row):has([name="request[custom-21]"]){grid-column:auto}
.ap-ra-h2{font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif!important;font-weight:700!important;font-size:30px!important;line-height:1.18!important;letter-spacing:.3px;text-transform:uppercase;color:#15181D!important;border-left:4px solid #C8102E;padding:0 0 0 15px!important;margin:38px 0 4px!important}
.ap-ra form>:is(.form-group,.row){margin:0!important;display:block!important;--bs-gutter-x:0}
.ap-ra form>:is(.form-group,.row):before,.ap-ra form>:is(.form-group,.row):after{display:none!important}
.ap-ra form>:is(.form-group,.row)>[class*="col-"],.ap-ra form>:is(.form-group,.row)>[class*="offset-"]{width:100%!important;max-width:none!important;flex:none!important;float:none!important;padding:0!important;margin:0!important}
.ap-ra .control-label,.ap-ra .col-form-label,.ap-ra form label{display:block;text-align:left!important;padding:0!important;margin:0 0 6px!important;font-family:'Barlow',Arial,sans-serif;font-weight:600;font-size:15px;line-height:1.3;color:#15181D}
.ap-ra .form-control{height:48px;width:100%;border:1px solid #DDE2E8;border-radius:3px;box-shadow:none;font-family:'Barlow',Arial,sans-serif;font-size:16px;color:#15181D;padding:0 14px;background:#fff}
.ap-ra select.form-control{padding-right:36px}
.ap-ra .form-control::placeholder{color:#8A93A0}
.ap-ra .form-control:focus{border-color:#2B4A94;box-shadow:0 0 0 3px rgba(43,74,148,.16);outline:0}
.ap-ra .help-block,.ap-ra .form-text{font-size:14px;line-height:1.5;color:#6B7482;margin:6px 0 0}
.ap-ra .btn-row{text-align:left!important;margin:0!important}
.ap-ra input[name="submit_request_button"]{display:inline-block;background:#C8102E!important;color:#fff!important;border:0!important;border-radius:3px!important;box-shadow:none!important;font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-weight:700;font-size:19px;line-height:1;letter-spacing:1.52px;text-transform:uppercase;padding:15px 30px 14px;margin:14px 0 0;cursor:pointer;width:auto}
.ap-ra input[name="submit_request_button"]:hover,.ap-ra input[name="submit_request_button"]:focus{background:#A50D26!important;color:#fff!important}
.ap-ra-fine{text-wrap:balance;font-size:14px;line-height:1.6;color:#6B7482;margin:28px 0 0}
@media (max-width:640px){.ap-ra form{grid-template-columns:minmax(0,1fr)}.ap-ra form>:is(.form-group,.row){grid-column:1/-1!important}.ap-ra-h1{font-size:40px!important}}
/* === end Request Access page === */

/* === AllPro Request Access gate (Claude, Oct 2026). Yes/No question above the form; form hidden until Yes. Only affects /account/request-access. === */
.ap-ra .ap-ra-note{display:none!important}
.ap-gate{background:#fff;border:1px solid #DDE2E8;border-top:5px solid #0057B8;border-radius:6px;box-shadow:0 6px 18px rgba(21,24,29,.08);padding:26px 28px 24px;margin:4px 0 30px}
.ap-gate .ap-gate-q{font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-weight:700;font-size:32px;line-height:1.1;text-transform:uppercase;color:#15181D;margin:0 0 10px;text-wrap:balance}
.ap-gate .ap-gate-sub{font-size:16.5px;line-height:1.55;color:#414852;margin:0 0 18px}
.ap-gate .ap-gate-steps{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 22px;padding:0;list-style:none}
.ap-gate .ap-gate-steps li{display:flex;gap:12px;align-items:center;background:#F5F7FA;border-radius:4px;padding:12px 14px;font-size:15.5px;line-height:1.35;color:#15181D;font-weight:600;margin:0}
.ap-gate .ap-gate-steps b{flex:0 0 30px;height:30px;border-radius:50%;background:#0057B8;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',Arial,sans-serif;font-size:17px}
.ap-gate .ap-gate-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ap-gate .ap-gate-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:74px;border-radius:4px;padding:10px 14px;cursor:pointer;text-decoration:none!important;font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;border:2px solid transparent;width:100%}
.ap-gate .ap-gate-btn strong{font-weight:700;font-size:22px;line-height:1.1;letter-spacing:.6px;text-transform:uppercase}
.ap-gate .ap-gate-btn span{font-family:'Barlow',Arial,sans-serif;font-size:14.5px;line-height:1.3;margin-top:3px}
.ap-gate .ap-gate-yes{background:#1E7B34;color:#fff!important}
.ap-gate .ap-gate-no{background:#fff;color:#0057B8!important;border-color:#0057B8}
.ap-gate .ap-gate-btn:hover{filter:brightness(.94)}
.ap-gate .ap-gate-help{font-size:14.5px;color:#5B6470;margin:14px 0 0;text-align:center}
.ap-gate .ap-gate-help a{color:#0057B8}
.ap-ra.ap-ra-gated:not(.ap-ra-open) form,.ap-ra.ap-ra-gated:not(.ap-ra-open) .ap-ra-fine{display:none!important}
@media (max-width:640px){.ap-gate{padding:20px 18px}.ap-gate .ap-gate-q{font-size:27px}.ap-gate .ap-gate-steps,.ap-gate .ap-gate-btns{grid-template-columns:1fr}}
.ap-gate .ap-gate-steps li{text-wrap:balance}
/* === end Request Access gate === */

/* === AllPro Reset Password page (Claude, Sept 2026). Matches the About / Request Access design. Only affects /account/reset-password. === */
.ap-rp{max-width:820px!important;margin:0 auto!important;padding:8px 20px 64px!important;float:none!important;font-family:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;font-size:17px;line-height:1.68;color:#414852;-webkit-font-smoothing:antialiased}
.ap-rp .ap-rp-hide{display:none!important}
.ap-rp-eyebrow{font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-weight:600;font-size:15px;line-height:1.68;letter-spacing:2.4px;text-transform:uppercase;color:#C8102E;margin:0 0 6px;text-align:left}
.ap-rp-h1{font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif!important;font-weight:700!important;font-size:54px!important;line-height:1.02!important;letter-spacing:-.54px;text-transform:uppercase;color:#15181D!important;margin:0 0 16px!important;text-align:left!important}
.ap-rp-stamp{display:inline-block;font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-weight:600;font-size:14px;line-height:1.68;letter-spacing:1.4px;text-transform:uppercase;color:#6B7482;background:#F5F7FA;border:1px solid #DDE2E8;border-radius:3px;padding:5px 12px;margin:0 0 22px}
.ap-rp-lede{text-wrap:balance;font-size:18.5px;line-height:1.62;margin:0 0 30px;color:#414852;text-align:left}
.ap-rp a{color:#2B4A94;text-decoration:underline;text-underline-offset:3px}
.ap-rp a:hover{color:#1B2F5E}
.ap-rp .ap-rp-opts{float:none!important;width:auto!important;max-width:none!important;flex:none!important;padding:0!important;margin:0 0 28px!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:18px;align-items:stretch}
.ap-rp .ap-rp-opts>br{display:none!important}
.ap-rp .ap-rp-opts form{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;justify-content:flex-start!important;text-align:left!important;margin:0!important;padding:24px 24px 26px!important;border:1px solid #DDE2E8;border-top:4px solid #C8102E;border-radius:0 0 3px 3px;background:#fff;gap:0}
.ap-rp .ap-rp-opts form>input[type="hidden"]{display:none!important}
.ap-rp-h2{font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif!important;font-weight:700!important;font-size:24px!important;line-height:1.2!important;letter-spacing:.3px;text-transform:uppercase;color:#15181D!important;margin:0 0 14px!important;text-align:left!important}
.ap-rp .ap-rp-opts form>div{display:block!important;width:100%!important;margin:0 0 16px!important;padding:0!important;float:none!important}
.ap-rp-label{display:block;font-family:'Barlow',Arial,sans-serif;font-weight:600;font-size:15px;line-height:1.3;color:#15181D;margin:0 0 6px;text-align:left}
.ap-rp .ap-rp-opts .form-control{display:block!important;width:100%!important;height:48px;border:1px solid #DDE2E8;border-radius:3px;box-shadow:none;font-family:'Barlow',Arial,sans-serif;font-size:16px;color:#15181D;padding:0 14px;background:#fff;margin:0!important}
.ap-rp .ap-rp-opts .form-control:focus{border-color:#2B4A94;box-shadow:0 0 0 3px rgba(43,74,148,.16);outline:0}
.ap-rp .ap-rp-opts form input[name="reset_pass_button"]{align-self:flex-start;display:inline-block;background:#C8102E!important;color:#fff!important;border:0!important;border-radius:3px!important;box-shadow:none!important;font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-weight:700;font-size:19px;line-height:1;letter-spacing:1.52px;text-transform:uppercase;padding:15px 30px 14px!important;margin:auto 0 0!important;cursor:pointer;width:auto!important;height:auto!important}
.ap-rp .ap-rp-opts form input[name="reset_pass_button"]:hover,.ap-rp .ap-rp-opts form input[name="reset_pass_button"]:focus{background:#A50D26!important;color:#fff!important}
.ap-rp .ap-rp-or{align-self:center;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0!important;padding:0 0 2px;border:1px solid #DDE2E8;border-radius:50%;background:#F5F7FA;font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-weight:700;font-size:15px;letter-spacing:1.2px;text-transform:uppercase;color:#6B7482!important;line-height:1;box-sizing:border-box}
.ap-rp-note{text-wrap:balance;background:#F5F7FA;border-left:4px solid #2B4A94;border-radius:0 3px 3px 0;padding:16px 20px;font-size:16.5px;line-height:1.6;margin:0 0 8px;color:#414852;text-align:left}
.ap-rp-note strong{color:#15181D}
.ap-rp-fine{text-wrap:balance;font-size:14px;line-height:1.6;color:#6B7482;margin:28px 0 0;text-align:left}
@media (max-width:700px){.ap-rp .ap-rp-opts{grid-template-columns:minmax(0,1fr);row-gap:16px}.ap-rp .ap-rp-or{justify-self:center}.ap-rp-h1{font-size:40px!important}}
/* === end Reset Password page === */

/* === AllPro page top spacing: every info page starts 54px below the nav, matching Locator (Claude, Sept 2026) === */
body .ap-about,body .ap-policy,body .ap-ra,body .ap-rp{padding-top:38px!important}
body .ap-contactpg{padding-top:24px!important}
body .ap-pk{padding-top:18px!important}
/* === end page top spacing === */

/* === AllPro category page sections === */
.ap-cat-sections{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;margin:8px 0 22px!important;width:100%!important}
.ap-cat-section{background:#fff!important;border:1px solid #DDE2E8!important;border-top:4px solid #C8102E!important;border-radius:0 0 4px 4px!important;padding:14px 16px 16px!important}
.ap-cat-section h2{font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif!important;font-weight:700!important;font-size:22px!important;letter-spacing:.02em!important;text-transform:uppercase!important;color:#15181D!important;margin:0 0 10px!important}
.ap-cat-section h2 a{display:inline!important;color:#15181D!important;font-size:22px!important;line-height:1.2!important;text-decoration:none!important}
.ap-cat-section h2 a:hover{color:#C8102E!important;text-decoration:none!important}
.ap-cat-section a{display:block!important;color:#2B4A94!important;text-decoration:none!important;font-size:15px!important;line-height:1.7!important}
.ap-cat-section a:hover{color:#C8102E!important;text-decoration:underline!important}
@media(max-width:800px){.ap-cat-sections{grid-template-columns:1fr!important}}
/* === end category page sections === */

/* FFGD brand-page banners (Images inserts): breathing room below - EH 9/10 */
.glide:has(img[src*="/promos/ffgd/"]) { margin-bottom: 22px !important; }


/* ==========================================================================
   SECTION 3. LANDING PAGES AND THE SPRAY UPDATE PAGE
   Thomas's custom pages (.ap-lp) and the /spray-update page (.ap-spray).
   ========================================================================== */

/* === AllPro landing pages (Claude, Oct 2026): Thomas's SEO custom pages (/info, /independent, /become-a-dealer, etc.) in the About / Perks design. Only affects .ap-lp. === */
.ap-lp{--ap-blue:#2B4A94;--ap-blue-dark:#1B2F5E;--ap-red:#C8102E;--ap-ink:#15181D;--ap-body:#414852;--ap-muted:#6B7482;--ap-line:#DDE2E8;--ap-panel:#F5F7FA;max-width:820px;margin:0 auto;padding:9px 20px 64px;font-family:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;font-size:17px;line-height:1.68;color:var(--ap-body);-webkit-font-smoothing:antialiased;text-align:left;box-sizing:border-box}
.ap-lp *,.ap-lp *:before,.ap-lp *:after{box-sizing:border-box}
.ap-lp p{margin:0 0 18px}
.ap-lp a{color:var(--ap-blue);text-decoration:underline;text-underline-offset:3px}
.ap-lp a:hover{color:var(--ap-blue-dark)}
.ap-lp img{max-width:100%;height:auto;margin:0!important}
.ap-lp-eyebrow{font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-weight:600;font-size:15px;letter-spacing:2.4px;text-transform:uppercase;color:var(--ap-red);margin:0 0 6px!important}
.ap-lp-h1{font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif!important;font-weight:700!important;font-size:54px!important;line-height:1.02!important;letter-spacing:-.54px;text-transform:uppercase;color:var(--ap-ink)!important;margin:0 0 16px!important;text-align:left!important;text-wrap:balance}
.ap-lp-lede{font-size:18.5px;line-height:1.62;text-wrap:balance;margin:0 0 26px!important}
.ap-lp-h2{font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif!important;font-weight:700!important;font-size:30px!important;line-height:1.18!important;letter-spacing:.3px;text-transform:uppercase;color:var(--ap-ink)!important;border-left:4px solid var(--ap-red);padding:0 0 0 15px!important;margin:46px 0 18px!important;text-align:left!important;text-wrap:balance}
.ap-lp-h3{font-family:'Barlow',Arial,sans-serif!important;font-weight:700!important;font-size:19px!important;line-height:1.3!important;color:var(--ap-ink)!important;margin:0 0 6px!important;text-transform:none!important;letter-spacing:0!important}
.ap-lp-note{background:var(--ap-panel);border-left:4px solid var(--ap-blue);border-radius:0 3px 3px 0;padding:16px 20px;font-size:16.5px;line-height:1.6;text-wrap:balance}
.ap-lp-note strong{color:var(--ap-ink)}
.ap-lp-fine{font-size:14px!important;line-height:1.6;color:var(--ap-muted);text-wrap:balance}
.ap-lp-list{margin:0 0 18px;padding:0 0 0 22px}
.ap-lp-list li{margin:0 0 8px;padding-left:4px}
.ap-lp-list li::marker{color:var(--ap-red)}
.ap-lp-steps{list-style:none;counter-reset:apstep;margin:0 0 20px;padding:0}
.ap-lp-steps li{counter-increment:apstep;position:relative;padding:4px 0 4px 50px;margin:0 0 12px;min-height:36px}
.ap-lp-steps li:before{content:counter(apstep);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:var(--ap-blue);color:#fff;font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-weight:700;font-size:19px;line-height:36px;text-align:center}
.ap-lp-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--ap-line);border-radius:3px;background:var(--ap-panel);margin:0 0 26px}
.ap-lp-fact{padding:14px 18px;border-left:1px solid var(--ap-line)}
.ap-lp-fact:first-child{border-left:0}
.ap-lp-fact span{display:block;font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-weight:600;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ap-muted);line-height:1.4;margin:0 0 2px}
.ap-lp-fact strong{display:block;font-weight:700;font-size:17px;line-height:1.35;color:var(--ap-ink)}
.ap-lp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ap-line);border-bottom:1px solid var(--ap-line);padding:24px 0;margin:0 0 8px}
.ap-lp-stat{padding:0 22px;border-left:1px solid var(--ap-line)}
.ap-lp-stat:first-child{border-left:0;padding-left:0}
.ap-lp-stat strong{display:block;font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-weight:800;font-size:46px;line-height:1;color:var(--ap-blue);margin:0 0 6px}
.ap-lp-stat span{display:block;font-size:15.5px;line-height:1.4;color:var(--ap-body)}
.ap-lp-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 0 22px}
.ap-lp-cards.ap-lp-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ap-lp-card{display:block;background:#fff;border:1px solid var(--ap-line);border-top:4px solid var(--ap-blue);border-radius:0 0 3px 3px;padding:18px 20px 20px}
.ap-lp-card p{margin:0!important;font-size:15.5px;line-height:1.55;color:var(--ap-body);text-wrap:pretty}
.ap-lp a.ap-lp-card{text-decoration:none!important;color:inherit}
.ap-lp a.ap-lp-card:hover{border-color:var(--ap-blue);border-top-color:var(--ap-red)}
.ap-lp-cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 22px}
.ap-lp-cat{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ap-line);border-radius:3px;overflow:hidden}
.ap-lp a.ap-lp-cat{text-decoration:none!important;color:inherit}
.ap-lp a.ap-lp-cat:hover{border-color:var(--ap-blue)}
.ap-lp-cat img{display:block;width:100%!important;height:150px!important;object-fit:contain;background:#fff;padding:12px;border-bottom:1px solid var(--ap-line)}
.ap-lp-cat div{padding:14px 16px 16px}
.ap-lp-cat strong{display:block;font-family:'Barlow',Arial,sans-serif;font-weight:700;font-size:17px;line-height:1.3;color:var(--ap-ink);margin:0 0 4px}
.ap-lp-cat span{display:block;font-size:14.5px;line-height:1.5;color:var(--ap-muted);text-wrap:balance}
.ap-lp-logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 22px}
.ap-lp-logo{display:flex;align-items:center;justify-content:center;height:76px;background:#fff;border:1px solid var(--ap-line);border-radius:3px;padding:12px 14px}
.ap-lp-logo img{display:block;max-width:100%!important;max-height:44px!important;width:auto!important;height:auto!important;object-fit:contain}
.ap-lp-logos.ap-lp-solo{display:block}
.ap-lp-logos.ap-lp-solo .ap-lp-logo{display:inline-flex;justify-content:flex-start;border:0;padding:0;height:60px;background:none}
.ap-lp-logos.ap-lp-solo .ap-lp-logo img{max-height:60px!important;max-width:260px!important}
.ap-lp-cats.ap-lp-solo{grid-template-columns:minmax(0,1fr)}
.ap-lp-cats.ap-lp-solo .ap-lp-cat{flex-direction:row;align-items:center}
.ap-lp-cats.ap-lp-solo .ap-lp-cat img{width:300px!important;height:190px!important;flex:none;border-bottom:0;border-right:1px solid var(--ap-line)}
.ap-lp-cats.ap-lp-solo .ap-lp-cat div{padding:18px 22px}
.ap-lp-table{border:1px solid var(--ap-line);border-radius:3px;overflow:hidden;margin:0 0 14px}
.ap-lp-table table{width:100%;border-collapse:collapse;margin:0;font-size:16px}
.ap-lp-table th,.ap-lp-table td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--ap-line);vertical-align:top;line-height:1.5}
.ap-lp-table tr:last-child td{border-bottom:0}
.ap-lp-table th{font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-weight:600;font-size:14px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ap-muted);background:var(--ap-panel)}
.ap-lp-table td:first-child{font-weight:600;color:var(--ap-ink);white-space:nowrap}
.ap-lp-map{display:block;border:1px solid var(--ap-line);border-radius:4px;overflow:hidden;margin:0 0 22px}
.ap-lp-map img{display:block;width:100%!important}
.ap-lp-img{display:block;margin:0 0 22px!important}
.ap-lp-btns{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.ap-lp a.ap-lp-btn{display:inline-block;background:var(--ap-red);color:#fff!important;text-decoration:none!important;font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-weight:700;font-size:17px;line-height:1;letter-spacing:1.36px;text-transform:uppercase;padding:13px 22px 12px;border:1px solid var(--ap-red);border-radius:3px}
.ap-lp a.ap-lp-btn:hover{background:#A50D26;border-color:#A50D26;color:#fff!important}
.ap-lp a.ap-lp-btn-alt{background:#fff;color:var(--ap-ink)!important;border-color:var(--ap-line)}
.ap-lp a.ap-lp-btn-alt:hover{background:#fff;color:var(--ap-blue)!important;border-color:var(--ap-blue)}
.ap-lp-cta{background:var(--ap-panel);border-left:4px solid var(--ap-blue);border-radius:0 3px 3px 0;padding:20px 22px 22px;margin:34px 0 0}
.ap-lp-cta-t{display:block;font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-weight:700;font-size:23px;line-height:1.2;letter-spacing:.3px;text-transform:uppercase;color:var(--ap-ink);margin:0 0 4px}
.ap-lp-cta p{font-size:16.5px;line-height:1.6;margin:0 0 16px!important;text-wrap:balance}
.ap-lp-cta .ap-lp-btns{margin:0}
.ap-lp-faq details{border:1px solid var(--ap-line);border-radius:3px;background:#fff;margin:0 0 10px}
.ap-lp-faq summary{cursor:pointer;list-style:none;position:relative;padding:14px 48px 14px 18px;font-family:'Barlow',Arial,sans-serif;font-weight:700;font-size:17px;line-height:1.4;color:var(--ap-ink)}
.ap-lp-faq summary::-webkit-details-marker{display:none}
.ap-lp-faq summary:after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-weight:700;font-size:26px;line-height:1;color:var(--ap-red)}
.ap-lp-faq details[open] summary:after{content:"\2212"}
.ap-lp-faq details[open] summary{border-bottom:1px solid var(--ap-line)}
.ap-lp-faq details p{margin:0!important;padding:14px 18px 16px;font-size:16px;line-height:1.6;text-wrap:pretty}
.ap-lp-end{display:block;margin:48px 0 0;padding:26px;border:1px solid var(--ap-line);border-top:4px solid var(--ap-red);border-radius:0 0 3px 3px;background:#fff}
.ap-lp-end-head{display:flex;align-items:center;gap:22px;margin:0 0 22px}
.ap-lp-end-logo{display:block;height:40px;width:auto;flex:none}
.ap-lp-end-t{font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif!important;font-weight:700!important;font-size:26px!important;line-height:1.2!important;letter-spacing:.3px;text-transform:uppercase;color:var(--ap-ink)!important;margin:0!important;padding:0!important;border:0!important}
.ap-lp-end-head .ap-lp-end-t{padding:2px 0 2px 22px!important;border-left:1px solid var(--ap-line)!important}
.ap-lp-end .ap-lp-btns{display:flex;flex-wrap:nowrap;gap:10px;margin:0}
.ap-lp-end a.ap-lp-btn{flex:1 1 auto;text-align:center;font-size:15.5px;letter-spacing:1px;padding:14px 12px 13px;white-space:nowrap}
@media (max-width:760px){.ap-lp-end .ap-lp-btns{flex-wrap:wrap}.ap-lp-end a.ap-lp-btn{flex:1 1 calc(50% - 5px)}.ap-lp-end-head{flex-direction:column;align-items:flex-start;gap:12px}.ap-lp-end-head .ap-lp-end-t{padding:0!important;border-left:0!important}}
.col-xs-12:has(> .custom-page-content .ap-lp) > h1,.col-xs-12:has(> .custom-page-content .ap-lp) > hr,.col-12:has(> .custom-page-content .ap-lp) > h1,.col-12:has(> .custom-page-content .ap-lp) > hr{display:none!important}
@media (max-width:760px){.ap-lp-h1{font-size:40px!important}.ap-lp-cards,.ap-lp-cards.ap-lp-3,.ap-lp-cats,.ap-lp-facts,.ap-lp-stats{grid-template-columns:minmax(0,1fr)}.ap-lp-fact,.ap-lp-stat{border-left:0;padding-left:0}.ap-lp-fact{padding:12px 18px;border-top:1px solid var(--ap-line)}.ap-lp-fact:first-child{border-top:0}.ap-lp-stat{padding:10px 0}.ap-lp-logos{grid-template-columns:repeat(3,minmax(0,1fr))}.ap-lp-table td:first-child{white-space:normal}.ap-lp-cats.ap-lp-solo .ap-lp-cat{flex-direction:column}.ap-lp-cats.ap-lp-solo .ap-lp-cat img{width:100%!important;border-right:0;border-bottom:1px solid var(--ap-line)}}
.ap-lp-cats:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.ap-lp-cats:has(> :nth-child(4):last-child){grid-template-columns:minmax(0,1fr)}}
/* === end AllPro landing pages === */


/* --- Spray Update page (/spray-update) styles, plus the fix that keeps .ap-hero off the home carousel (Thomas, Oct 2026) --- */
.ap-hero{width:100%;height:280px;object-fit:cover;display:block;margin:0 0 22px;border:1px solid #DDE2E8}
.ap-spray{max-width:820px;margin:0 auto;padding:8px 0 48px;font-family:Barlow,"Open Sans",sans-serif;color:#414852;font-size:17px;line-height:1.65}
.ap-spray .ap-eyebrow{font-family:"Barlow Condensed",sans-serif;font-size:15px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#C8102E;margin:0 0 6px}
.ap-spray h1{font-family:"Barlow Condensed",sans-serif;font-size:42px;font-weight:700;line-height:1.02;text-transform:uppercase;color:#15181D;margin:0 0 12px}
.ap-spray h2{font-family:"Barlow Condensed",sans-serif;font-size:28px;font-weight:700;text-transform:uppercase;color:#15181D;margin:26px 0 8px}
.ap-spray p{margin:0 0 14px}
.ap-status{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
.ap-s{background:#F5F7FA;border:1px solid #DDE2E8;padding:12px 14px}
.ap-s span{display:block;font-family:"Barlow Condensed",sans-serif;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:#6B7482;margin:0 0 4px}
.ap-s strong{display:block;font-family:"Barlow Condensed",sans-serif;font-size:20px;text-transform:uppercase;color:#15181D}
.logo-row{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 18px}
.logo-row figure{margin:0;background:#fff;border:1px solid #DDE2E8;width:118px;height:72px;display:flex;align-items:center;justify-content:center;padding:8px}
.logo-row img{max-width:100px;max-height:48px;object-fit:contain}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:8px 0 18px}
.cat-card{border:1px solid #DDE2E8;background:#fff}
.cat-card img{width:100%;height:140px;object-fit:contain;display:block;background:#F5F7FA;padding:8px}
.cat-card div{padding:10px 12px 14px}
.cat-card strong{display:block;font-family:"Barlow Condensed",sans-serif;font-size:18px;text-transform:uppercase;color:#15181D}
.cat-card span{color:#6B7482;font-size:14px}
ul.clean{padding-left:18px}
ul.clean li{margin:6px 0}
.ap-btns{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px}
.ap-btns a{font-family:"Barlow Condensed",sans-serif;font-size:16px;font-weight:700;letter-spacing:1px;text-transform:uppercase;text-decoration:none;padding:10px 14px;background:#C8102E;color:#fff}
.ap-btns .ap-btn-ghost{background:#fff;color:#15181D;border:1px solid #DDE2E8}
.faq details{border:1px solid #DDE2E8;padding:12px 14px;margin:8px 0}
.faq summary{cursor:pointer;font-family:"Barlow Condensed",sans-serif;font-size:18px;font-weight:700;text-transform:uppercase;color:#15181D}
.ap-line-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0 8px}
.ap-line{display:block;border:1px solid #DDE2E8;background:#fff;text-decoration:none;color:#15181D}
.ap-line img{width:100%;height:150px;object-fit:cover;display:block;background:#F5F7FA}
.ap-line span{display:block;padding:12px 14px 14px;font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.4px;text-transform:uppercase;font-size:18px}
@media(max-width:700px){.ap-status,.cat-grid,.ap-line-grid{grid-template-columns:1fr}}
.ap-hero-stage .ap-hero,
.ap-slide.ap-hero {
  height: auto;
  margin: 0;
  border: 0;
  object-fit: fill;
}

/* === AllPro landing pages: hero photo, photo note, 4-up facts (Claude, Oct 2026) === */
.ap-lp img.ap-hero{display:block;width:100%!important;max-width:100%!important;height:280px!important;object-fit:cover;border:0!important;border-radius:4px;margin:0 0 30px!important}
.ap-lp img.ap-hero + .ap-lp-quip{font-size:14px!important;line-height:1.5;color:var(--ap-muted);margin:-22px 0 30px!important;text-wrap:balance}
.ap-lp-facts:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){.ap-lp img.ap-hero{height:190px!important}.ap-lp-facts:has(> :nth-child(4):last-child){grid-template-columns:minmax(0,1fr)}}
.ap-lp p,.ap-lp li{text-wrap:pretty}
.ap-lp-fact strong{text-wrap:balance}
.ap-lp-logos.ap-lp-g2{grid-template-columns:repeat(2,minmax(0,1fr))}.ap-lp-logos.ap-lp-g3{grid-template-columns:repeat(3,minmax(0,1fr))}.ap-lp-logos.ap-lp-g4{grid-template-columns:repeat(4,minmax(0,1fr))}.ap-lp-logos.ap-lp-g5{grid-template-columns:repeat(5,minmax(0,1fr))}.ap-lp-logos.ap-lp-g6{grid-template-columns:repeat(6,minmax(0,1fr))}.ap-lp-logos.ap-lp-g7{grid-template-columns:repeat(7,minmax(0,1fr))}
@media (max-width:760px){.ap-lp-logos.ap-lp-m2{grid-template-columns:repeat(2,minmax(0,1fr))}.ap-lp-logos.ap-lp-m3{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* === end AllPro landing pages heroes === */

/* === AllPro landing pages, part 2 (Claude, Oct 2026): hero photos, contact cards, quips, product line grid and FAQ on Thomas's Oct 2026 pages. Only affects .ap-lp. === */
.ap-lp{--ap-blue:#0057B8;--ap-blue-dark:#00478F}
.ap-lp img.ap-hero{display:block;width:100%!important;height:300px!important;object-fit:cover;border-radius:4px;margin:0 0 28px!important;border:0}
.ap-lp img.ap-hero.ap-hero-full{height:auto!important;object-fit:contain;border:1px solid var(--ap-line)}
.ap-lp img.ap-lp-logo{display:block;width:auto!important;height:auto!important;max-height:60px!important;max-width:240px!important;margin:0 0 22px!important;padding:0;border:0;border-radius:0;background:none}
.ap-lp .ap-lp-quip,.ap-lp .ap-quip{font-size:15px!important;font-style:italic;line-height:1.5;color:var(--ap-muted);margin:0 0 18px!important;padding:0 0 0 14px;border-left:2px solid var(--ap-line)}
.ap-lp-line-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 0 22px}
.ap-lp-line-grid:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.ap-lp a.ap-line{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ap-line);border-radius:3px;overflow:hidden;text-decoration:none!important;color:inherit}
.ap-lp a.ap-line:hover{border-color:var(--ap-blue)}
.ap-lp a.ap-line img{display:block;width:100%!important;height:160px!important;object-fit:contain;background:#fff;padding:12px;border-bottom:1px solid var(--ap-line)}
.ap-lp a.ap-line div{padding:14px 16px 16px}
.ap-lp a.ap-line strong{display:block;font-family:'Barlow',Arial,sans-serif;font-weight:700;font-size:17px;line-height:1.3;color:var(--ap-ink);margin:0 0 4px}
.ap-lp a.ap-line span{display:block;font-family:'Barlow',Arial,sans-serif!important;font-weight:400!important;font-size:14.5px!important;line-height:1.5!important;letter-spacing:0!important;text-transform:none!important;color:var(--ap-muted)!important;margin:0!important;padding:0!important;text-wrap:pretty}
.ap-lp-cta.ap-kelli,.ap-lp-cta.ap-chuck,.ap-lp-cta.ap-phil,.ap-lp-cta.ap-bj,.ap-lp-cta.ap-mandi{display:flex;align-items:center;gap:22px}
.ap-lp .ap-kelli-photo,.ap-lp .ap-chuck-photo,.ap-lp .ap-phil-photo,.ap-lp .ap-bj-photo,.ap-lp .ap-mandi-photo{flex:none;width:96px!important;height:96px!important;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 0 0 1px var(--ap-line)}
.ap-lp-cta.ap-kelli p,.ap-lp-cta.ap-chuck p,.ap-lp-cta.ap-phil p,.ap-lp-cta.ap-bj p,.ap-lp-cta.ap-mandi p{margin:0!important}
.ap-lp-cta + .ap-lp-btns{margin:16px 0 0}
.ap-lp-faq{margin:0 0 26px}
@media (max-width:760px){.ap-lp img.ap-hero{height:200px!important}.ap-lp-line-grid,.ap-lp-line-grid:has(> :nth-child(3):last-child){grid-template-columns:minmax(0,1fr)}.ap-lp-cta.ap-kelli,.ap-lp-cta.ap-chuck,.ap-lp-cta.ap-phil,.ap-lp-cta.ap-bj,.ap-lp-cta.ap-mandi{flex-direction:column;align-items:flex-start;gap:14px}}
/* === end AllPro landing pages, part 2 === */


/* ==========================================================================
   SECTION 4. HOME PAGE, LOGGED IN
   ========================================================================== */

/* === AllPro Home middle row (Claude, Oct 1 2026): styles for insert #9 (Pro Rebates / Trailer Parts / Open Late). Kept here because the Inserts editor strips style blocks when an insert is opened. === */
.ap-midrow{display:flex;flex-wrap:wrap;margin:0 -15px}
.ap-midrow>.ap-c25{flex:0 0 25%;max-width:25%;padding:0 15px;box-sizing:border-box}
.ap-midrow>.ap-c50{flex:0 0 50%;max-width:50%;padding:0 15px;box-sizing:border-box}
.ap-p1panel{background:#fff;border:1px solid #ddd;border-radius:4px;margin:0 0 20px}
.ap-p1panel>.panel-heading{background:#fff;border-bottom:1px solid #ddd;border-radius:3px 3px 0 0;padding:10px 15px}
.ap-p1panel>.panel-heading>.panel-title{font-family:'Open Sans',sans-serif;font-size:16px;font-weight:500;line-height:1.1;color:#333;margin:0;text-transform:none}
.ap-p1panel>.panel-body{padding:15px}
.ap-p1panel>.panel-body p{margin:0}
.ap-p1panel>.panel-body img{display:block;width:100%;height:auto;max-width:100%}
.ap-p1panel>.panel-body iframe{display:block;width:100%;border:0}
.ap-tpc-wrap{margin:0;position:relative}
.ap-tpc-stage{position:relative;width:100%;max-width:3104px;margin:0 auto;padding-top:38.6598%;background-image:url(https://aam5.imgix.net/pacefiles/allprodistributing/site/brand-banners/trailerparts/trailer-parts-catalog-hb-10-20.png);background-repeat:no-repeat;background-position:center;background-size:100% 100%;overflow:hidden}
.ap-tpc-cta{position:absolute;left:0;top:0;width:100%;height:100%;display:block;font-size:0!important;line-height:0!important;text-indent:-9999px!important;overflow:hidden!important;white-space:nowrap!important}
@media (max-width:991px){.ap-midrow>.ap-c25,.ap-midrow>.ap-c50{flex:0 0 100%;max-width:100%}}
/* === end Home middle row === */

/* === AllPro Pro Rebates hotspots (Claude, Oct 1 2026) === */
.ap-pr-wrap{position:relative;display:block;line-height:0;margin:0}
.ap-pr-wrap img{display:block!important;width:100%!important;height:auto!important;max-width:100%!important;margin:0!important}
.ap-pr-hs{position:absolute;display:block;z-index:2;font-size:0!important;line-height:0!important;color:transparent!important;text-indent:-9999px;overflow:hidden;white-space:nowrap;text-decoration:none!important;background:transparent!important;border:0!important;padding:0!important;margin:0!important}
.ap-pr-r1{top:46.7875%;height:14.4975%}
.ap-pr-r2{top:63.0972%;height:14.4975%}
.ap-pr-c3a{left:5.1429%;width:28.8571%}
.ap-pr-c3b{left:35.5714%;width:28.8571%}
.ap-pr-c3c{left:66%;width:28.8571%}
.ap-pr-c2a{left:5.1429%;width:44.0714%}
.ap-pr-c2b{left:50.7857%;width:44.0714%}
.ap-pr-c1{left:5.1429%;width:89.7143%}
.ap-pr-cta{left:71.4407%;top:86.9852%;width:23.4164%;height:6.9193%;border-radius:999px}
/* === end AllPro Pro Rebates hotspots === */

/* === AllPro home carousel spacing (Claude, Oct 2026) ===
   24px between the sub-bar and the banner, and 24px from the slide dots
   to the next row (was 17px and 42px). Delete this block to undo. === */
html body .home-page .ap-hero-wrap.ap-rotator-click{margin-top:7px!important;margin-bottom:14px!important}
/* === end AllPro home carousel spacing === */

/* === AllPro Spray Updates banner, Update! panel (Claude, Oct 2026) === */
.ap-su-wrap{position:relative;display:block;line-height:0;margin:0}
.ap-su-wrap img{display:block!important;width:100%!important;height:auto!important;max-width:100%!important;margin:0!important}
.ap-su-wrap .ap-su-hs{position:absolute;display:block;z-index:2;left:74.5812%;top:34.7917%;width:22.1005%;height:30.2083%;border-radius:4px;font-size:0!important;line-height:0!important;color:transparent!important;text-indent:-9999px;overflow:hidden;white-space:nowrap;text-decoration:none!important;background:transparent!important;border:0!important;padding:0!important;margin:0!important}
/* === end Spray Updates banner === */


/* ==========================================================================
   SECTION 5. HOME PAGE, LOGGED OUT
   Desktop only here; the phone versions are in SECTION 8.
   ========================================================================== */

/* === AllPro logged-out hero size (Claude, Oct 2026) === */
/* Desktop hero art capped at 1500px wide (was full width, ~600px tall at 1920). Height follows (32%, max 480px). Left margin keeps the art text lined up with the stats row below. Phones keep the live-text hero (max-width:767px block). */
@media (min-width:768px){html body .ap-lo-hero-wrap .ap-lo-hero{max-width:1500px;padding-top:min(32%, 480px);margin:0 0 0 max(0px, calc((100% - 1500px) * .052))}}
/* === end AllPro logged-out hero size === */


/* ==========================================================================
   SECTION 6. FOOTER
   ========================================================================== */

/* === AllPro industry membership badges === */
.footer-row-company{flex-wrap:wrap}
.ap-mb{flex:1 0 100%;width:100%;margin:18px 0 4px}
.ap-mb-label{display:block;font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6B7482;margin:0 0 10px}
.ap-mb-row{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.ap-mb-badge{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:132px;height:112px;padding:10px 10px 8px;background:#fff;border:1px solid #DDE2E8;border-radius:4px;text-decoration:none;box-sizing:border-box}
.ap-mb-badge:hover{border-color:#C8102E;text-decoration:none}
.ap-mb-badge:focus{outline:2px solid #C8102E!important;outline-offset:2px;border-color:#C8102E;text-decoration:none}
.ap-mb-badge img{display:block;height:54px;width:auto;max-width:108px;object-fit:contain}
.ap-mb-badge img.ap-mb-sema{height:70px;max-width:78px}
.ap-mb-badge img.ap-mb-natda{height:68px;max-width:58px}
.ap-mb-cap{margin-top:6px;font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#15181D;line-height:1;text-align:center}
.footer-nav-links a[href*="logout"]{display:inline-block;margin-left:8px;padding:4px 10px 3px;background:#C8102E;color:#fff!important;border-radius:3px;font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.footer-nav-links a[href*="logout"]:hover,.footer-nav-links a[href*="logout"]:focus{background:#A50D26;color:#fff!important;text-decoration:none}
.footer-row-company .footer-legal{flex:1 1 auto;margin-top:14px}
.footer-legal{display:flex;flex-wrap:wrap;align-items:center}
.footer-legal .footer-sep{display:inline!important;margin:0 8px;color:#b0b0b0}
.footer-legal .footer-sep:has(+ a[href*="theaamgroup.com/privacy"]){display:none!important}
.footer-legal .ap-legal-ours{display:inline-flex;align-items:center}
.footer-legal a[data-ap-legal]{margin-left:0;white-space:nowrap}
.footer-legal a[data-ap-legal]+a[data-ap-legal]::before{content:"·";margin:0 8px;color:#b0b0b0}
.footer-legal a[href*="theaamgroup.com/privacy"]{margin-left:12px!important;padding-left:12px!important;border-left:1px solid #9a9a9a!important;white-space:nowrap}
.footer-legal a[href*="theaamgroup.com/terms"]{white-space:nowrap}
.ap-social{flex:0 0 auto;margin:14px 0 0 auto;align-self:center}
.ap-social .footer-nav-label{display:none}
.ap-social .footer-nav-links{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.ap-social a{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:#fff;border:1px solid #DDE2E8;border-radius:4px;color:#15181D;font-size:13px;text-decoration:none}
.ap-social a:hover,.ap-social a:focus{border-color:#C8102E;color:#C8102E;text-decoration:none}
.ap-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.footer-nav-links a .ap-nav-ico{margin-right:7px;width:14px;text-align:center}
.footer-nav-links a[href*="logout"] .ap-nav-ico{margin-right:6px}
/* === end membership badges === */

/* === AllPro footer redesign (Claude, Oct 2026) =================
   PACE 2 version, matching the PACE 1 footer: brand block plus three
   link columns, a centered badge band and a dark bottom bar, all on
   one gray field. Keeps the beta's own touches that PACE 1 never had:
   the small icons on the account and program links, the red Log Out
   button, the social icons, and the caption under each badge.
   Scoped to .ap-ft, a class the matching JS adds to .footer-wrapper
   once it has rebuilt the markup, so if the JS does not run the beta
   footer renders untouched. Selectors carry .footer-wrapper too where
   they have to beat the platform's own .footer-wrapper .x rules.
   Delete this block and the JS block to restore it. ================ */

.footer-wrapper.ap-ft { background: #F2F4F7; padding: 0; margin-top: 48px; border-top: 0; }
.footer-wrapper.ap-ft .container { width: auto; max-width: 1360px; padding: 0 30px; margin: 0 auto; }

/* ---- top row: brand + link columns ---- */
.ap-ft .ap-ft-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 36px; padding: 52px 0 44px; margin: 0; }
.ap-ft .ap-ft-brand { width: 340px; flex: 0 0 340px; }
.ap-ft .ap-ft-brand img { display: block; width: 125px; height: auto; margin: 0; }
.footer-wrapper.ap-ft .ap-ft-phone { display: block; margin: 18px 0 0; font-family: "Barlow Condensed", "Open Sans", sans-serif; font-weight: 700; font-size: 34px; line-height: 1; color: #C8102E; text-align: left; }
.footer-wrapper.ap-ft .ap-ft-phone:hover, .footer-wrapper.ap-ft .ap-ft-phone:focus { color: #A50D26; text-decoration: none; }
.footer-wrapper.ap-ft .ap-ft-email { display: block; margin: 12px 0 0; font-size: 16px; line-height: 22px; color: #414852; }
.footer-wrapper.ap-ft .ap-ft-email:hover, .footer-wrapper.ap-ft .ap-ft-email:focus { color: #0057B8; }
.ap-ft .ap-ft-where { margin: 14px 0 0; font-size: 15px; line-height: 22px; color: #6B7482; }

.ap-ft .ap-ft-col { flex: 0 1 auto; min-width: 170px; padding: 0; width: auto; }
.ap-ft .ap-ft-col h4 { margin: 0 0 18px; font-family: "Barlow Condensed", "Open Sans", sans-serif; font-weight: 700; font-size: 15px; line-height: 16px; letter-spacing: 2px; text-transform: uppercase; color: #15181D; }
.ap-ft .ap-ft-col h4.ap-ft-h4-gap { margin-top: 28px; }
.ap-ft .ap-ft-col ul { margin: 0; padding: 0; list-style: none; display: block; }
.ap-ft .ap-ft-col li { margin: 0; padding: 0; }
.footer-wrapper.ap-ft .ap-ft-col li a { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 16px; line-height: 22px; color: #414852; text-decoration: none; }
.footer-wrapper.ap-ft .ap-ft-col li a:hover, .footer-wrapper.ap-ft .ap-ft-col li a:focus { color: #0057B8; }
.ap-ft .ap-ft-col li a svg, .ap-ft .ap-ft-col li a i { width: 15px; height: 15px; flex: none; opacity: .65; }
/* Log Out keeps the beta's red button, which comes from the existing
   .footer-nav-links a[href*="logout"] rule; the new lists keep that class. */
.footer-wrapper.ap-ft .ap-ft-col li a[href*="logout"] { display: inline-flex; gap: 8px; padding: 5px 12px 4px; margin-top: 6px; color: #fff; }
.footer-wrapper.ap-ft .ap-ft-col li a[href*="logout"] svg, .footer-wrapper.ap-ft .ap-ft-col li a[href*="logout"] i { opacity: 1; }
.ap-ft .ap-ft-col ul.ap-ft-inline { display: flex; flex-wrap: wrap; gap: 0 16px; }
.footer-wrapper.ap-ft .ap-ft-col ul.ap-ft-inline li a { padding: 6px 0; }
.ap-ft .ap-ft-col ul.ap-ft-inline li a svg, .ap-ft .ap-ft-col ul.ap-ft-inline li a i { width: 19px; height: 19px; opacity: .75; }
.ap-ft .ap-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- membership badge band ---- */
.ap-ft .ap-ft-badges { background: transparent; border-top: 1px solid #E2E6EB; }
.ap-ft .ap-ft-badges-in { display: flex; align-items: center; justify-content: center; gap: 36px; max-width: 1360px; margin: 0 auto; padding: 24px 30px 26px; }
.ap-ft .ap-ft-badges-label { flex: none; font-family: "Barlow Condensed", "Open Sans", sans-serif; font-weight: 700; font-size: 15px; line-height: 16px; letter-spacing: 2px; text-transform: uppercase; color: #5C6572; white-space: nowrap; }
.ap-ft .ap-mb-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: center; flex: 0 0 auto; column-gap: 40px; row-gap: 14px; margin: 0; padding: 0; }
.footer-wrapper.ap-ft .ap-mb-row .ap-mb-badge { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 9px; width: auto; height: auto; padding: 0; background: none; border: 0; border-radius: 0; }
/* the art box is a fixed height so every caption lands on one baseline */
.ap-ft .ap-ft-badge-art { display: flex; align-items: center; justify-content: center; height: 72px; }
/* the beta caps these at max-width 108px and height 54px; override both */
.footer-wrapper.ap-ft .ap-mb-row .ap-mb-badge img { display: block; width: auto; height: auto; max-width: none; }
.ap-ft .ap-mb-row .ap-mb-cap { display: block; font-family: "Barlow Condensed", "Open Sans", sans-serif; font-weight: 700; font-size: 11px; line-height: 13px; letter-spacing: .9px; text-transform: uppercase; color: #6B7482; text-align: center; max-width: 116px; }
.ap-ft .ap-mb-row .ap-mb-badge img[alt*="TORA"] { width: 102px; }
.ap-ft .ap-mb-row .ap-mb-badge img[alt*="Business"] { width: 62px; }
.ap-ft .ap-mb-row .ap-mb-badge img[alt*="NTEA"] { width: 118px; }
.ap-ft .ap-mb-row .ap-mb-badge img[alt*="NATDA"] { width: 58px; }
.ap-ft .ap-mb-row .ap-mb-badge img[alt*="AAM"] { width: 86px; }
.ap-ft .ap-mb-row .ap-mb-badge img[alt*="Total Truck"] { width: 95px; }

/* ---- dark bottom bar ---- */
.ap-ft .ap-ft-bottom { background: #15181D; }
.ap-ft .ap-ft-bottom-in { max-width: 1360px; margin: 0 auto; padding: 16px 30px; font-size: 14px; line-height: 22px; color: #9AA3AE; text-align: center; }
.footer-wrapper.ap-ft .ap-ft-bottom-in a { color: #9AA3AE; text-decoration: none; }
.footer-wrapper.ap-ft .ap-ft-bottom-in a:hover, .footer-wrapper.ap-ft .ap-ft-bottom-in a:focus { color: #FFFFFF; }
.ap-ft .ap-ft-bottom-in span { color: #9AA3AE; }
.ap-ft .ap-ft-bottom-in .footer-sep { color: #4E5662; margin: 0 8px; }

/* ---- tablet and phone ---- */
@media (max-width: 991px) {
  .ap-ft .ap-ft-top { flex-wrap: wrap; gap: 32px; }
  .ap-ft .ap-ft-brand { flex: 0 0 100%; width: 100%; }
  .ap-ft .ap-ft-col { flex: 1 1 30%; }
}
@media (max-width: 767px) {
  .footer-wrapper.ap-ft .container { padding: 0 20px; }
  .ap-ft .ap-ft-top { flex-direction: column; gap: 24px; padding: 30px 0 26px; }
  .ap-ft .ap-ft-brand { flex: 0 0 auto; width: 100%; }
  .ap-ft .ap-ft-col { flex: 1 1 auto; width: 100%; }
  .ap-ft .ap-ft-badges-in { flex-direction: column; align-items: center; gap: 14px; padding: 20px; }
  .ap-ft .ap-mb-row { width: 100%; justify-content: center; column-gap: 22px; row-gap: 16px; }
  .ap-ft .ap-ft-badge-art { height: 58px; }
  .ap-ft .ap-mb-row .ap-mb-badge img[alt*="TORA"] { width: 82px; }
  .ap-ft .ap-mb-row .ap-mb-badge img[alt*="Business"] { width: 50px; }
  .ap-ft .ap-mb-row .ap-mb-badge img[alt*="NTEA"] { width: 96px; }
  .ap-ft .ap-mb-row .ap-mb-badge img[alt*="NATDA"] { width: 46px; }
  .ap-ft .ap-mb-row .ap-mb-badge img[alt*="AAM"] { width: 70px; }
  .ap-ft .ap-mb-row .ap-mb-badge img[alt*="Total Truck"] { width: 76px; }
  .ap-ft .ap-ft-bottom-in { padding: 14px 20px; }
}
/* === end AllPro footer redesign === */

/* === AllPro footer separator dots (Claude, Oct 2026) ===
   Bigger dots between the bottom-bar links (they were hard to see). === */
.footer-wrapper.ap-ft .ap-ft-bottom-in .footer-sep { margin: 0 10px; font-size: 28px; font-weight: 700; line-height: 0; vertical-align: -4px; }
/* === end AllPro footer separator dots === */

/* === AllPro footer link underlines (Claude, Oct 2026) ===
   Underlines the bottom-bar links so visitors can tell they are links. === */
.footer-wrapper.ap-ft .ap-ft-bottom-in a, .footer-wrapper.ap-ft .ap-ft-bottom-in p.copyright a, .footer-wrapper.ap-ft .ap-ft-bottom-in p.copyright a#aam-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* === end AllPro footer link underlines === */

/* === AllPro footer Log Out button left-aligned (Claude, Oct 2026) ===
   Lines the red Log Out button up with the Company links above it.
   Delete this block to undo. === */
.footer-wrapper.ap-ft .ap-ft-col li a[href*="logout"] { margin-left: 0; }
/* === end AllPro footer Log Out button left-aligned === */

/* === AllPro footer NTEA badge size (Claude, Oct 2026) === */
.footer-wrapper.ap-ft .ap-mb-row .ap-mb-badge img[alt*="NTEA"]{width:96px;height:auto}

/* === AllPro animated footer logo (Claude, Oct 2026): the About page GIF replaces the static footer logo on every screen size === */
html body .ap-ft .ap-ft-brand>a:first-child{display:block!important;width:160px;aspect-ratio:583/182;margin:0 0 10px;background:url("https://aam5.imgix.net/pacefiles/allprodistributing/logos/allpro/allpro_logo_-_gray_lettering.gif?rect=47,59,583,182&w=320") left center/contain no-repeat}
html body .ap-ft .ap-ft-brand>a:first-child img{display:block!important;width:100%!important;height:100%!important;opacity:0}
@media (max-width:767px){html body .ap-ft .ap-ft-brand>a:first-child{width:170px;margin:0 auto 6px;background-position:center}}
/* === end AllPro animated footer logo === */


/* === AllPro footer Company labels (Claude, Oct 2026). The Company column reads Privacy Policy / Terms to match PACE 1; the bottom bar keeps AllPro Privacy / AllPro Terms next to AAM's links. === */
html body .ap-ft-col a[data-ap-legal]{font-size:0!important;gap:0!important}
html body .ap-ft-col a[data-ap-legal][href*="privacy"]::after{content:"Privacy Policy";font-size:16px;line-height:22px}
html body .ap-ft-col a[data-ap-legal][href*="terms"]::after{content:"Terms";font-size:16px;line-height:22px}
/* === end AllPro footer Company labels === */


/* ==========================================================================
   SECTION 7. CATALOG, PRODUCT PAGE AND HEADER SEARCH (THOMAS, OCT 2026)
   The Locations pop-up, product page messages and kit lists come first:
   order matters, because the order button colors below must win over
   the Check Stock button rule. Then order buttons, prices, header search, list view.
   Later rules in the list view part patch earlier ones; when the catalog
   layout is reworked, fold them together.
   ========================================================================== */


/* --- Locations (Check Stock) pop-up (Thomas) --- */
/* === Check Stock / Locations modal – layout only === */
.modal[role="dialog"] .modal-dialog {
  max-width: 520px;
}
.modal[role="dialog"] .modal-header h4,
.modal[role="dialog"] .modal-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

/* Hide the two empty spacer cells */
.modal .table tbody td:nth-child(3),
.modal .table tbody td:nth-child(5) {
  display: none !important;
}

/* Force the remaining four cells into a clean row */
.modal .table {
  table-layout: fixed;
  width: 100%;
  font-size: 14px;
}
.modal .table td,
.modal .table th {
  padding: 8px 10px;
  vertical-align: middle;
  white-space: nowrap;
}
.modal .table tbody td:nth-child(1) { width: 34%; font-weight: 600; }
.modal .table tbody td:nth-child(2) { width: 14%; text-align: right; }
.modal .table tbody td:nth-child(4) { width: 20%; }
.modal .table tbody td:nth-child(6) { width: 32%; font-size: 13px; }

/* Force Locations title and Part Number onto separate lines */
#locationsModal .modal-header,
.modal[id^="locationsModal"] .modal-header {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
#locationsModal .modal-header h4,
#locationsModal .modal-header h5,
.modal[id^="locationsModal"] .modal-header h4,
.modal[id^="locationsModal"] .modal-header h5 {
  margin: 0;
  line-height: 1.3;
}
#locationsModal .modal-header h5,
.modal[id^="locationsModal"] .modal-header h5 {
  font-size: 14px;
  font-weight: 500;
  color: #444;
}
/* === Locations modal – fit and headers === */
.modal[role="dialog"] .modal-dialog,
#locationsModal .modal-dialog {
  max-width: 640px;
}

#locationsModal .table,
.modal .table {
  table-layout: auto;
  width: 100%;
}

#locationsModal .table td,
#locationsModal .table th,
.modal .table td,
.modal .table th {
  white-space: nowrap;
  padding: 8px 12px;
}

/* Keep the last column inside the box */
#locationsModal .table tbody td:nth-child(6),
.modal .table tbody td:nth-child(6) {
  white-space: normal;
  min-width: 140px;
  max-width: 200px;
}

/* Check Stock button – higher contrast. NOTE: the [data-bs-toggle="modal"] selectors match every pop-up button (Instant Order, Lost Sale, Quick Order...); keep this group ABOVE the order button colors. */
.item-details .btn,
.product-info .btn,
.catalog-item-details .btn,
a.btn[data-bs-toggle="modal"],
button.btn[data-bs-toggle="modal"],
.btn-outline-secondary:has(+ .modal),
.availability + .btn,
.stock-status + .btn {
  background: #0057B8 !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  box-shadow: none !important;
}
.item-details .btn:hover,
.product-info .btn:hover,
a.btn[data-bs-toggle="modal"]:hover,
button.btn[data-bs-toggle="modal"]:hover {
  background: #00478F !important;
  color: #fff !important;
}
/* Extra space between availability count and Check Stock button */
.availability + .btn,
.stock-status + .btn,
.item-details .btn,
.product-info .btn {
  margin-left: 10px !important;
}


/* --- Product page messages moved to the left column (Thomas; the JS adds .ap-left-msgs) --- */
/* Force expanded messages to full height */
.ap-expanded,
.ap-expanded * {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}
.ap-expanded::after,
.ap-expanded *::after {
  display: none !important;
  content: none !important;
}
.ap-left-msgs {
  margin-top: 16px;
}
.ap-left-msgs .text-danger,
.ap-left-msgs .ap-spray-banner {
  max-height: none !important;
  overflow: visible !important;
  height: auto !important;
  margin-bottom: 12px;
}
.ap-left-msgs .ap-msg-toggle {
  display: none;
}
.ap-left-msgs .text-danger,
.ap-left-msgs .ap-spray-banner,
.ap-left-msgs [class*="category"] {
  margin-bottom: 12px;
  max-height: none !important;
  overflow: visible !important;
  height: auto !important;
}

/* Collapse long kit-component lists only when needed */
.product-info .alert-info.ap-kit-tall,
.product-info-card .alert-info.ap-kit-tall {
  max-height: 140px;
  overflow: hidden;
  position: relative;
}
.product-info .alert-info.ap-kit-tall.ap-kit-open,
.product-info-card .alert-info.ap-kit-tall.ap-kit-open {
  max-height: none !important;
  overflow: visible !important;
}
.product-info .alert-info.ap-kit-tall:not(.ap-kit-open)::after,
.product-info-card .alert-info.ap-kit-tall:not(.ap-kit-open)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 36px;
  background: linear-gradient(transparent, #fff);
  pointer-events: none;
}
.ap-kit-toggle {
  display: inline-block;
  margin: 6px 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: #0057B8;
  cursor: pointer;
  text-decoration: underline;
}

/* === AllPro product page Check Fitment button (Claude, Oct 2026). Styles the button the JS adds next to LOCATIONS on /catalog/item pages; it opens PACE's own fitment check. === */
html body .product-info button.ap-fit-btn{display:inline-block;background:#fff!important;color:#0057B8!important;border:1px solid #0057B8!important;border-radius:4px!important;box-shadow:none!important;font-weight:700!important;font-size:13.5px!important;line-height:1.5;letter-spacing:.3px;text-transform:uppercase;padding:5px 13px!important;margin-left:8px!important;vertical-align:middle}
html body .product-info button.ap-fit-btn:hover,html body .product-info button.ap-fit-btn:focus{background:#0057B8!important;color:#fff!important}
/* === end AllPro product page Check Fitment button === */

/* ============================================================
   AllPro order buttons — lightning yellow Instant Order,
   green Price Match, red Lost Sale, plus on Add to Order
   ============================================================ */

/* ---- shared lightning yellow (Instant Order + Quick Order) ---- */
button.btn-instant-order,
button.instant-order.btn-instant-order,
button[class*="instant-order"]:not(.btn-price-match),
.browse-product-card button[class*="instant"],
.browse-product-card a[class*="instant"],
.product-card button[class*="instant"],
.product-card a[class*="instant"],
button.btn-quick-order,
button.btn.btn-secondary.btn-quick-order,
.btn-quick-order-section button,
.btn-quick-order-section .btn-quick-order {
  background: #FFEB3B !important;
  color: #1a1a1a !important;
  font-weight: 700 !important;
  border: 1px solid #FDD835 !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

button.btn-instant-order:hover,
button.instant-order.btn-instant-order:hover,
button[class*="instant-order"]:not(.btn-price-match):hover,
.browse-product-card button[class*="instant"]:hover,
.product-card button[class*="instant"]:hover,
button.btn-quick-order:hover,
button.btn.btn-secondary.btn-quick-order:hover,
.btn-quick-order-section button:hover {
  background: #FFF176 !important;
  box-shadow: 0 4px 12px rgba(255, 235, 59, 0.55) !important;
  transform: translateY(-1px) scale(1.02) !important;
}

/* ---- bolt on Instant Order buttons that don’t already have one ---- */
button.btn-instant-order::before,
button.instant-order.btn-instant-order::before,
button[class*="instant-order"]:not(.btn-price-match)::before,
.browse-product-card button[class*="instant"]::before,
.product-card button[class*="instant"]::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2L3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2L3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

button.btn-instant-order svg,
button.btn-quick-order svg,
button[class*="instant"] svg {
  width: 1em !important;
  height: 1em !important;
  flex-shrink: 0 !important;
}

/* ---- product page button order ---- */
.product-order-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.product-order-actions input.btn-add-to-order,
.product-order-actions input[name="add_to_order"] { order: 1 !important; }
.product-order-actions button.btn-instant-order { order: 2 !important; }
.product-order-actions button.btn-price-match { order: 3 !important; }
.product-order-actions button.item-lost-sale { order: 4 !important; }

/* ---- Add to Order — plus icon (input, so background) ---- */
input.btn-add-to-order,
input[name="add_to_order"],
input.btn.btn-warning.product-order.btn-add-to-order {
  background-color: #1a1a1a !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 14px center !important;
  background-size: 16px 16px !important;
  padding-left: 38px !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 700 !important;
}
input.btn-add-to-order:hover,
input[name="add_to_order"]:hover {
  background-color: #000 !important;
}

/* ---- Price Match — green ---- */
button.btn-info.instant-order.btn-price-match,
button.btn-price-match,
.product-order-actions .btn-price-match {
  background: #2E7D32 !important;
  color: #fff !important;
  font-weight: 700 !important;
  border: 1px solid #1B5E20 !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  opacity: 1 !important;
}
button.btn-info.instant-order.btn-price-match:hover,
button.btn-price-match:hover {
  background: #1B5E20 !important;
  color: #fff !important;
}

/* ---- Lost Sale — red ---- */
button.item-lost-sale,
button.btn-secondary.item-lost-sale,
button[data-lost-sale],
.product-order-actions button.item-lost-sale {
  background: #C8102E !important;
  color: #fff !important;
  font-weight: 700 !important;
  border: 1px solid #A50D26 !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}
button.item-lost-sale:hover,
button.btn-secondary.item-lost-sale:hover,
button[data-lost-sale]:hover {
  background: #A50D26 !important;
  color: #fff !important;
}
/* === end AllPro order buttons === */
/* ---- polish: consistent Instant Order + even product buttons + larger plus ---- */

/* Force catalog Instant Order buttons to the same yellow + uppercase */
.browse-product-card button[class*="instant"],
.browse-product-card a[class*="instant"],
.product-card button[class*="instant"],
.product-card a[class*="instant"],
button.btn-instant-order,
button[class*="instant-order"]:not(.btn-price-match) {
  background: #FFEB3B !important;
  color: #1a1a1a !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}

/* Even widths on product page buttons */
.product-order-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.product-order-actions > input,
.product-order-actions > button {
  flex: 1 1 calc(25% - 8px) !important;
  min-width: 120px !important;
  justify-content: center !important;
}

/* Larger plus on Add to Order */
input.btn-add-to-order,
input[name="add_to_order"],
input.btn.btn-warning.product-order.btn-add-to-order {
  background-size: 18px 18px !important;
  background-position: 12px center !important;
  padding-left: 40px !important;
}
/* Keep product page buttons on one row, equal-ish width */
.product-order-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
}
.product-order-actions > input,
.product-order-actions > button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* Price — stronger so it punches through the watermark */
.modern-price-wrapper .product-cost,
.modern-price-wrapper .cost-currency {
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  color: #15181D !important;
  letter-spacing: -0.02em !important;
  position: relative !important;
  z-index: 2 !important;
  line-height: 1.1 !important;
}

.modern-price-wrapper .cost-label {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #6B7482 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Soften the watermark — still visible in screenshots, less aggressive on the price */
.modern-price-wrapper .price-watermark {
  opacity: 0.22 !important;
  color: #9AA3AE !important;
  font-weight: 500 !important;
  font-size: 0.7rem !important;
  z-index: 1 !important;
  pointer-events: none !important;
  user-select: none !important;
}
/* Catalog price — stronger + watermark overlay */
.browse-grid-simple-price {
  position: relative !important;
  display: inline-block !important;
  overflow: hidden !important;
}

.browse-grid-simple-price .product-cost {
  position: relative !important;
  z-index: 2 !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #15181D !important;
  letter-spacing: -0.02em !important;
}
/* Catalog price watermark — stronger and more readable */
.browse-grid-simple-price {
  position: relative !important;
  display: inline-block !important;
  overflow: hidden !important;
}
.browse-grid-simple-price .product-cost {
  position: relative !important;
  z-index: 2 !important;
  font-weight: 800 !important;
  color: #15181D !important;
}
.browse-grid-simple-price .ap-cat-watermark {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  color: #6B7482 !important;
  opacity: 0.55 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 1 !important;
  letter-spacing: 0.01em !important;
}


/* --- Header search row: search width, Quick Order spacing, Shop by vehicle buttons (Thomas) --- */
/* One-row polish — wider search, no Quick Order overlap */
#nav-search #nav-search-stack {
  flex: 0 1 480px !important;
  max-width: 480px !important;
  min-width: 320px !important;
}

.btn-quick-order-section,
button.btn-quick-order {
  flex: 0 0 auto !important;
  margin-left: 8px !important;
  margin-right: 8px !important;
}

#nav-account,
.js-nav-account-wrap,
.btn-quick-order-section + * {
  flex: 0 0 auto !important;
  margin-left: 0 !important;
}
#nav-search input[type="search"],
#nav-search .ais-SearchBox-input,
#nav-search input[placeholder*="Search"] {
  width: 100% !important;
  min-width: 280px !important;
}
#nav-search #nav-search-stack,
#nav-search .ais-SearchBox,
#nav-search form[role="search"] {
  flex: 0 1 560px !important;
  max-width: 560px !important;
  min-width: 360px !important;
}
#nav-search .ais-SearchBox-submit,
#nav-search button[type="submit"],
#nav-search .btn {
  min-width: 72px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  white-space: nowrap !important;
}
#nav-search .ais-SearchBox-submit,
#nav-search button[type="submit"] {
  font-size: 0 !important;
  min-width: 44px !important;
  padding: 6px 10px !important;
}

#nav-search .ais-SearchBox-submit svg,
#nav-search .ais-SearchBox-submit i,
#nav-search button[type="submit"] svg,
#nav-search button[type="submit"] i {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
}
/* Restore YMM Search button text */
.nav-horizontal-ymm-form button[type="submit"],
.ymm-nav-form button[type="submit"],
.ymm-nav-action-btn {
  font-size: 0.85rem !important;
  min-width: 0 !important;
  padding: 4px 12px !important;
}
/* Force YMM Search text back */
.nav-horizontal-ymm-form .btn,
.nav-horizontal-ymm-form button,
.ymm-nav-form .btn,
.ymm-nav-form button,
button.ymm-nav-action-btn {
  font-size: 0.875rem !important;
  color: #fff !important;
  min-width: 64px !important;
  padding: 6px 14px !important;
  text-indent: 0 !important;
  letter-spacing: normal !important;
}
/* Restore YMM Search text — higher specificity */
#nav-search .nav-horizontal-ymm-form button.ymm-nav-action-btn,
#nav-search button.ymm-nav-action-btn.nav-horizontal-ymm-submit,
button.btn.btn-danger.ymm-nav-action-btn {
  font-size: 0.875rem !important;
  color: #fff !important;
  min-width: 64px !important;
  padding: 6px 14px !important;
  text-indent: 0 !important;
}
/* Balance search vs YMM */
#nav-search #nav-search-stack,
#nav-search .ais-SearchBox,
#nav-search form[role="search"] {
  flex: 0 1 500px !important;
  max-width: 500px !important;
  min-width: 360px !important;
}

#nav-search-ymm,
.nav-horizontal-ymm-form {
  flex: 1 1 auto !important;
  max-width: none !important;
}

.nav-horizontal-ymm-field select,
.nav-horizontal-ymm-field .form-select {
  max-width: 130px !important;
}

/* === AllPro price color — red on grid + product page === */
.browse-grid-simple-price .product-cost,
.browse-grid-simple-price .cost-currency,
.modern-price-wrapper .product-cost,
.modern-price-wrapper .cost-currency,
.product-cost,
.price-watermark-wrap .product-cost {
  color: #C8102E !important;
}
/* === end price color === */

/* === AllPro catalog list view (Claude for Evan, Oct 2026) ===
   One block for the list ("vertical") catalog view.
   Part 1 is Thomas's list view styling, his separate patches folded together
   with the same result (all widths; phones in the max-width 767px group).
   Part 2 is Evan's Option A desktop layout (Oct 19, 2026): wider Refine Results
   panel, bigger photos and part numbers, two-line descriptions, and the
   Check Fitment button on every row. === */
/* --- Part 1: base list view (Thomas, Oct 2026) --- */
.browse-view-mode-vertical .browse-product-card{position:relative!important;padding:10px 14px!important;overflow:visible!important}
.browse-view-mode-vertical .primary-image-container{max-width:56px!important;padding-right:8px!important}
.browse-view-mode-vertical .primary-image-container img{max-width:48px!important;max-height:48px!important;object-fit:contain!important;border-radius:3px!important}
.browse-view-mode-vertical .list-group,
.browse-view-mode-vertical .product-pricing,
.browse-view-mode-vertical .load-fitment,
.browse-view-mode-vertical a[href*="Application"],
.browse-view-mode-vertical .product-description.d-lg-block.d-xl-none,
.browse-view-mode-vertical .product-description.d-none.d-lg-block{display:none!important}
.browse-view-mode-vertical .product-column-info{max-width:calc(100% - 380px)!important;padding-right:12px!important}
.browse-view-mode-vertical .product-column-info h3{font-size:14.5px!important;margin:0 0 1px!important;line-height:1.2!important}
.browse-view-mode-vertical .product-column-info h3 a{color:#2B4A94!important;text-decoration:none!important}
.browse-view-mode-vertical .product-column-info .product-description:first-of-type,
.browse-view-mode-vertical .product-description.d-lg-none,
.browse-view-mode-vertical .pies-desc,
.browse-view-mode-vertical .desc-loader{display:block!important;overflow:visible!important;max-height:none!important}
.browse-view-mode-vertical .pies-desc p,
.browse-view-mode-vertical .product-description p{display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:12px!important;line-height:1.3!important;color:#5A6270!important;margin:2px 0 0!important}
.browse-view-mode-vertical .product-column-form{position:absolute!important;right:8px!important;top:12px!important;margin:0!important;width:auto!important}
.browse-view-mode-vertical .order-form{display:grid!important;grid-template-columns:auto auto!important;grid-template-rows:auto auto!important;column-gap:16px!important;row-gap:2px!important;margin:0!important}
.browse-view-mode-vertical .order-form > h4{grid-column:1!important;grid-row:1!important;justify-self:end!important;display:flex!important;align-items:center!important;gap:6px!important;margin:0!important;font-size:13px!important}
.browse-view-mode-vertical .order-form > h4 .product-locations{font-size:10.5px!important;padding:2px 8px!important;border-radius:3px!important;background:#2B4A94!important;color:#fff!important;border:0!important}
.browse-view-mode-vertical .order-form > .mb-3:first-of-type{grid-column:1!important;grid-row:2!important;justify-self:end!important}
.browse-view-mode-vertical .order-form > .mb-3:last-child{grid-column:2!important;grid-row:1 / span 2!important;display:flex!important;flex-direction:column!important;gap:3px!important;width:128px!important;margin:0!important}
.browse-view-mode-vertical .price-watermark{opacity:0.15!important;font-size:0.5rem!important}
.browse-view-mode-vertical .quantity-input{width:42px!important;height:26px!important;color:#15181D!important;background:#fff!important;text-align:center!important;-webkit-text-fill-color:#15181D!important}
.browse-view-mode-vertical .btn-instant-order,
.browse-view-mode-vertical .btn-add-to-order,
.browse-view-mode-vertical button[data-lost-sale]{width:128px!important;height:26px!important;font-size:10px!important;font-weight:700!important;text-transform:uppercase!important;border-radius:3px!important;margin:0!important}
.browse-view-mode-vertical button[data-lost-sale]{background:#C8102E!important;color:#fff!important}
.browse-view-mode-vertical .quantity-input,
.browse-view-mode-vertical input[name="qty"]{padding:2px 4px!important;color:#15181D!important;background:#fff!important;opacity:1!important;-webkit-text-fill-color:#15181D!important;caret-color:#15181D!important}
.browse-view-mode-vertical .btn-instant-order{background:#FFEB3B!important;color:#1a1a1a!important;white-space:nowrap!important;font-size:8px!important;letter-spacing:0!important;padding:0 2px!important;line-height:26px!important;height:26px!important;overflow:hidden!important}
.browse-view-mode-vertical .cost-label{letter-spacing:0!important}
.browse-view-mode-vertical .btn-instant-order,
.browse-view-mode-vertical button.btn-instant-order,
.browse-view-mode-vertical .order-form .btn-instant-order{font-size:10.5px!important;letter-spacing:0!important;padding:0 3px!important;white-space:nowrap!important;line-height:26px!important;height:26px!important;overflow:hidden!important}
.browse-view-mode-vertical .cost-currency,
.browse-view-mode-vertical .price-watermark-wrap .cost-currency{display:none!important}
.browse-view-mode-vertical .btn-instant-order,
.browse-view-mode-vertical button.btn-instant-order{font-size:11.5px!important;font-weight:700!important;letter-spacing:0.1px!important;padding:0 6px!important;height:28px!important;line-height:28px!important;white-space:nowrap!important;text-transform:uppercase!important}
.browse-view-mode-vertical input.btn-add-to-order,
.browse-view-mode-vertical input[name="add_to_order"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:18px center!important;background-size:12px 12px!important;padding:0 8px 0 32px!important;text-align:center!important;text-indent:0!important}
.browse-view-mode-vertical .btn-instant-order::before{width:1.4em!important;height:1.4em!important;margin-right:4px!important}
.browse-view-mode-vertical .product-column-info.col-lg-5,
.browse-view-mode-vertical .product-column-info{flex:0 0 64%!important;max-width:64%!important;width:64%!important;padding-right:12px!important}
@media (max-width: 767px){
  .browse-view-mode-vertical .browse-product-card{padding:10px 12px!important;margin-bottom:8px!important}
  .browse-view-mode-vertical .primary-image-container{float:left!important;max-width:52px!important;margin:0 10px 6px 0!important}
  .browse-view-mode-vertical .primary-image-container img{max-width:48px!important;max-height:48px!important;object-fit:contain!important}
  .browse-view-mode-vertical .product-column-info h3{font-size:15px!important;margin:0!important;line-height:1.3!important}
  .browse-view-mode-vertical .favorite-toggle,
  .browse-view-mode-vertical .favorite-toggle-wrapper,
  .browse-view-mode-vertical .pies-desc,
  .browse-view-mode-vertical .product-description,
  .browse-view-mode-vertical button[data-lost-sale],
  .browse-view-mode-vertical .cost-label{display:none!important}
  .browse-view-mode-vertical .order-form{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:6px!important;margin-top:8px!important;width:100%!important;clear:both!important}
  .browse-view-mode-vertical .order-form > h4{display:flex!important;align-items:center!important;justify-content:space-between!important;margin:0!important;width:100%!important}
  .browse-view-mode-vertical .order-form > h4 .inventory{font-size:13px!important}
  .browse-view-mode-vertical .order-form > h4 .product-locations{font-size:12px!important;padding:5px 12px!important}
  .browse-view-mode-vertical .order-form > .mb-3:first-of-type{display:flex!important;align-items:center!important;justify-content:space-between!important;margin:0!important;width:100%!important}
  .browse-view-mode-vertical .price-watermark-wrap .product-cost{font-size:1.3rem!important;font-weight:800!important}
  .browse-view-mode-vertical .quantity-input{width:48px!important;height:34px!important}
  .browse-view-mode-vertical .order-form > .mb-3:last-child{display:flex!important;flex-direction:column!important;gap:6px!important;width:100%!important;margin:0!important}
  .browse-view-mode-vertical .btn-instant-order,
  .browse-view-mode-vertical .btn-add-to-order,
  .browse-view-mode-vertical input.btn-add-to-order{width:100%!important;height:40px!important;font-size:13px!important;line-height:40px!important}
}
.browse-view-mode-vertical .browse-product-card{background:#F7F9FB!important;border:1px solid #E2E6EB!important;border-radius:6px!important;box-shadow:0 1px 2px rgba(21, 24, 29, 0.04)!important;margin-bottom:8px!important;transition:background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease!important}
.browse-view-mode-vertical .browse-product-card:hover{background:#F0F4F8!important;border-color:#C8D0DA!important;box-shadow:0 2px 6px rgba(21, 24, 29, 0.07)!important}
.browse-view-mode-vertical .order-form > .mb-3:first-of-type{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:14px!important;margin:0!important}
.browse-view-mode-vertical .cost-label{font-size:12px!important;font-weight:600!important;color:#5A6270!important;text-transform:none!important;margin:0!important}
.browse-view-mode-vertical .price-watermark-wrap .product-cost{font-size:1.35rem!important;font-weight:800!important;color:#C8102E!important;margin:0 6px 0 0!important}
.browse-view-mode-vertical .ap-qty-label{font-size:12px!important;font-weight:600!important;color:#5A6270!important;margin:0 4px 0 10px!important}
.browse-view-mode-vertical .quantity-input,
.browse-view-mode-vertical input[name="qty"]{width:48px!important;height:30px!important;font-size:14px!important;font-weight:600!important;text-align:center!important;border:1px solid #D0D5DC!important;border-radius:3px!important;margin:0!important}
/* --- Part 2: desktop layout, Option A (Claude for Evan, Oct 19, 2026). 992px and wider --- */
@media (min-width:992px){
html body .browse-view-mode-vertical .browse-product-card{padding:10px 14px 8px!important;margin-bottom:10px!important;background:#fff!important;border:1px solid #DDE2E8!important;border-radius:6px!important}
html body .browse-view-mode-vertical .browse-product-card:hover{background:#FAFBFD!important;border-color:#C8D0DA!important}
html body .browse-view-mode-vertical .browse-product-card>.product-body{padding:0!important}
/* one column: the platform's hidden button column no longer takes 150px */
html body .browse-view-mode-vertical .product-body-grid{padding:0!important;grid-template-columns:minmax(0,1fr)!important}
html body .browse-view-mode-vertical .product-group-buttons{display:none!important}
html body .browse-view-mode-vertical .product-group-info>.row{margin-top:0!important}
html body .browse-view-mode-vertical .product-group-info>.row>.col-12>.row{align-items:center!important;flex-wrap:nowrap!important}
/* photo: a white box, picture fit inside */
html body .browse-view-mode-vertical .primary-image-container{flex:0 0 156px!important;width:156px!important;max-width:156px!important;padding:0 16px 0 0!important;float:none!important}
html body .browse-view-mode-vertical .primary-image-container>a{display:flex!important;align-items:center;justify-content:center;width:100%!important;height:96px!important;background:#fff;border:1px solid #E6EAEF;border-radius:4px;padding:6px;box-sizing:border-box}
html body .browse-view-mode-vertical .primary-image-container img{width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;border-radius:0!important}
html body .browse-view-mode-vertical .primary-image-container + div{flex:1 1 auto!important;max-width:none!important;width:auto!important;min-width:0!important}
/* text column runs up to the price block (the price and buttons take about 500px at the right) */
html body .browse-view-mode-vertical .product-column-info.col-lg-5,html body .browse-view-mode-vertical .product-column-info{position:relative!important;flex:0 0 auto!important;width:calc(100% - 500px)!important;max-width:calc(100% - 500px)!important;padding-right:20px!important}
html body .browse-view-mode-vertical .product-column-info h3{font-size:19px!important;line-height:1.25!important;margin:0 0 4px!important;padding-right:150px;display:flex!important;align-items:center;gap:10px;flex-wrap:wrap}
html body .browse-view-mode-vertical .product-column-info h3 a{color:#0057B8!important;font-weight:700!important}
html body .browse-view-mode-vertical .product-column-info .product-description p{font-size:14px!important;line-height:1.35!important;color:#414852!important;margin:0 0 3px!important;white-space:normal!important}
/* description: two full lines, then an ellipsis */
html body .browse-view-mode-vertical .pies-desc,html body .browse-view-mode-vertical .pies-desc *{white-space:normal!important;font-size:14px!important;line-height:1.4!important;color:#414852!important}
html body .browse-view-mode-vertical .pies-desc{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;overflow:hidden!important;max-height:none!important}
html body .browse-view-mode-vertical .pies-desc p{display:inline!important;overflow:visible!important;text-overflow:clip!important}
/* the platform's Check Fitment button, top right of the text column (it opens PACE's fitment check) */
html body .browse-view-mode-vertical .product-column-info p.load-fitment{display:inline-flex!important;align-items:center;position:absolute!important;top:0;right:20px;margin:0!important;font-size:13px!important}
html body .browse-view-mode-vertical p.load-fitment strong{display:none!important}
html body .browse-view-mode-vertical p.load-fitment .badge{background:#fff!important;color:#0057B8!important;border:1px solid #0057B8!important;border-radius:3px!important;font-size:12px!important;font-weight:700!important;letter-spacing:.3px;text-transform:uppercase;padding:5px 10px!important;cursor:pointer}
html body .browse-view-mode-vertical p.load-fitment .badge:hover{background:#0057B8!important;color:#fff!important}
/* price and order buttons centered on the row */
html body .browse-view-mode-vertical .product-column-form{top:50%!important;transform:translateY(-50%)!important;right:16px!important}
}
/* screens under 1600px: Check Fitment sits under the part number */
@media (min-width:992px) and (max-width:1599px){
html body .browse-view-mode-vertical .product-column-info h3{padding-right:0}
html body .browse-view-mode-vertical .product-column-info p.load-fitment{position:static!important;margin:4px 0 2px!important}
}
/* screens under 1280px: smaller photo and part number */
@media (min-width:992px) and (max-width:1279px){
html body .browse-view-mode-vertical .primary-image-container{flex-basis:112px!important;width:112px!important;max-width:112px!important;padding-right:12px!important}
html body .browse-view-mode-vertical .primary-image-container>a{height:72px!important}
html body .browse-view-mode-vertical .product-column-info h3{font-size:17px!important}
}
/* small laptops (992 to 1199px): price and order buttons drop under the description */
@media (min-width:992px) and (max-width:1199px){
html body .browse-view-mode-vertical .primary-image-container + div>.row{flex-wrap:wrap!important}
html body .browse-view-mode-vertical .product-column-info.col-lg-5,html body .browse-view-mode-vertical .product-column-info{width:100%!important;max-width:100%!important;padding-right:0!important}
html body .browse-view-mode-vertical .product-column-form{position:static!important;transform:none!important;width:100%!important;margin:10px 0 0!important}
html body .browse-view-mode-vertical .order-form{justify-content:end!important}
}
/* wider Refine Results panel on wide screens (platform default 240px): 300px from 1440, 360px from 1600 */
@media (min-width:1440px){
html body .browse-shell.browse-shell-refresh:has(.browse-view-mode-vertical){grid-template-columns:300px minmax(0,1fr)!important}
html body .browse-shell-refresh:has(.browse-view-mode-vertical) .browse-sidebar-col-refresh,html body .browse-shell-refresh:has(.browse-view-mode-vertical) .browse-sidebar{width:300px!important;max-width:300px!important}
html body .browse-shell-refresh:has(.browse-view-mode-vertical) .filter-option-label{font-size:15px}
}
@media (min-width:1600px){
html body .browse-shell.browse-shell-refresh:has(.browse-view-mode-vertical){grid-template-columns:360px minmax(0,1fr)!important}
html body .browse-shell-refresh:has(.browse-view-mode-vertical) .browse-sidebar-col-refresh,html body .browse-shell-refresh:has(.browse-view-mode-vertical) .browse-sidebar{width:360px!important;max-width:360px!important}
}
/* === end AllPro catalog list view === */

/* === Staff header: space between Shop by vehicle and the gray Enter Account Number box (Claude for Evan, Oct 19, 2026). Thomas's rule above sets margin-left:0 on #nav-account; this wins. Customers don't have this box. === */
@media (min-width:768px){html body #top-navbar > #nav-account{margin-left:12px!important}}
/* === end staff header spacing === */
/* === Staff header on laptops (Claude for Evan, Oct 19, 2026). Staff only: #nav-account (the gray Enter Account Number box) only appears for staff logins. Under 1800px the staff header was wider than the screen (logo squeezed, account box and user button pushed off the right edge). Here the logo holds at 142px, Shop by vehicle and Reset show icons only, and the account box is narrower with a "View As" button. Fits down to 1280px. === */
@media (min-width:768px) and (max-width:1799px){
html body #top-navbar:has(> #nav-account) > #nav-logo{flex:0 0 142px!important;max-width:142px!important}
html body #top-navbar:has(> #nav-account) > #nav-set{flex:0 0 auto!important}
html body #top-navbar:has(> #nav-account) > #nav-logo img{max-width:100%!important;height:auto!important}
html body #top-navbar:has(> #nav-account) #nav-search #nav-search-stack{flex:0 1 400px!important;max-width:400px!important;min-width:190px!important}
html body #top-navbar:has(> #nav-account) #nav-search #nav-search-stack *{min-width:0!important}
html body #top-navbar:has(> #nav-account) #nav-search > #nav-search-ymm{flex:1 1 0!important;min-width:530px!important}
html body #top-navbar:has(> #nav-account) .nav-horizontal-ymm-intro{flex:0 0 auto!important;padding:0 10px!important;gap:0!important}
html body #top-navbar:has(> #nav-account) .nav-horizontal-ymm-intro > :not(.nav-horizontal-ymm-icon){display:none!important}
html body #top-navbar:has(> #nav-account) .nav-horizontal-ymm-reset{font-size:0!important;gap:0!important}
html body #top-navbar:has(> #nav-account) .nav-horizontal-ymm-reset svg{font-size:15px!important}
html body #top-navbar:has(> #nav-account) #nav-account input.account-search{flex:0 0 130px!important;width:130px!important;min-width:0!important}
html body #top-navbar:has(> #nav-account) #nav-account #btn-account::before{content:"View As"!important}
}
/* === end staff header on laptops === */

/* === AllPro order button icons (Claude for Evan, Oct 19, 2026). Bolt on Instant Order sits 5px from the words (was 10px). The matching Custom JS block "AllPro order button icons centered" centers icon plus words in Instant Order and Add to Order. === */
html body button.btn-instant-order,html body button.instant-order.btn-instant-order{gap:5px!important}
html body button.btn-instant-order::before,html body button.instant-order.btn-instant-order::before,html body .browse-view-mode-vertical .btn-instant-order::before{margin-right:0!important}
/* === end AllPro order button icons === */

/* === AllPro product page stock by warehouse (Claude for Evan, Oct 19, 2026). Styles the table the Custom JS block of the same name adds to the product page buy box. === */
html body .product-info #ap-wh{width:100%;max-width:none;align-self:stretch;box-sizing:border-box;margin:14px 0 4px;border:1px solid #E2E6EB;border-radius:6px;background:#fff;overflow:hidden}
html body .product-info #ap-wh .ap-wh-title{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5A6270;padding:8px 12px;background:#F4F6F9;border-bottom:1px solid #E2E6EB}
html body .product-info #ap-wh .ap-wh-table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.3;color:#15181D}
html body .product-info #ap-wh .ap-wh-table th{font-size:12px;font-weight:600;color:#5A6270;text-align:left;padding:7px 12px;border-bottom:1px solid #E2E6EB;white-space:nowrap}
html body .product-info #ap-wh .ap-wh-table td{padding:7px 12px;border-bottom:1px solid #EEF1F4}
html body .product-info #ap-wh .ap-wh-table tr:last-child td{border-bottom:0}
html body .product-info #ap-wh .ap-wh-table td:first-child{font-weight:600}
html body .product-info #ap-wh .ap-wh-num{text-align:right;font-weight:700;width:1%;white-space:nowrap}
html body .product-info #ap-wh .ap-wh-zero td{color:#9AA3AE;font-weight:400}
@media (max-width:767px){html body .product-info #ap-wh .ap-wh-table{font-size:12.5px}html body .product-info #ap-wh .ap-wh-table th,html body .product-info #ap-wh .ap-wh-table td{padding:6px 6px;white-space:normal}html body .product-info #ap-wh .ap-wh-table th:first-child,html body .product-info #ap-wh .ap-wh-table td:first-child{padding-left:10px}}
/* === end AllPro product page stock by warehouse === */


/* ==========================================================================
   SECTION 8. PHONES (MAX-WIDTH 767PX)
   Kept last so these win over the desktop rules above.
   ========================================================================== */

/* === AllPro mobile layout (Claude, Oct 2026): phones only (max-width 767px), desktop untouched === */
@media (max-width:767px){
/* Header: logo, phone and menu button on one row (the menu button wrapped under the bar and covered the login form) */
html body #top-navbar>#mobile-phone{flex:1 1 0!important;width:auto!important;min-width:0}
html body #top-navbar>.navbar-toggler{flex:0 0 auto!important;width:auto!important;margin:0 8px 0 0!important}
/* Open menu: items were shifted 15px off the left edge, and Brands and Categories kept the desktop white pill text (invisible on white) */
html body #top-navbar #navbar>ul.navbar-nav{margin-left:0!important;margin-right:0!important}
html body #top-navbar #navbar .navbar-nav>li:has(a[href="catalog/brands"]),html body #top-navbar #navbar .navbar-nav>li:has(a[href="catalog/categories"]){padding:0!important;margin:0!important}
html body #top-navbar #navbar .navbar-nav>li>a[href="catalog/brands"],html body #top-navbar #navbar .navbar-nav>li>a[href="catalog/categories"],html body #top-navbar #navbar .navbar-nav>li>.navbar-li-wrapper>a[href="catalog/brands"],html body #top-navbar #navbar .navbar-nav>li>.navbar-li-wrapper>a[href="catalog/categories"]{display:flex!important;justify-content:space-between;align-items:center;width:100%!important;color:#000!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:10px 15px!important;line-height:24.5px!important;height:auto!important}

/* Logged-out home: hero first, then the customer login, then the rest */
html body #home-page:has(.ap-lo-hero-wrap){display:flex;flex-direction:column}
html body #home-page:has(.ap-lo-hero-wrap)>.row:has(.ap-lo-hero-wrap),
html body #home-page:has(.ap-lo-hero-wrap)>.row:has(.ap-lo-hero-wrap)>.col-12{display:contents}
html body #home-page:has(.ap-lo-hero-wrap)>.row:has(.ap-lo-hero-wrap)>.col-12>*{order:3}
html body #home-page:has(.ap-lo-hero-wrap)>.row:has(.ap-lo-hero-wrap)>.col-12>:has(.ap-lo-hero-wrap){order:1}
html body #home-page:has(.ap-lo-hero-wrap)>.home-mobile-cta{order:2;margin:0 0 8px;padding-top:26px;border-top:1px solid #D9DCE0}
html body #home-page:has(.ap-lo-hero-wrap)>.home-mobile-cta::before{content:"Already a customer? Log in";display:block;margin:0 0 14px;font-family:'Barlow','Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:18px;color:#15181D;text-align:center}
html body #home-page:has(.ap-lo-hero-wrap)>.row:not(:has(.ap-lo-hero-wrap)){order:9}

/* Logged-out hero: the desktop art is all text and shrinks to unreadable, so phones get it as live text */
html body .ap-lo-hero{background:none!important;padding:30px 5.2% 34px!important;height:auto!important;display:flex;flex-wrap:wrap;gap:12px}
html body .ap-lo-hero::before{content:"The Southeast's parts partner for truck and trailer shops";flex:0 0 100%;order:0;font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-weight:800;font-size:40px;line-height:1.02;text-transform:uppercase;color:#15181D;text-wrap:balance}
html body .ap-lo-hero::after{content:"Family-owned since 1997 and named SEMA Warehouse Distributor of the Year. Open an AllPro account to see your pricing, live stock, and every program that comes with it.";flex:0 0 100%;order:1;margin:2px 0 10px;font-family:'Barlow','Helvetica Neue',Arial,sans-serif;font-size:17px;line-height:1.5;color:#34373B;text-wrap:pretty}
html body .ap-lo-hero .ap-lo-hs{position:static!important;display:inline-flex!important;align-items:center;justify-content:center;width:auto!important;height:50px!important;padding:0 22px 2px;border-radius:4px;box-sizing:border-box;font-size:0!important;text-indent:0!important;overflow:visible!important;line-height:1!important;text-decoration:none!important;left:auto!important;top:auto!important}
html body .ap-lo-hero .ap-lo-hs::before{font-family:'Barlow','Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:18px;line-height:1;white-space:nowrap}
html body .ap-lo-hero .ap-lo-hs1{order:2;flex:0 0 100%;background:#C8102E;border:2px solid #C8102E}
html body .ap-lo-hero .ap-lo-hs1::before{content:"Apply now";color:#fff}
html body .ap-lo-hero .ap-lo-hs2{order:3;flex:0 0 100%;background:#fff;border:2px solid #0057B8}
html body .ap-lo-hero .ap-lo-hs2::before{content:"Call 800-858-4487";color:#0057B8}

/* Section headings and their links stack instead of squeezing side by side */
html body .ap-lo-perks-head,html body .ap-lo-mq-head,html body .ap-lo-start-head{flex-direction:column!important;align-items:flex-start!important;gap:14px}
html body .ap-lo-link{white-space:nowrap}
html body .ap-lo-h2{font-size:34px!important;line-height:1.05!important;text-wrap:balance}
html body .ap-lo-p,html body .ap-lo-l,html body .ap-lo-step-t{text-wrap:balance}
html body .ap-lo-h2.ap-lo-h2-sm{font-size:28px!important}
html body .ap-lo-start .ap-lo-h2.ap-lo-h2-w{font-size:36px!important}
html body .ap-lo-sec{padding-top:44px!important;padding-bottom:48px!important}
html body .ap-lo-mq-sec{padding:40px 0 42px!important}
html body .ap-lo-mq-sec .ap-lo-mq-head{padding:0 31px!important;margin-bottom:22px!important}
html body .ap-lo-mq-sec .ap-lo-mq{margin:0!important}
html body .ap-lo-sec.ap-lo-tpc{padding-bottom:36px!important}
html body .ap-lo-tpc+.ap-lo-mq-sec{padding-top:0!important}

/* Proof bar: 2 x 2 */
html body .ap-lo-proof{display:grid!important;grid-template-columns:1fr 1fr;row-gap:24px;padding:28px 0!important}
html body .ap-lo-proof .ap-lo-stat{padding:0 0 0 18px!important;border-left:1px solid #D9DCE0!important;min-width:0}
html body .ap-lo-proof .ap-lo-stat:nth-child(odd){padding-left:0!important;border-left:0!important}
html body .ap-lo-proof .ap-lo-n{font-size:38px!important;white-space:nowrap}
html body .ap-lo-proof .ap-lo-l{font-size:15px!important}

/* Why customers choose AllPro: one card per row */
html body .ap-lo-tiles{flex-direction:column!important;gap:18px!important}
html body .ap-lo-tiles .ap-lo-tile{flex:none!important;width:auto!important;max-width:none!important;margin:0!important}
html body .ap-lo-tiles .ap-lo-tile-img{width:100%!important;height:auto!important}

/* AllPro Perks: one perk per row, logo beside the text */
html body .ap-lo-perks{grid-template-columns:1fr!important}
html body .ap-lo-perks .ap-lo-perk{border:0!important;border-top:1px solid #D9DCE0!important;display:flex!important;align-items:center;gap:16px;padding:16px 18px!important;text-align:left!important}
html body .ap-lo-perks .ap-lo-perk:first-child{border-top:0!important}
html body .ap-lo-perks .ap-lo-perk-logo{flex:0 0 64px!important;width:64px!important;height:auto!important;margin:0!important;justify-content:center}
html body .ap-lo-perks .ap-lo-perk-logo img{max-width:64px!important;height:auto!important}
html body .ap-lo-perks .ap-lo-perk .ap-lo-p{margin:0!important;flex:1;min-width:0}

/* Get started band: buttons wrap, steps stack */
html body .ap-lo-start{padding-top:44px!important;padding-bottom:48px!important}
html body .ap-lo-btns{flex-wrap:wrap;width:100%}
html body .ap-lo-btns .ap-lo-btn{flex:1 1 auto}
html body .ap-lo-steps{grid-template-columns:1fr!important;gap:22px!important}
html body .ap-lo-start .ap-lo-q{margin:30px 0 0!important}

/* Logged-in home: the middle row ran 3px past each edge (page scrolled sideways); carousel runs edge to edge */
html body .ap-midrow{margin-left:0!important;margin-right:0!important}
html body .ap-hero-wrap{margin-left:-12px!important;margin-right:-12px!important}
html body .ap-hero-wrap .ap-arrow{z-index:3!important}
}
/* === end AllPro mobile layout === */

/* === AllPro mobile hero and header (Claude, Oct 2026): phones only (max-width 767px). Logged-out hero with the BDS F-250 photo (PACE product image, linked in place), header phone pill, red menu icon === */
@media (max-width:767px){
/* Logged-out hero: truck photo across the top, copy over the dark fade (photo is PACE item image bds-suspension/F250_2023_B5in_02.jpg, cropped with imgix rect) */
html body .ap-lo-hero-wrap{margin-left:-12px!important;margin-right:-12px!important}
html body .ap-lo-hero{background:linear-gradient(180deg,rgba(10,20,42,0) 0,rgba(10,20,42,0) 146px,rgba(10,20,42,.5) 220px,rgba(10,20,42,.9) 292px,#0A142A 324px),url("https://aam5.imgix.net/3/bds-suspension/F250_2023_B5in_02.jpg?rect=380,140,2240,1860&w=780&auto=format,compress") center top/100% auto no-repeat #0A142A!important;padding:230px 31px 36px!important}
html body .ap-lo-hero::before{color:#fff!important}
html body .ap-lo-hero::after{color:#D9E2EF!important}
html body .ap-lo-hero .ap-lo-hs2{background:transparent!important;border-color:#fff!important}
html body .ap-lo-hero .ap-lo-hs2::before{color:#fff!important}
/* Hero meets the header: no page padding above it on the logged-out home */
html body #main:has(.ap-lo-hero-wrap){padding-top:0!important}
html body #wrap:has(.ap-lo-hero-wrap){margin-top:60px!important}
/* Header phone number as a tappable pill (was 12px italic). The logo box gives up its fixed 250px so the whole number fits beside the menu button */
html body #top-navbar>#nav-logo{flex:1 1 0!important;min-width:0!important;max-width:none!important}
html body #top-navbar>#mobile-phone{flex:0 0 auto!important;width:auto!important}
html body #top-navbar #mobile-phone{display:flex!important;align-items:center;justify-content:center;height:60px;padding:0 6px 0 0!important}
html body #top-navbar #mobile-phone a{display:inline-flex!important;align-items:center;gap:7px;height:38px;padding:0 14px 1px;border:2px solid #0057B8;border-radius:999px;background:#fff;color:#0057B8!important;font-family:'Barlow','Helvetica Neue',Arial,sans-serif!important;font-weight:700!important;font-size:16px!important;line-height:1!important;letter-spacing:.2px;text-decoration:none!important;white-space:nowrap}
html body #top-navbar #mobile-phone a em{font-style:normal!important;font-size:inherit!important;font-family:inherit!important;font-weight:inherit!important}
html body #top-navbar #mobile-phone a::before{content:"";flex:0 0 15px;width:15px;height:15px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat}
/* Menu icon in AllPro red */
html body #top-navbar .navbar-toggler .icon-bar{background-color:#C8102E!important;height:3px!important;border-radius:2px}
}
/* === end AllPro mobile hero and header === */

/* === AllPro mobile logged-out polish (Claude, Oct 2026): phones only (max-width 767px). Reviewed section by section with Evan Oct 9 and 16. Stats, Why cards, Perks cards, Trailer Parts band, Get started band, footer === */
@media (max-width:767px){
/* Proof bar: 2 x 2 on white, red accent bar on each stat (Evan picked this over tiles, a list, and a blue band) */
html body .ap-lo-proof{display:grid!important;grid-template-columns:1fr 1fr;gap:0 16px!important;border:0!important;border-top:1px solid #D9DCE0!important;padding:22px 0 4px!important;margin:18px 19px 0!important}
html body .ap-lo-proof .ap-lo-stat,html body .ap-lo-proof .ap-lo-stat:first-child,html body .ap-lo-proof .ap-lo-stat:nth-child(odd){border:0!important;border-left:4px solid #C8102E!important;padding:2px 0 2px 12px!important;margin:0 0 22px!important;min-width:0}
html body .ap-lo-proof .ap-lo-n{font-size:36px!important;line-height:1!important;margin:0 0 4px!important;white-space:nowrap}
html body .ap-lo-proof .ap-lo-l{font-size:14px!important;line-height:1.3!important}
html body .ap-lo-proof .ap-lo-stat:first-child .ap-lo-l{white-space:nowrap}

/* Why customers choose AllPro: three clearly separate cards (more space between, rounded, soft shadow, light body) */
html body .ap-lo-tiles{gap:30px!important}
html body .ap-lo-tiles .ap-lo-tile{border:1px solid #DDE2E8!important;border-radius:10px;overflow:hidden;box-shadow:0 4px 16px rgba(21,24,29,.08);background:#fff}
html body .ap-lo-tiles .ap-lo-tile-img{display:block}
html body .ap-lo-tiles .ap-lo-tile-body{background:#F7F8FA;border-top:1px solid #E6E9ED;padding:20px 20px 22px!important}
html body .ap-lo-tiles .ap-lo-h3{margin:0 0 6px!important}
html body .ap-lo-tiles .ap-lo-tile-body .ap-lo-p{margin:0!important}

/* AllPro Perks: one row per perk, logo in a fixed box, no stacked borders */
html body .ap-lo-perks{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
html body .ap-lo-perks .ap-lo-perk{border:1px solid #E2E6EB!important;border-radius:6px;background:#fff;display:flex!important;align-items:center;gap:14px;padding:14px 16px!important;text-align:left!important}
html body .ap-lo-perks .ap-lo-perk:first-child{border-top:1px solid #E2E6EB!important}
html body .ap-lo-perks .ap-lo-perk-logo{flex:0 0 88px!important;width:88px!important;height:56px!important;margin:0!important;display:flex!important;align-items:center;justify-content:center}
html body .ap-lo-perks .ap-lo-perk-logo img{max-width:88px!important;max-height:56px!important;width:auto!important;height:auto!important}
html body .ap-lo-perks .ap-lo-perk .ap-lo-p{margin:0!important;flex:1;min-width:0;font-size:15px!important;line-height:1.4!important}

/* AllPro Trailer Parts: phone version of the catalog banner. Catalog photo big on top, headline, line and button under it */
html body .ap-lo-sec.ap-lo-tpc{background:#0057B8!important;padding:30px 31px 34px!important;display:flex!important;flex-direction:column;align-items:center;text-align:center}
html body .ap-lo-sec.ap-lo-tpc::before{content:"";order:0;width:250px;max-width:100%;aspect-ratio:919/947;background:url("https://aam5.imgix.net/pacefiles/allprodistributing/natda2026/images/volume-4-catalog-irl.png?w=500&auto=format,compress") center/contain no-repeat;margin:0 0 18px}
html body .ap-lo-sec.ap-lo-tpc .ap-lo-h2{order:1;font-size:0!important;line-height:0!important;margin:0 0 8px!important;color:#fff!important}
html body .ap-lo-sec.ap-lo-tpc .ap-lo-h2::before{content:"Vol. 4 Trailer Parts Catalog";font-size:30px;line-height:1.05;display:block;text-wrap:balance}
html body .ap-lo-sec.ap-lo-tpc>a{order:2;display:block!important;text-decoration:none!important;color:#fff!important;width:100%}
html body .ap-lo-sec.ap-lo-tpc>a::before{content:"Every part number links to its product page, so you can browse and order online.";display:block;font-family:'Barlow','Helvetica Neue',Arial,sans-serif;font-size:16px;line-height:1.45;color:#D6E3F7;margin:0 0 16px;text-wrap:balance}
html body .ap-lo-sec.ap-lo-tpc>a::after{content:"View the catalog";display:inline-flex;align-items:center;justify-content:center;height:48px;width:100%;border-radius:4px;background:#fff;color:#0057B8;font-family:'Barlow','Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:17px;line-height:1;white-space:nowrap}
html body .ap-lo-sec.ap-lo-tpc .ap-lo-tpc-img{display:none!important}

/* Get started band */
html body .ap-lo-start{padding:40px 31px 44px!important}
html body .ap-lo-start .ap-lo-h2.ap-lo-h2-w{font-size:34px!important;margin:0 0 6px!important}
html body .ap-lo-start-head{gap:18px!important;margin:0 0 30px!important}
html body .ap-lo-btns{gap:10px!important}
html body .ap-lo-btns .ap-lo-btn{flex:0 0 100%!important;height:50px!important}
html body .ap-lo-steps{gap:16px!important}
html body .ap-lo-step{gap:14px!important}
html body .ap-lo-num{width:40px!important;height:40px!important;font-size:22px!important}
html body .ap-lo-step-t{font-size:19px!important;margin:2px 0 2px!important}
/* Two helper links as their own rows instead of a wrapped sentence */
html body .ap-lo-start .ap-lo-q{margin:28px 0 0!important;font-size:0!important;line-height:0!important;display:flex;flex-direction:column;gap:10px;border-top:1px solid rgba(255,255,255,.25);padding-top:22px}
html body .ap-lo-start .ap-lo-q a{display:flex!important;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-family:'Barlow','Helvetica Neue',Arial,sans-serif;font-size:16px;line-height:1.35;color:#fff!important;text-decoration:none!important}
html body .ap-lo-start .ap-lo-q a::before{font-weight:400;color:#C9D9F2}
html body .ap-lo-start .ap-lo-q a::after{content:"\2192";font-weight:700;margin-left:2px}
html body .ap-lo-start .ap-lo-q a[href*="request-access"]::before{content:"Already buy from us?"}
html body .ap-lo-start .ap-lo-q a[href^="mailto"]::before{content:"Questions? Email"}
html body .ap-lo-start .ap-lo-q a{font-weight:700}

/* Footer (PACE 2 markup): brand block and link columns centered, badges 3 per row, legal lines stacked, policy links as pills */
html body .ap-ft .ap-ft-top{padding:28px 20px 8px!important;gap:22px!important;justify-content:center;flex-direction:column;align-items:center}
html body .ap-ft .ap-ft-brand{text-align:center!important;flex:0 0 100%!important;width:100%}
html body .ap-ft .ap-ft-brand .ap-ft-phone{text-align:center!important}
html body .ap-ft .ap-ft-col{text-align:center;width:100%;flex:none!important}
html body .ap-ft .ap-ft-col ul.ap-ft-inline{justify-content:center}
html body .ap-ft .ap-ft-badges-in{padding:18px 16px 22px!important;gap:14px!important;flex-direction:column}
html body .ap-ft .ap-mb-row{display:grid!important;grid-template-columns:repeat(3,1fr);column-gap:10px!important;row-gap:14px!important;width:100%}
html body .ap-ft .ap-mb-row .ap-mb-badge{height:auto!important;width:auto!important;flex-direction:column;gap:6px}
html body .ap-ft .ap-mb-row .ap-mb-badge .ap-ft-badge-art{display:flex;align-items:center;justify-content:center;height:52px}
html body .ap-ft .ap-mb-row .ap-mb-badge img{max-height:52px!important;height:auto!important;width:auto!important;max-width:96px!important}
html body .ap-ft .ap-ft-bottom-in{padding:18px 20px 22px!important;font-size:13px!important;line-height:1.5!important;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 8px;text-align:center}
html body .ap-ft .ap-ft-bottom-in .footer-copyright{flex:0 0 100%;text-align:center;margin:0 0 14px;display:block}
html body .ap-ft .ap-ft-bottom-in .footer-copyright .footer-sep{display:block;height:0;overflow:hidden}
html body .ap-ft .ap-ft-bottom-in .footer-sep{display:none}
html body .ap-ft .ap-ft-bottom-in .ap-legal-ours{display:contents}
html body .ap-ft .ap-ft-bottom-in>a,html body .ap-ft .ap-ft-bottom-in .ap-legal-ours>a{display:inline-flex;align-items:center;justify-content:center;flex:0 0 calc(50% - 4px);height:34px;padding:0 12px;border:1px solid #2C313A;border-radius:999px;color:#C7CED8!important;text-decoration:none!important;line-height:1;white-space:nowrap}
}
/* === end AllPro mobile logged-out polish === */

/* === AllPro mobile footer gap (Claude, Oct 2026): phones only. Logged-out home: the Get started band meets the footer with no white strip === */
@media (max-width:767px){
html body #main:has(.ap-lo-hero-wrap) .ap-ft{margin-top:0!important}
html body #home-page:has(.ap-lo-hero-wrap)>.row>.col-12>:has(.ap-lo-start)>.ap-lo-start~div{display:none!important}
}
/* === end AllPro mobile footer gap === */

/* === AllPro home carousel phone slides (Claude, Oct 2026): phones only (max-width 767px). Square phone versions of the seven hero slides swap in and every hotspot is re-placed. Desktop slides untouched. Update this block whenever a slide changes. === */
@media (max-width:767px){
html body .ap-hero-wrap .ap-hero-stage{padding-top:100%!important}
/* Arrows on phones (Evan, Oct 20, 2026): black chevrons either side of the dots, below the banner, so nothing covers the slide art or card links. Buttons come from Custom JS block "AllPro carousel phone arrows" */
html body .ap-hero-wrap .ap-hero-stage .ap-arrow{display:none!important}
html body .ap-hero-wrap .ap-dots{align-items:center;gap:10px;margin-top:4px}
html body .ap-hero-wrap .ap-dots .ap-dot{margin:0}
html body .ap-hero-wrap .ap-dots .ap-pnav{display:flex!important;align-items:center;justify-content:center;width:44px;height:44px;margin:0 6px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
html body .ap-hero-wrap .ap-dots .ap-pnav svg{display:block}
/* Slide 1: bakflip mx4 ez-lift rebate */
html body .ap-hero-wrap .ap-slide-1{background-image:url("https://aam5.imgix.net/pacefiles/allprodistributing/campaigns/2026/bak-mx4/rt-bakmx4-hb-phone.png?auto=format,compress&w=1080")!important}
html body .ap-hero-wrap .slide1-cta{left:5.19%;top:85.19%;width:89.63%;height:9.63%}
/* Slide 2: dv8 and oracle closeout */
html body .ap-hero-wrap .ap-slide-2{background-image:url("https://aam5.imgix.net/pacefiles/allprodistributing/campaigns/2026/dv8-oracle-closeout/dv8-oracle-closeout-hb-phone.png?auto=format,compress&w=1080")!important}
html body .ap-hero-wrap .slide2-cta{left:5.19%;top:48.52%;width:43.33%;height:46.30%}
html body .ap-hero-wrap .slide2-cta2{left:51.48%;top:48.52%;width:43.33%;height:46.30%}
/* Slide 3: blinds */
html body .ap-hero-wrap .ap-slide-3{background-image:url("https://aam5.imgix.net/pacefiles/allprodistributing/campaigns/hunting-blind-promo/hunting-blind-promo-site-hero-phone.png?auto=format,compress&w=1080")!important}
html body .ap-hero-wrap .slide3-cta1{left:4.07%;top:41.48%;width:21.57%;height:26.30%}
html body .ap-hero-wrap .slide3-cta2{left:27.50%;top:41.48%;width:21.57%;height:26.30%}
html body .ap-hero-wrap .slide3-cta3{left:50.93%;top:41.48%;width:21.57%;height:26.30%}
html body .ap-hero-wrap .slide3-cta4{left:74.35%;top:41.48%;width:21.57%;height:26.30%}
html body .ap-hero-wrap .slide3-cta5{left:4.07%;top:69.63%;width:21.57%;height:26.30%}
html body .ap-hero-wrap .slide3-cta6{left:27.50%;top:69.63%;width:21.57%;height:26.30%}
html body .ap-hero-wrap .slide3-cta7{left:50.93%;top:69.63%;width:21.57%;height:26.30%}
html body .ap-hero-wrap .slide3-cta8{left:74.35%;top:69.63%;width:21.57%;height:26.30%}
/* Slide 4: gen-y giveaway */
html body .ap-hero-wrap .ap-slide-4{background-image:url("https://aam5.imgix.net/pacefiles/allprodistributing/campaigns/2026/gen-y-giveaway/geny-giveaway-hb-phone.png?auto=format,compress&w=1080")!important}
html body .ap-hero-wrap .slide4-cta{left:5.19%;top:82.59%;width:43.70%;height:9.63%}
html body .ap-hero-wrap .slide4-cta2{left:51.11%;top:82.59%;width:43.70%;height:9.63%}

/* Slide 5: holman */
html body .ap-hero-wrap .ap-slide-5{background-image:url("https://aam5.imgix.net/pacefiles/allprodistributing/vendors/holman/heroes/holman-hb2-phone.png?auto=format,compress&w=1080")!important}
html body .ap-hero-wrap .slide5-cta{left:5.19%;top:85.19%;width:89.63%;height:9.63%}
html body .ap-hero-wrap .slide5-cta2{left:5.19%;top:47.78%;width:28.64%;height:34.07%}
html body .ap-hero-wrap .slide5-cta3{left:35.68%;top:47.78%;width:28.64%;height:34.07%}
html body .ap-hero-wrap .slide5-cta4{left:66.17%;top:47.78%;width:28.64%;height:34.07%}
/* Slide 6: ranchhand */
html body .ap-hero-wrap .ap-slide-6{background-image:url("https://aam5.imgix.net/pacefiles/allprodistributing/vendors/ranchhand/heroes/ranch-hand-hb2-phone.png?auto=format,compress&w=1080")!important}
html body .ap-hero-wrap .slide6-cta{left:5.19%;top:85.19%;width:89.63%;height:9.63%}
html body .ap-hero-wrap .slide6-cta2{left:5.19%;top:47.78%;width:28.64%;height:34.07%}
html body .ap-hero-wrap .slide6-cta3{left:35.68%;top:47.78%;width:28.64%;height:34.07%}
html body .ap-hero-wrap .slide6-cta4{left:66.17%;top:47.78%;width:28.64%;height:34.07%}
/* Slide 7: milemarker */
html body .ap-hero-wrap .ap-slide-7{background-image:url("https://aam5.imgix.net/pacefiles/allprodistributing/vendors/milemarker/heroes/mile-marker-hb2-phone.png?auto=format,compress&w=1080")!important}
html body .ap-hero-wrap .slide7-cta{left:5.19%;top:85.19%;width:89.63%;height:9.63%}
html body .ap-hero-wrap .slide7-cta2{left:5.19%;top:47.78%;width:28.64%;height:34.07%}
html body .ap-hero-wrap .slide7-cta3{left:35.68%;top:47.78%;width:28.64%;height:34.07%}
html body .ap-hero-wrap .slide7-cta4{left:66.17%;top:47.78%;width:28.64%;height:34.07%}
}
/* === end AllPro home carousel phone slides === */

/* === AllPro home middle row phone banners (Claude, Oct 2026): phones only (max-width 767px). Square phone versions of the Spray Liner Update and AllPro Trailer Parts banners swap in; the spray button hotspot moves to the phone button. Desktop untouched. Update when either banner changes. === */
@media (max-width:767px){
html body .ap-su-wrap img{content:url("https://aam5.imgix.net/pacefiles/allprodistributing/site/home/spray-updates-home-banner-v4-phone.png?auto=format,compress&w=1080")}
html body .ap-su-wrap .ap-su-hs{left:5.19%!important;top:85.56%!important;width:89.63%!important;height:9.63%!important}
html body .ap-tpc-stage{padding-top:100%!important;background-image:url("https://aam5.imgix.net/pacefiles/allprodistributing/site/brand-banners/trailerparts/trailer-parts-catalog-hb-10-20-phone.png?auto=format,compress&w=1080")!important}
}
/* === end AllPro home middle row phone banners === */

/* === AllPro home widget frames on phones (Claude, Oct 2026): phones only (max-width 767px). Logged-in home panels run closer to the screen edges, pictures fill the panel, tighter headings and gaps; Rebates and Promotions iframe hidden in favor of the phone card; panel order set for phones. Desktop untouched. === */
@media (max-width:767px){
html body .ap-midrow{display:flex!important;flex-direction:column!important}
html body .ap-midrow>.ap-c25,html body .ap-midrow>.ap-c50{display:contents!important}
html body .ap-midrow .ap-p1panel{width:100%!important;margin:0 0 12px!important;border-radius:8px!important;overflow:hidden!important;border-color:#d9dee5!important}
html body .ap-midrow .ap-p1panel .panel-heading{padding:9px 14px!important;border-bottom:1px solid #e3e7ec!important}
html body .ap-midrow .ap-p1panel .panel-title{font-size:15px!important;font-weight:700!important;letter-spacing:.2px;color:#0B1220!important}
html body .ap-midrow .ap-p1panel .panel-body{padding:0!important}
html body .ap-midrow .ap-p1panel .panel-body>p{margin:0!important}
html body .ap-midrow .ap-p1panel .panel-body img{display:block!important;width:100%!important;height:auto!important;max-width:100%!important;margin:0!important}
html body .ap-midrow .ap-p1panel .panel-body iframe{display:none!important}
html body .ap-midrow .ap-rb-phone{display:flex!important;flex-direction:column;align-items:center;text-align:center;padding:26px 20px 24px;background:#0057B8;color:#fff!important;text-decoration:none!important}
html body .ap-midrow .ap-rb-phone b{font-family:'Barlow Condensed',Arial Narrow,sans-serif;font-size:34px;font-weight:700;line-height:1;text-transform:uppercase}
html body .ap-midrow .ap-rb-phone span{font-size:16px;line-height:1.3;margin:8px 0 16px;max-width:280px}
html body .ap-midrow .ap-rb-phone i{font-style:normal;background:#CA0D29;border-radius:5px;padding:12px 26px;font-family:'Barlow Condensed',Arial Narrow,sans-serif;font-weight:700;font-size:18px;letter-spacing:1.6px;text-transform:uppercase}
/* phone order: notice, the monthly rebates, new lines, catalog, hours, all rebates */
html body .ap-midrow .ap-p1panel:has(.ap-su-wrap){order:1}
html body .ap-midrow .ap-p1panel:has(img[src*="pro-rebates"]){order:2}
html body .ap-midrow .ap-p1panel:has(img[src*="whats-new"]){order:3}
html body .ap-midrow .ap-p1panel:has(.ap-tpc-wrap){order:4}
html body .ap-midrow .ap-p1panel:has(img[src*="open_late"]){order:5}
html body .ap-midrow .ap-p1panel:has(iframe[src*="get_rebates"]){order:6}
}
/* === end AllPro home widget frames on phones === */


/* === AllPro buy box buttons 2x2 in narrow boxes (Claude for Evan, Oct 19, 2026). When the product page buy box is under 480px wide (phones, and tablets about 768 to 991px where the page is two columns), Add to Order, Instant Order, Price Match and Lost Sale sit two per row instead of four squeezed and cut off. Wide buy boxes keep one row. Delete this block to go back. === */
.product-info-card .product-order-toolbar{container-type:inline-size}
@container (max-width: 479.98px){
.product-info-card .product-order-toolbar .product-order-actions{display:grid !important;grid-template-columns:1fr 1fr;gap:8px !important}
.product-info-card .product-order-toolbar .product-order-actions > input,.product-info-card .product-order-toolbar .product-order-actions > button{width:100% !important;min-width:0 !important;margin:0 !important}
}
/* === end AllPro buy box buttons 2x2 === */


/* === AllPro customer header and tablet fixes (Claude for Evan, Oct 19, 2026). Signed-in customers only (staff headers have #nav-account and their own block above; signed-out pages have no #nav-search or #nav-orders). (1) The logo was squeezed to about 30px wide on laptops and disappeared under 1300px; it now holds at 150px. (2) From 1280 to 1799px the search box and vehicle bar share one row (vehicle bar shows icons only for Shop by vehicle and Reset). (3) From 768 to 1279px the vehicle bar drops under the search box so nothing runs off the right edge (Search button and Quick Order were cut off). (4) Tablets 768 to 991px: the blue nav sits in two rows with the phone number and VIEW CART stacked on the right (it was four rows). (5) List view and footer badges no longer make tablet pages scroll sideways. Delete this block to go back. === */
@media (min-width:768px) and (max-width:1799px){
html body #top-navbar:has(> #nav-search):not(:has(> #nav-account)) > #nav-logo{flex:0 0 150px!important;max-width:150px!important}
html body #top-navbar:has(> #nav-search):not(:has(> #nav-account)) > #nav-logo img{max-width:100%!important;height:auto!important}
html body #top-navbar:has(> #nav-search):not(:has(> #nav-account)) #nav-search{min-width:0!important}
html body #top-navbar:has(> #nav-search):not(:has(> #nav-account)) #nav-search #nav-search-stack *{min-width:0!important}
}
@media (min-width:1280px) and (max-width:1799px){
html body #top-navbar:has(> #nav-search):not(:has(> #nav-account)) #nav-search #nav-search-stack{flex:0 1 400px!important;max-width:400px!important;min-width:200px!important}
html body #top-navbar:has(> #nav-search):not(:has(> #nav-account)) #nav-search > #nav-search-ymm{flex:1 1 0!important;min-width:560px!important}
html body #top-navbar:has(> #nav-search):not(:has(> #nav-account)) .nav-horizontal-ymm-intro{flex:0 0 auto!important;padding:0 10px!important;gap:0!important}
html body #top-navbar:has(> #nav-search):not(:has(> #nav-account)) .nav-horizontal-ymm-intro > :not(.nav-horizontal-ymm-icon){display:none!important}
html body #top-navbar:has(> #nav-search):not(:has(> #nav-account)) .nav-horizontal-ymm-reset{font-size:0!important;gap:0!important}
html body #top-navbar:has(> #nav-search):not(:has(> #nav-account)) .nav-horizontal-ymm-reset svg{font-size:15px!important}
}
@media (min-width:768px) and (max-width:1279.98px){
html body #top-navbar:has(> #nav-search):not(:has(> #nav-account)) > #nav-search{flex-wrap:wrap!important;row-gap:8px;column-gap:8px}
html body #top-navbar:has(> #nav-search):not(:has(> #nav-account)) > #nav-search > #nav-search-stack{flex:1 1 0!important;max-width:none!important;min-width:0!important;order:1}
html body #top-navbar:has(> #nav-search):not(:has(> #nav-account)) > #nav-search > .btn-quick-order-section{order:2}
html body #top-navbar:has(> #nav-search):not(:has(> #nav-account)) > #nav-search > #nav-search-ymm{flex:0 0 100%!important;order:3;margin-left:0!important}
}
@media (min-width:1280px) and (max-width:1439.98px){
html body #top-navbar:has(> #nav-search):not(:has(> #nav-account)) #nav-search #searchBox input{font-size:16px!important}
}
@media (min-width:768px) and (max-width:991.98px){
html body nav#bottom-navbar:has(> #nav-orders){display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"links phone" "links cart";align-items:center;column-gap:8px;row-gap:4px}
html body #bottom-navbar:has(> #nav-orders) > #nav-links{grid-area:links;width:auto!important;min-width:0}
html body #bottom-navbar:has(> #nav-orders) > #nav-phone{grid-area:phone;justify-self:end;align-self:end}
html body #bottom-navbar:has(> #nav-orders) > #nav-orders{grid-area:cart;justify-self:end;align-self:start}
html body #bottom-navbar:has(> #nav-orders) > #mobile-search{display:none!important}
}
html body .product-body-grid > .product-group-info{min-width:0}
html body .ap-ft-badges-in > .ap-mb-row{flex:0 1 auto!important;min-width:0;max-width:100%}
/* === end AllPro customer header and tablet fixes === */


/* === AllPro grid view order buttons (Claude for Evan, Oct 19, 2026). Grid view only (customers who pick grid in My Account; list is the site default). Per Thomas, Instant Order is the first button, with Add to Order under it. Both buttons are full width, 40px tall, and use the same 13.5px uppercase type so they match (Add to Order was larger in title case, Instant Order was a small button). Delete this block to go back. === */
html body .browse-view-mode-grid .grid-order-initial{gap:8px!important}
html body .browse-view-mode-grid .grid-order-initial > button.btn-instant-order{order:-1!important}
html body .browse-view-mode-grid .grid-order-initial > button.btn-instant-order,html body .browse-view-mode-grid .grid-order-initial > input[name="add_to_order"]{width:100%!important;height:40px!important;min-height:40px!important;padding-top:0!important;padding-bottom:0!important;font-size:13.5px!important;font-weight:700!important;line-height:38px!important;letter-spacing:.3px!important;text-transform:uppercase!important;border-radius:6px!important;box-sizing:border-box!important;margin:0!important}
html body .browse-view-mode-grid .grid-order-initial > input[name="add_to_order"]{border:1px solid transparent!important}
/* === end AllPro grid view order buttons === */

/* === AllPro phone header (Claude, Oct 2026) === */
/* Phones/tablets. Signed in: logo left, call button centered, 48px menu button right (was a 239px wide invisible button with black bars mid header). Signed out: call button centered between logo and menu button. Both: menu opens to a clean red X (the middle bar used to stay). */
@media (max-width:991px){
  html body .top-navbar-mobile__header{gap:8px!important;padding:8px 12px!important;min-height:76px}
  html body #top-navbar-mobile .top-navbar-mobile__header > .top-navbar-mobile__logo{flex:0 0 auto!important;width:auto!important;max-width:none!important;min-width:0!important}
  html body #top-navbar-mobile .top-navbar-mobile__logo > a.navbar-logo{flex:0 0 auto!important;justify-content:flex-start!important;width:auto!important;max-width:none!important;padding:0!important;margin:0!important}
  html body .top-navbar-mobile__header .top-navbar-mobile__logo-img{width:min(148px,calc(100vw - 280px))!important;height:auto!important;max-height:none!important;max-width:none!important;margin:0!important}
  html body .top-navbar-mobile__header .ap-hdr-phone{flex:0 0 auto;margin:0 auto;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px 1px;border:2px solid #0057B8;border-radius:999px;background:#fff;color:#0057B8!important;font-family:'Barlow','Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:16px;line-height:1;letter-spacing:.2px;text-decoration:none!important;white-space:nowrap}
  html body .top-navbar-mobile__header .ap-hdr-phone svg{width:13px;height:13px;fill:currentColor;flex:0 0 auto}
  html body .top-navbar-mobile__header .navbar-toggler.top-navbar-mobile__toggler{flex:0 0 48px!important;width:48px!important;height:48px!important;align-self:center!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;background:#F8FAFC!important;border:1px solid #D0DCE8!important;border-radius:10px!important;box-shadow:none!important}
  html body .top-navbar-mobile__header .navbar-toggler.top-navbar-mobile__toggler .icon-bar{width:24px!important;height:3px!important;margin:0!important;border-radius:2px!important;background-color:#C8102E!important}
  html body .top-navbar-mobile__header .navbar-toggler.top-navbar-mobile__toggler .icon-bar+.icon-bar{margin-top:5px!important}
  html body .navbar-toggler .icon-bar{transform-origin:50% 50%!important;transition:transform .2s ease,opacity .15s ease!important}
  html body .navbar-toggler:not(.collapsed) .icon-bar.top-bar{transform:translateY(8px) rotate(45deg)!important}
  html body .navbar-toggler:not(.collapsed) .icon-bar.middle-bar{opacity:0!important;transform:none!important}
  html body .navbar-toggler:not(.collapsed) .icon-bar.bottom-bar{transform:translateY(-8px) rotate(-45deg)!important}
  html body .navbar-toggler.collapsed .icon-bar{transform:none!important;opacity:1!important}
}
@media (max-width:767px){
  html body #top-navbar>#nav-logo{flex:0 0 auto!important;width:auto!important;max-width:none!important;padding:0 0 0 12px!important}
  html body #top-navbar>#nav-logo>a{display:flex!important;justify-content:flex-start!important;width:auto!important;padding:0!important;margin:0!important}
  html body #top-navbar>#nav-logo img{width:min(148px,calc(100vw - 280px))!important;height:auto!important;max-width:none!important;margin:0!important}
  html body #top-navbar>#mobile-phone{flex:1 1 auto!important;width:auto!important;min-width:0;display:flex!important;justify-content:center!important;padding:0!important}
  html body #top-navbar>.navbar-toggler{flex:0 0 48px!important;width:48px!important;height:48px!important;align-self:center!important;padding:0!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;margin:0 12px 0 0!important}
}
@media (max-width:359px){html body .top-navbar-mobile__header .ap-hdr-phone{padding:0 10px 1px;font-size:14px}html body .top-navbar-mobile__header .ap-hdr-phone svg{display:none}}
/* === end AllPro phone header === */
/* === AllPro Current Promotions widget (Claude, Oct 2026): home middle row right column. Rotates the DV8/Oracle closeout and the GEN-Y giveaway (16s loop, pauses on hover), plus the GEN-Y strip in Rebates and Promotions. === */
.ap-cp{position:relative;line-height:0;}
.ap-cp .ap-cp-stage{position:relative;}
.ap-cp .ap-cp-s{position:relative;animation:apCp1 16s infinite;}
.ap-cp .ap-cp-s2{position:absolute;left:0;top:0;width:100%;animation-name:apCp2;}
.ap-cp .ap-cp-img{margin:0!important;display:block;width:100%;height:auto;}
.ap-cp .ap-cp-hs{position:absolute;display:block;font-size:0!important;line-height:0!important;text-indent:-9999px!important;overflow:hidden!important;white-space:nowrap!important;}
.ap-cp .ap-plc-dv8{left:8.52%;top:39.17%;width:41.67%;height:55.31%;}
.ap-cp .ap-plc-ora{left:54.26%;top:39.17%;width:41.67%;height:55.31%;}
.ap-cp .ap-cp-enter{left:5.19%;top:81.10%;width:43.94%;height:11.59%;}
.ap-cp .ap-cp-geny{left:50.88%;top:81.10%;width:43.94%;height:11.59%;}
.ap-cp .ap-cp-dots{display:flex;justify-content:center;gap:10px;padding-top:12px;line-height:0;}
.ap-cp .ap-cp-dots i{display:block;width:10px;height:10px;border-radius:50%;background:#97999B;animation:apCpD1 16s infinite;}
.ap-cp .ap-cp-dots .ap-cp-d2{animation-name:apCpD2;}
.ap-cp:hover .ap-cp-s,.ap-cp:hover .ap-cp-dots i{animation-play-state:paused;}
@keyframes apCp1{0%,46%{opacity:1;visibility:visible}50%,96%{opacity:0;visibility:hidden}100%{opacity:1;visibility:visible}}
@keyframes apCp2{0%,46%{opacity:0;visibility:hidden}50%,96%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes apCpD1{0%,48%{background:#0057B8}50%,98%{background:#97999B}100%{background:#0057B8}}
@keyframes apCpD2{0%,48%{background:#97999B}50%,98%{background:#0057B8}100%{background:#97999B}}
.ap-geny-strip{display:block;line-height:0;margin:0 0 4px;}
/* AAM rebates box: widen the iframe by the scrollbar width and clip it, so the gray scrollbar track is hidden but the list still scrolls */
p:has(> iframe[src*="ems/rebates/get_rebates"]){overflow:hidden!important;line-height:0;margin:0;}
iframe[src*="ems/rebates/get_rebates"]{display:block;width:calc(100% + var(--ap-sbw,15px))!important;max-width:none!important;}
.ap-geny-strip img{display:block!important;width:100%!important;height:auto!important;margin:0!important;}

/* === end AllPro Product Line Closeout widget === */

/* === AllPro phone footer link cards (Claude, Oct 20 2026): Your Account and Company split by thin gray lines, links as side-by-side buttons. Phones only. === */
@media (max-width:767px){
html body .ap-ft .ap-ft-top{row-gap:0!important}
html body .ap-ft .ap-ft-top .ap-ft-col{display:block!important;float:none!important;flex:0 0 auto!important;align-self:stretch!important;width:auto!important;max-width:none!important;margin:22px 0 0!important;padding:22px 0 0!important;background:transparent!important;border:0!important;border-top:1px solid #DDE2E8!important;border-radius:0!important;text-align:center!important;box-sizing:border-box!important}
html body .ap-ft .ap-ft-top .ap-ft-col:last-child{padding-bottom:34px!important}
html body .ap-ft .ap-ft-col h4{margin:0 0 14px!important;padding:0!important;text-align:center!important;line-height:1!important}
html body .ap-ft .ap-ft-col h4.ap-ft-h4-gap{margin-top:22px!important;padding-top:22px!important;border-top:1px solid #DDE2E8!important}
html body .ap-ft .ap-ft-col ul.ap-ft-inline{justify-content:center!important;margin:0!important;padding:0!important}
html body .ap-ft .ap-ft-col ul:not(.ap-ft-inline){display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:0!important;padding:0!important;list-style:none!important}
html body .ap-ft .ap-ft-col ul:not(.ap-ft-inline) li{display:block!important;margin:0!important;padding:0!important}
html body .ap-ft .ap-ft-col ul:not(.ap-ft-inline) a{display:flex!important;align-items:center;justify-content:center;height:44px!important;padding:0 8px!important;margin:0!important;box-sizing:border-box;border:1px solid #C9D3E0!important;border-radius:6px!important;background:transparent!important;font-family:'Barlow','Helvetica Neue',Arial,sans-serif!important;font-weight:600!important;font-size:15px!important;line-height:1!important;color:#0057B8!important;text-decoration:none!important;white-space:nowrap;text-align:center}
html body .ap-ft .ap-ft-col ul:not(.ap-ft-inline) a[data-ap-legal]{font-size:0!important}
html body .ap-ft .ap-ft-col ul:not(.ap-ft-inline) a[data-ap-legal]::after{font-size:15px!important;line-height:1!important}
}
/* === end AllPro phone footer link cards === */

/* === AllPro phone logged-out centered text (Claude, Oct 20 2026): every headline, paragraph and link on the logged-out home is centered on phones. Phones only. === */
@media (max-width:767px){
html body .ap-lo-hero::after{text-wrap:balance}
html body .ap-lo-h2,html body .ap-lo-h3,html body .ap-lo-p,html body .ap-lo-tile-body{text-align:center!important}
html body .ap-lo-mq-head,html body .ap-lo-perks-head,html body .ap-lo-start-head{align-items:center!important;text-align:center!important}
html body .ap-lo-perks .ap-lo-perk{flex-direction:column!important;align-items:center!important;text-align:center!important;row-gap:8px}
html body .ap-lo-perks .ap-lo-perk-logo{width:auto!important;justify-content:center!important}
html body .ap-lo-steps .ap-lo-step{flex-direction:column!important;align-items:center!important;text-align:center!important;row-gap:10px}
html body .ap-lo-steps .ap-lo-step-t,html body .ap-lo-steps .ap-lo-step-d{text-align:center!important}
html body .ap-lo-start .ap-lo-q{text-align:center!important;margin-left:0!important;margin-right:0!important}
html body .ap-lo-start .ap-lo-q.ap-lo-q a{justify-content:center!important;text-align:center!important}
html body .ap-lo-start .ap-lo-q.ap-lo-q a::before{flex-basis:100%!important;text-align:center!important}
html body .ap-lo-proof .ap-lo-stat:nth-child(4) .ap-lo-l{max-width:5.6em}
html body .ap-lo-sec .ap-lo-perks.ap-lo-perks{border:0!important;box-shadow:none!important;background:transparent!important}
html body .ap-lo-perks .ap-lo-perk.ap-lo-perk{row-gap:10px!important}
html body .ap-lo-perks .ap-lo-perk .ap-lo-perk-logo.ap-lo-perk-logo{flex:0 0 auto!important;height:54px!important;margin:0!important}
html body .ap-lo-perks .ap-lo-perk .ap-lo-perk-logo.ap-lo-perk-logo img{width:auto!important;height:auto!important;max-width:170px!important;max-height:54px!important}
html body .ap-lo-sec:has(.ap-lo-perks){padding-bottom:22px!important}
html body .ap-lo-sec.ap-lo-tpc.ap-lo-tpc::before{width:290px!important;height:299px!important;margin:0 0 2px!important}
html body .ap-lo-proof.ap-lo-proof{border-top:0!important}
html body .home-page .ap-lo-proof.ap-lo-proof,html body .home-page .ap-lo-sec.ap-lo-sec:not(.ap-lo-tpc),html body .home-page .ap-lo-mq-sec.ap-lo-mq-sec{margin-bottom:18px!important}
}
/* === end AllPro phone logged-out centered text === */

/* === AllPro brand strip logos keep their shape (Claude, Oct 20 2026): each logo fits its box without stretching. All screen sizes. === */
html body .ap-lo-mq-set img{object-fit:contain!important}
/* === end AllPro brand strip logos keep their shape === */
/* === AllPro list view stock line (Claude, Oct 2026) === */
html body .order-form>h4.ap-split{flex-wrap:wrap;justify-content:flex-end;row-gap:0}
html body .order-form>h4.ap-split>.dropship-lead,html body .order-form>h4.ap-split>.dropship-cost{display:none!important}
html body .order-form>h4 .product-locations{flex-shrink:0;white-space:nowrap}
html body .order-form>h4.ap-split .ap-inv-sub{flex:1 1 100%;text-align:right;font-size:14px;font-weight:600;line-height:1.3;color:#5B6676;white-space:nowrap;margin-top:-3px}
html body .order-form>h4.ap-split .ap-inv-sub .ap-lead{color:#1E7B45}
html body .order-form>h4>.on-order.ap-empty{display:none}
html body .order-form>h4>strong.inventory{text-wrap:balance}
html body .order-form>h4>strong.inventory .ap-phone{white-space:nowrap}
@media (min-width:992px){html body .browse-view-mode-vertical .order-form>h4{max-width:330px}}
/* === end AllPro list view stock line === */

/* === AllPro compact phone header (Claude, Oct 23 2026) === */
/* PACE's own mobile phone link duplicates our call pill and gets squeezed to one digit per line */
#top-navbar-mobile .top-navbar-mobile__header:has(.ap-hdr-phone) .top-navbar-mobile__phone{display:none!important}
/* Phones and tablets: the header scrolls away with the page instead of staying pinned (PACE pins it and adds a matching margin-top to #wrap) */
@media (max-width:1199.98px){
  body .navbar-wrapper{position:relative!important;top:auto!important}
  body #wrap{margin-top:0!important}
}
@media (max-width:767.98px){
  #top-navbar-mobile .top-navbar-mobile__header{padding-top:4px;padding-bottom:4px}
  #top-navbar-mobile .top-navbar-mobile__search{padding-bottom:6px!important}
  #mobile-search .row{margin:0!important}
  #mobile-search .btn-quick-order-section{box-sizing:border-box;width:100%!important;max-width:100%;margin:0!important;padding:0 8px 8px!important}
  #mobile-search .btn-quick-order{margin:0!important;width:100%!important;height:40px;min-height:0;padding:0 12px;font-size:14px;line-height:40px;border-radius:6px}
  #elite-extra-bar .alert-banner{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;column-gap:6px;row-gap:0;padding:6px 12px;font-size:13px;line-height:1.35;text-align:center}
  #elite-extra-bar .alert-banner__label::after{content:":"}
  #elite-extra-bar .alert-banner__label,#elite-extra-bar .alert-banner__value,#elite-extra-bar .alert-banner a{margin:0!important;padding:0!important;font-size:13px}
  #elite-extra-bar .alert-banner a{white-space:nowrap}
}
/* === end AllPro compact phone header === */

/* === AllPro phone list rows (Claude, Oct 23 2026) === */
/* Phones only: the list view pins the order form to the top right of each card (position absolute), which lands on the part number. Stack it instead: photo across the full width, part number and brand under it, then stock, price and qty, then the order buttons. */
@media (max-width:767.98px){
  html body .browse-view-mode-vertical .row:has(> .primary-image-container){display:grid!important;grid-template-columns:minmax(0,1fr);column-gap:0;row-gap:0;align-items:start;margin:0!important}
  html body .browse-view-mode-vertical .row:has(> .primary-image-container) > .primary-image-container{width:100%!important;max-width:none!important;padding:0!important;margin:4px 0 0!important;display:flex!important;justify-content:center;background:#fff;border-radius:6px}
  html body .browse-view-mode-vertical .row:has(> .primary-image-container) > .primary-image-container img{width:100%!important;max-width:100%!important;height:170px!important;max-height:170px!important;object-fit:contain!important;margin:0 auto!important}
  html body .browse-view-mode-vertical .row:has(> .primary-image-container) > div:not(.primary-image-container),
  html body .browse-view-mode-vertical .row:has(> .primary-image-container) > div:not(.primary-image-container) > .row{display:contents!important}
  html body .browse-view-mode-vertical .row .product-column-info.product-column-info.product-column-info{grid-column:1;margin-top:10px!important;flex:none!important;width:auto!important;max-width:none!important;padding:0!important}
  html body .browse-view-mode-vertical .product-column-info h3,html body .browse-view-mode-vertical .product-column-info h3 a{font-size:19px!important;line-height:1.25!important}
  html body .browse-view-mode-vertical .product-column-info .product-description,html body .browse-view-mode-vertical .product-column-info .product-description *{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;-webkit-line-clamp:unset!important;display:revert;max-height:none!important}
  html body .browse-view-mode-vertical .product-column-info .product-description p{display:block!important;margin:2px 0 0!important;font-size:14px}
  html body .browse-view-mode-vertical .row:has(> .primary-image-container) > div:not(.primary-image-container) > .row > div:not(.product-column-info){grid-column:1 / -1;width:auto!important;max-width:none!important}
  html body .browse-view-mode-vertical .product-column-form{position:static!important;grid-column:1 / -1!important;width:auto!important;margin:6px 0 0!important;padding:0!important}
  html body .browse-view-mode-vertical .product-column-form > .row{margin:0!important}
  html body .browse-view-mode-vertical .product-column-form > .row > .col-12{padding:0!important}
  html body .browse-view-mode-vertical .product-column-form form{display:flex!important;flex-direction:column;align-items:stretch!important;gap:8px!important;width:100%}
  html body .browse-view-mode-vertical .product-column-form form > h4{display:flex!important;align-items:center;justify-content:space-between;gap:10px;width:100%;max-width:none!important;margin:0!important}
  html body .browse-view-mode-vertical .product-column-form form > .mb-3{display:flex!important;align-items:center;gap:8px;width:100%;margin:0!important}
  html body .browse-view-mode-vertical .product-column-form form > .mb-3:has(.product-cost){justify-content:flex-start}
  html body .browse-view-mode-vertical .product-column-form form > .mb-3:has(.product-cost) .price-watermark-wrap{margin-right:auto}
  html body .browse-view-mode-vertical .product-column-form form > .mb-3:has(.product-cost) .product-cost{text-align:left!important;padding-left:0}
  html body .browse-view-mode-vertical .product-column-form form > .mb-3:has(button){flex-wrap:wrap}
  html body .browse-view-mode-vertical .product-column-form form > .mb-3:has(button) > *{flex:1 1 calc(50% - 4px);min-width:0;margin:0!important}
  html body .browse-view-mode-vertical .product-column-form form > h4.ap-split .ap-inv-sub{text-align:left!important;margin-top:2px!important}
  html body .browse-view-mode-vertical .product-column-form form > .mb-3:has(.product-cost) .price-watermark-wrap{flex:1 1 auto;min-width:0}
  html body .browse-view-mode-vertical .product-column-form .product-cost.cost-text-only{font-size:14px!important;line-height:1.35!important;font-weight:600;text-align:left!important;white-space:normal!important}
}
/* === end AllPro phone list rows === */

/* === AllPro hide GEN-Y strip in phone rebates panel (Claude, Oct 23 2026) === */
/* On phones the AAM rebates list is replaced by the blue Rebates and Offers card, so the GEN-Y strip would sit alone above it. Desktop keeps it. */
@media (max-width:767.98px){html body .ap-p1panel .ap-geny-strip{display:none!important}}
/* === end AllPro hide GEN-Y strip in phone rebates panel === */

/* === AllPro phone footer link lists (Claude, Oct 23 2026) === */
/* Phones, signed in: Your Account, Programs and Company links become one card each with full-width rows, icons lined up on the left and a gray arrow on the right (2-per-row buttons were too narrow, labels spilled out). Desktop and tablets unchanged. */
@media (max-width:767.98px){
html body:has(a[href*="logout"]) .ap-ft-col ul.footer-nav-links:not(:has(a[href*="facebook"])){display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:0!important;border:1px solid #D5DCE5;border-radius:8px;overflow:hidden;background:#fff;max-width:420px;margin-left:auto!important;margin-right:auto!important}
html body:has(a[href*="logout"]) .ap-ft-col ul.footer-nav-links:not(:has(a[href*="facebook"])) > li{border-top:1px solid #E6EBF1;margin:0!important}
html body:has(a[href*="logout"]) .ap-ft-col ul.footer-nav-links:not(:has(a[href*="facebook"])) > li:first-child{border-top:0}
html body:has(a[href*="logout"]) .ap-ft-col ul.footer-nav-links:not(:has(a[href*="facebook"])) > li > a{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;width:100%!important;padding:0 16px!important;min-height:48px;border:0!important;border-radius:0!important;box-shadow:none!important;font-size:15px!important;text-align:left!important;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='%238A96A6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center/7px 12px!important;padding-right:36px!important}
html body:has(a[href*="logout"]) .ap-ft-col ul.footer-nav-links:not(:has(a[href*="facebook"])) > li > a:not(:has(svg)){padding-left:44px!important;gap:0!important}
html body:has(a[href*="logout"]) .ap-ft-col ul.footer-nav-links:not(:has(a[href*="facebook"])) > li > a .ap-nav-ico{margin:0!important;width:16px!important;height:16px!important;flex:0 0 16px!important}
}
/* === end AllPro phone footer link lists === */

/* === AllPro phone footer Company icons (Claude, Oct 23 2026) === */
/* Fixes the doubled Privacy/Terms labels (PACE shows those names through ::after and hides the real text with font-size 0) and gives every Company row an icon so the text lines up with Log Out. */
@media (max-width:767.98px){
html body:has(a[href*="logout"]) .ap-ft-col ul.footer-nav-links:not(:has(a[href*="facebook"])) > li > a[href$="privacy-policy"],html body:has(a[href*="logout"]) .ap-ft-col ul.footer-nav-links:not(:has(a[href*="facebook"])) > li > a[href$="/terms"]{font-size:0!important;gap:0!important}
html body:has(a[href*="logout"]) .ap-ft-col ul.footer-nav-links:not(:has(a[href*="facebook"])) > li > a[href$="privacy-policy"]::after,html body:has(a[href*="logout"]) .ap-ft-col ul.footer-nav-links:not(:has(a[href*="facebook"])) > li > a[href$="/terms"]::after{font-size:15px!important;line-height:1.2;margin-left:12px}
html body:has(a[href*="logout"]) .ap-ft-col ul.footer-nav-links:not(:has(a[href*="facebook"])) > li > a:not(:has(svg)){padding-left:16px!important;gap:12px!important}
html body:has(a[href*="logout"]) .ap-ft-col ul.footer-nav-links:not(:has(a[href*="facebook"])) > li > a:not(:has(svg))::before{content:"";flex:0 0 16px;width:16px;height:16px;background:no-repeat center/16px 16px;opacity:.65}
html body:has(a[href*="logout"]) .ap-ft-col ul.footer-nav-links:not(:has(a[href*="facebook"])) > li > a[href$="privacy-policy"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230057B8' d='M8 .8l6.2 2.6v4.3c0 3.7-2.6 6.9-6.2 7.6C4.4 14.6 1.8 11.4 1.8 7.7V3.4z'/%3E%3C/svg%3E")}
html body:has(a[href*="logout"]) .ap-ft-col ul.footer-nav-links:not(:has(a[href*="facebook"])) > li > a[href$="/terms"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230057B8' d='M3 0h6.6L13 3.4V16H3zM5 7v1.4h6V7zm0 3v1.4h6V10zM9 .8V4h3.2z'/%3E%3C/svg%3E")}
html body:has(a[href*="logout"]) .ap-ft-col ul.footer-nav-links:not(:has(a[href*="facebook"])) > li > a:not([href$="privacy-policy"]):not([href$="/terms"]):not(:has(svg))::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230057B8' d='M1 3.3h8.2v1.8H1zm11.3-1.6a2.5 2.5 0 110 5 2.5 2.5 0 010-5zM6.8 10.9H15v1.8H6.8zM3.7 9.3a2.5 2.5 0 110 5 2.5 2.5 0 010-5z'/%3E%3C/svg%3E")}
html body:has(a[href*="logout"]) .ap-ft-col ul.footer-nav-links:not(:has(a[href*="facebook"])) > li > a > svg{opacity:.65}
html body:has(a[href*="logout"]) .ap-ft-col ul.footer-nav-links:not(:has(a[href*="facebook"])) > li > a[href*="logout"]{text-transform:none!important;letter-spacing:normal!important;font-size:15px!important}
}
/* === end AllPro phone footer Company icons === */

/* === AllPro phone home card spacing (Claude, Oct 23 2026) === */
/* Phones, signed-in home: even 24px between the home cards (was 12px) and 24px from the last card to the footer (was 70px), same 24px as hero to first card. */
@media (max-width:767.98px){
  html body:has(#home-page .ap-midrow) #home-page .ap-midrow .ap-p1panel{margin-bottom:24px!important}
  html body:has(#home-page .ap-midrow) .footer-wrapper.ap-ft{margin-top:-10px!important}
}
/* === end AllPro phone home card spacing === */

/* === AllPro catalog rows stock by warehouse (Claude, Oct 23 2026) === */
html body .order-form > .ap-whs-line{flex:1 1 100%;width:100%;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;column-gap:6px;row-gap:2px;margin:-2px 0 2px;font-size:13.5px;line-height:1.3;color:#1d2733;white-space:nowrap}
html body .order-form > .ap-whs-line b{font-weight:700;color:#0057B8}
html body .order-form > .ap-whs-line .ap-whs-zero,html body .order-form > .ap-whs-line .ap-whs-zero b{color:#9AA3AF}
html body .order-form > .ap-whs-line .ap-whs-dot{color:#B5BDC8}
/* Wide screens: give the stock/price column room so price, Order Qty and the box sit on one line instead of wrapping */
@media (min-width:1400px){
  html body .browse-view-mode-vertical .product-column-form form{grid-template-columns:300px 128px!important}
  html body .browse-view-mode-vertical .product-column-form form > .mb-3:has(.product-cost){display:flex!important;flex-wrap:nowrap!important;align-items:center;justify-content:flex-end;gap:8px}
  html body .browse-view-mode-vertical .product-column-form form > .mb-3:has(.product-cost) > *{margin:0!important}
  html body .browse-view-mode-vertical .product-column-form form > .mb-3:has(.product-cost) input[type="number"],html body .browse-view-mode-vertical .product-column-form form > .mb-3:has(.product-cost) .quantity-input{flex:0 0 48px}
}
@media (max-width:767.98px){html body .browse-view-mode-vertical .product-column-form form > .ap-whs-line{justify-content:flex-start;margin:-4px 0 0;font-size:14px}}
/* === end AllPro catalog rows stock by warehouse === */

/* === AllPro pricing error message, compact (Claude, Oct 23 2026) === */
/* When PACE can't get a price it fills the price spot with "We are currently experiencing technical difficulties. Please call 800-858-4487 for pricing." at about 22px, centered over 5 to 6 lines. Keep PACE's wording, just make it small and tidy. Phones are handled in the phone list rows block. */
@media (min-width:768px){
  html body .order-form .product-cost.cost-text-only{display:block!important;font-size:13px!important;line-height:1.35!important;font-weight:600!important;text-align:right!important;white-space:normal!important;max-width:300px;margin:0 0 0 auto!important;padding:0!important;color:#C8102E!important;text-wrap:balance}
  html body .order-form .mb-3:has(.cost-text-only) .cost-label{display:none!important}
  html body .order-form .mb-3:has(.cost-text-only),html body .browse-view-mode-vertical .product-column-form form > .mb-3:has(.cost-text-only){flex-wrap:wrap!important;justify-content:flex-end!important;row-gap:6px}
  html body .browse-view-mode-vertical .product-column-form form > .mb-3:has(.cost-text-only) > .price-watermark-wrap,html body .order-form .mb-3:has(.cost-text-only) .price-watermark-wrap{flex:1 1 100%!important;width:100%;min-width:0;text-align:right}
  html body .order-form .mb-3:has(.cost-text-only) .ap-qty-label{white-space:nowrap}
}
/* Part page price box */
@media (min-width:768px){
  html body .product-cost.cost-text-only:not(.order-form .product-cost){font-size:16px!important;line-height:1.4!important;font-weight:600!important;text-align:left!important;white-space:normal!important;color:#C8102E!important}
}
/* === end AllPro pricing error message, compact === */

/* AllPro product page stock table at top (Claude, Oct 23 2026). Pairs with the Custom JS block of the same name; only applies once that script adds body.ap-pdp-wh-top. */
body.ap-pdp-wh-top .product-info-card strong.inventory{display:none!important}
body.ap-pdp-wh-top h4>button.product-locations[data-bs-target="#locationsModal"]{display:none!important}
body.ap-pdp-wh-top .product-info-card>div>h4{margin:0!important;min-height:0}
body.ap-pdp-wh-top .product-pdp-meta.ap-meta-fit{align-items:center!important;gap:16px;margin:6px 0 14px!important}
body.ap-pdp-wh-top .product-pdp-meta.ap-meta-fit .ap-fit-btn{margin:0!important;padding:6px 14px!important;font-size:14px!important}
body.ap-pdp-wh-top .product-info-card>#ap-wh{margin:0 0 16px!important;width:100%}
/* end AllPro product page stock table at top */

/* AllPro delivery bar, no blue edge (Claude, Oct 23 2026). Evan's call: remove PACE's 4px blue left stripe and rounded bottom corners on the Next delivery time bar, all screen sizes. Delete to undo. */
html body #elite-extra-bar .alert-banner{border-left:0!important;border-radius:0!important}
/* end AllPro delivery bar, no blue edge */

/* AllPro tablet stock table fit (Claude, Oct 23 2026). Evan's call: on tablets (768 to 1199px) the part page Stock by Warehouse table fits the buy box (smaller text, wrapping). Phones and desktop untouched. Delete to undo. */
@media (min-width:768px) and (max-width:1199.98px){html body #ap-wh table{table-layout:auto;width:100%!important}html body #ap-wh table th,html body #ap-wh table td{font-size:12.5px!important;padding-left:6px!important;padding-right:6px!important;white-space:normal!important;word-break:normal}html body #ap-wh table th{line-height:1.2}}
/* end AllPro tablet stock table fit */

/* AllPro phone part page order (Claude, Oct 23 2026). Evan's call: on phones (under 768px) the part info and buy box come right after the photos; the red RealTruck Visualizer and Est. Labor notes move below it. Tablet and desktop untouched. Delete to undo. */
@media (max-width:767.98px){html body .product-page-hero-row>.product-images.product-page-media{display:contents}html body .product-page-hero-row>.product-images>.product-detail-badges{order:1}html body .product-page-hero-row>.product-images>.product-media-card{order:2}html body .product-page-hero-row>.product-page-details{order:3}html body .product-page-hero-row>.product-images>.ap-left-msgs{order:4;margin-top:4px}}
/* end AllPro phone part page order */

/* AllPro alternative parts stock (Claude, Oct 23 2026). Pairs with the Custom JS block of the same name. */
.equivalent-parts-stack .ap-alt-whs{display:block;font-size:12.5px;line-height:1.35;color:#5B6676;margin:2px 0 3px;white-space:nowrap}
.equivalent-parts-stack .ap-alt-whs b{color:#0057B8;font-weight:600}
.equivalent-parts-stack .ap-alt-whs .ap-z,.equivalent-parts-stack .ap-alt-whs .ap-z b{color:#9AA3AE}
.equivalent-parts-stack .ap-alt-whs i{font-style:normal;color:#C3C9D1;margin:0 4px}
.equivalent-parts-stack .ap-alt-whs .ap-ds{color:#1E7B45;font-weight:600}
.equivalent-parts-stack a.product-equivalent-part.ap-alt-out{display:none!important}
.ap-alt-on .equivalent-parts-stack>a.product-equivalent-part:first-child{border-top-color:transparent!important;margin-top:0!important}
.ap-alt-none{display:none!important}
.ap-alt-few .equivalent-parts-stack--more,.ap-alt-few #show-more-equivalent-parts{display:none!important}
/* end AllPro alternative parts stock */

/* AllPro phone Quick Order on gray header (Claude, Oct 23 2026). Evan's call: on phones (under 768px) the Quick Order button sits on the light gray header instead of the blue bar, with even 14px space above and below and corners matching the search box. Tablet and desktop untouched. Delete to undo. */
@media (max-width:767.98px){html body #top-navbar-mobile{border-bottom:0!important;box-shadow:none!important}html body #bottom-navbar{background:#F8F9FA!important;box-shadow:none!important;border-bottom:0!important}html body #bottom-navbar .btn-quick-order-section{padding:0 8px 14px!important}html body #bottom-navbar .btn-quick-order{border-radius:12px!important;height:46px!important;min-height:0!important;box-shadow:0 1px 2px rgba(15,23,42,.08)!important}}
/* end AllPro phone Quick Order on gray header */

/* AllPro logged-out phone header fixes (Claude, Oct 23 2026). Evan's call: (1) under 1200px the logged-out home hero starts right under the header (the 60px top margin is only needed for the pinned desktop header); (2) on phones the header is one even gray (the phone number column had its own white box). Desktop untouched. Delete to undo. */
@media (max-width:1199.98px){html body #wrap:has(.ap-lo-hero-wrap){margin-top:0!important}}
@media (max-width:767.98px){html body #top-navbar #mobile-phone,html body #top-navbar #mobile-phone>a{background:transparent!important}}
/* end AllPro logged-out phone header fixes */

/* AllPro phone menu redesign (Claude, Oct 23 2026). Evan's call: phone hamburger menu (signed in and signed out) with Shop / AllPro / account sections, one row style, an icon on every item, one gray arrow, View Cart label, full-height scrolling sheet. Phones only (under 768px). Pairs with the Custom JS block of the same name. Delete both to undo. */
html body .ap-mm-head,html body .ap-mm-ico,html body .ap-mm-chev{display:none!important}
@media (max-width:767.98px){
html body li.ap-mm-head{display:block!important}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .ap-mm-ico{display:block!important}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .ap-mm-chev{display:block!important}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar){background:#fff!important}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar).show{width:100%;max-height:calc(100dvh - 140px);overflow-y:auto;-webkit-overflow-scrolling:touch;border-top:1px solid #E3EBF3;box-shadow:0 14px 28px rgba(15,23,42,.14)}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar)>ul{padding:4px 0 80px!important;margin:0!important;width:100%}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) a:focus:not(:focus-visible),html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) button:focus:not(:focus-visible){outline:0!important;box-shadow:none!important}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar)>ul>li{border:0!important;margin:0!important;background:transparent!important}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar)>ul>li>a,html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar)>ul>li>.navbar-li-wrapper>a{display:flex!important;align-items:center;gap:12px;min-height:50px;padding:0 18px!important;font-size:16px!important;font-weight:600!important;line-height:1.2!important;color:#1B2433!important;border:0!important;border-bottom:1px solid #EEF2F6!important;border-radius:0!important;background:transparent!important;text-transform:none!important;letter-spacing:0!important}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar)>ul>li>a::after,html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar)>ul>li>.navbar-li-wrapper>a::after{display:none!important;content:none!important}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar)>ul>li>a .ap-nav-ico,html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar)>ul>li>.navbar-li-wrapper>a .ap-nav-ico,html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .ymm-nav-toggle-icon,html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .ap-mm-ico{flex:none;width:18px!important;height:18px!important;margin:0!important;color:#0057B8!important}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .ymm-nav-toggle-label{display:flex!important;align-items:center;gap:12px}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) a.nav-link-own-caret>span{margin-left:auto!important;display:flex!important;align-items:center}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) a.nav-link-own-caret>span>svg{display:none!important}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) a.nav-link-own-caret>span::before,html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) a.ymm-nav-toggle-chev::before,html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .ap-mm-chev{content:"";display:block;width:12px;height:12px;background:#9AA3AE;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) a.nav-link-own-caret[aria-expanded="true"]>span::before,html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) a.nav-link-own-caret.show>span::before{transform:rotate(180deg)}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .ap-mm-chev.ap-r{transform:rotate(-90deg)}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) a .float-end{display:none!important}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .ap-mm-chev{margin-left:auto}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) li.ap-mm-head{font-size:12px!important;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#6B7686;padding:20px 18px 6px!important;border-bottom:1px solid #EEF2F6!important}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) li.ap-mm-head:first-child{padding-top:12px!important}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar)>ul>li.ap-mm-head:first-child{order:-9!important}
html body #top-navbar #navbar .navbar-nav>li>a.nav-link[href]{padding:0 18px!important;margin:0!important;border:0!important;border-bottom:1px solid #EEF2F6!important;border-radius:0!important;background:transparent!important;color:#1B2433!important;font-size:16px!important;font-weight:600!important;min-height:50px;box-shadow:none!important}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .nav-child-list,html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .ymm-nav-menu{position:static!important;float:none!important;transform:none!important;margin:0!important;padding:4px 0!important;border:0!important;border-bottom:1px solid #EEF2F6!important;border-radius:0!important;box-shadow:none!important;background:#F6F8FB!important}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .nav-child-list a{display:flex!important;align-items:center;min-height:44px;padding:0 18px 0 48px!important;font-size:15px!important;font-weight:500!important;color:#2B3545!important;background:transparent!important;border:0!important;white-space:normal!important}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .nav-child-list .nav-child-list a{padding-left:64px!important;font-size:14.5px!important}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .ap-mm-cart strong{font-size:16px!important;font-weight:600!important;color:#1B2433!important;text-transform:none!important;letter-spacing:0!important;display:inline!important}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .ap-mm-cart .label-orders-count{display:inline-block!important;margin-left:8px;background:#C8102E!important;color:#fff!important;border-radius:999px;font-size:12px;padding:3px 8px}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .ap-mm-cart .label-orders-count.ap-zero{display:none!important}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .mobile-logout,html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .view-as-exit{display:flex!important;align-items:center;justify-content:center;gap:8px;width:calc(100% - 36px)!important;height:46px;margin:16px 18px 0!important;border-radius:10px!important;font-size:15px!important;font-weight:700!important;background:#fff!important;color:#C8102E!important;border:1.5px solid #C8102E!important;box-shadow:none!important;text-transform:none!important}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .view-as-exit{color:#4A5568!important;border-color:#C3C9D1!important}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .mobile-logout svg{width:16px;height:16px}
}
/* end AllPro phone menu redesign */

/* AllPro phone menu vehicle panel (Claude, Oct 23 2026). Evan's call: in the phone menu's Select Your Vehicle panel, fields and buttons are inset 18px to line up with the menu, 46px tall with rounded corners; Reset is a gray outline so Search stays the main button. Phones only. Delete to undo. */
@media (max-width:767.98px){html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .ymm-nav-menu{padding:14px 18px 18px!important}html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .ymm-nav-menu .ymm-field{list-style:none;margin:0 0 12px!important;padding:0!important}html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .ymm-nav-menu .ymm-field-label{display:block;font-size:13px!important;font-weight:600!important;color:#4A5568!important;margin:0 0 5px!important}html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .ymm-nav-menu .form-select,html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .ymm-nav-menu input.form-control,html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .ymm-nav-menu input[type=text]{width:100%!important;height:46px;border-radius:10px!important;font-size:15px!important}html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .ymm-nav-menu .btn{width:100%!important;height:46px;border-radius:10px!important;margin:0 0 10px!important;font-size:15px!important;font-weight:700!important}html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .ymm-nav-menu a.btn{background:#fff!important;color:#4A5568!important;border:1.5px solid #C3C9D1!important;box-shadow:none!important}}
/* end AllPro phone menu vehicle panel */

/* AllPro phone menu login form (Claude, Oct 23 2026). Evan's call: in the signed-out phone menu the User / Password / Login form is inset 18px on a light gray panel with no gap above it, 46px fields and button with rounded corners. Phones only. Delete to undo. */
@media (max-width:767.98px){html body #top-navbar #navbar>ul.navbar-nav:not(.navbar-login){padding-bottom:0!important}html body #top-navbar #navbar>ul.navbar-login{display:block!important;width:100%;padding:16px 18px 80px!important;margin:0!important;background:#F6F8FB!important;border-top:1px solid #EEF2F6}html body #top-navbar #navbar .navbar-login form{gap:12px!important;margin:0!important}html body #top-navbar #navbar .navbar-login .mb-0{margin:0!important;height:auto!important}html body #top-navbar #navbar .navbar-login input.form-control{margin:0!important;width:100%!important;height:46px!important;border-radius:10px!important;font-size:15px!important;padding:0 14px!important}html body #top-navbar #navbar .navbar-login .form-check{display:flex;align-items:center;gap:8px;min-height:24px;padding-left:0!important;margin:0!important}html body #top-navbar #navbar .navbar-login .form-check-label{display:flex;align-items:center;gap:8px;font-size:14px;color:#4A5568}html body #top-navbar #navbar .navbar-login .form-check-input{margin:0!important;float:none!important}html body #top-navbar #navbar .navbar-login input[type=submit]{width:100%!important;height:46px!important;padding:0!important;border-radius:10px!important;font-size:15px!important;font-weight:700!important;margin:4px 0 0!important}}
/* end AllPro phone menu login form */

/* AllPro phone logo size (Claude, Oct 23 2026). Evan's call: the header logo is 128px wide on every phone, signed in and signed out (an older rule made it 110px at 390 and 148px at 440). Phones only. Delete to undo. */
@media (max-width:767.98px){html body #top-navbar-mobile .top-navbar-mobile__logo-img,html body .top-navbar-mobile .top-navbar-mobile__logo-img,html body #top-navbar .navbar-logo img{width:128px!important;height:auto!important;max-width:none!important}html body #top-navbar-mobile .top-navbar-mobile__logo,html body #top-navbar-mobile .navbar-logo{width:auto!important}}
/* end AllPro phone logo size */

/* AllPro phone logo size, signed out (Claude, Oct 23 2026). Same 128px phone logo for the signed-out header, which has its own older sizing rule. Delete to undo. */
@media (max-width:767.98px){html body #top-navbar > #nav-logo img{width:128px!important;max-width:none!important;height:auto!important}}
/* end AllPro phone logo size, signed out */

/* AllPro phone call icon button (Claude, Oct 23 2026). Evan's call: on phones the header call pill becomes a 48px phone icon button styled like the menu button, signed in and signed out (still dials 800-858-4487). Phones only. Delete to undo. */
@media (max-width:767.98px){html body .top-navbar-mobile__header a.ap-hdr-phone{font-size:0!important;width:48px!important;height:48px!important;padding:0!important;gap:0!important;justify-content:center!important;border-radius:10px!important;margin:0 0 0 auto!important;border:1px solid rgb(208, 220, 232)!important;background:rgb(248, 250, 252)!important;box-shadow:none!important;border-radius:10px!important}html body .top-navbar-mobile__header a.ap-hdr-phone svg{width:18px!important;height:18px!important;margin:0!important}}
@media (max-width:767.98px){html body #top-navbar #mobile-phone{display:flex!important;justify-content:flex-end!important;align-items:center;padding-right:8px!important}html body #top-navbar #mobile-phone>a{width:48px!important;height:48px!important;padding:0!important;gap:0!important;justify-content:center!important;align-items:center!important;border:1px solid rgb(208,220,232)!important;background:rgb(248,250,252)!important;border-radius:10px!important;box-shadow:none!important}html body #top-navbar #mobile-phone>a>em{display:none!important}html body #top-navbar #mobile-phone>a::before{width:21px!important;height:21px!important;flex:0 0 21px!important;margin:0!important;-webkit-mask-size:21px 21px!important;mask-size:21px 21px!important;background-size:21px 21px!important}}
/* end AllPro phone call icon button */

/* AllPro nav pills when links carry a code (Claude, Oct 23 2026). Evan's call: repeats the signed-in Brands and Categories pill rules for links with anything added after them (View As adds ?vc=...), so the pills beside the phone always show. Delete to undo. */
#bottom-navbar .navbar-nav > li:has(> a[href^="catalog/brands?"]),#bottom-navbar .navbar-nav > li:has(> a[href^="catalog/categories?"]){margin: 0px; background: transparent !important; border-left-color: transparent !important; border-right-color: transparent !important;}
#bottom-navbar a[href^="catalog/brands?"],#bottom-navbar a[href^="catalog/categories?"]{align-items: center; height: auto; margin: 0px; padding: 6px 12px; font-weight: 700; border-radius: 3px; display: inline-flex !important; background: rgb(200, 16, 46) !important; color: rgb(255, 255, 255) !important;}
#bottom-navbar a[href^="catalog/brands?"]:hover,#bottom-navbar a[href^="catalog/categories?"]:hover{background: rgb(165, 13, 38) !important; color: rgb(255, 255, 255) !important;}
html body #bottom-navbar a[href^="catalog/brands?"],html body #bottom-navbar a[href^="catalog/categories?"]{align-items: center; display: inline-flex !important; background: rgb(255, 255, 255) !important; color: rgb(0, 87, 184) !important; font-weight: 700 !important; border-radius: 999px !important; padding: 6px 16px !important; margin: 0px !important; line-height: 21px !important; box-shadow: rgba(0, 0, 0, 0.18) 0px 1px 2px !important; transition: none !important;}
html body #bottom-navbar a[href^="catalog/brands?"]:hover,html body #bottom-navbar a[href^="catalog/brands?"]:focus,html body #bottom-navbar a[href^="catalog/categories?"]:hover,html body #bottom-navbar a[href^="catalog/categories?"]:focus{background: rgb(234, 242, 252) !important; color: rgb(0, 87, 184) !important;}
html body #bottom-navbar .navbar-nav > li:has(> a[href^="catalog/brands?"]){border-left: 1px solid rgba(255, 255, 255, 0.4) !important; padding: 0px 4px 0px 14px !important; margin: 0px !important; transition: none !important;}
html body #bottom-navbar .navbar-nav > li:has(> a[href^="catalog/categories?"]){border-left-color: transparent !important; padding: 0px 12px 0px 4px !important; margin: 0px !important; transition: none !important;}
html body #bottom-navbar a[href^="catalog/brands?"],html body #bottom-navbar a[href^="catalog/categories?"]{align-items: center; display: inline-flex !important; background: rgba(255, 255, 255, 0.12) !important; color: rgb(255, 255, 255) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 18.2px !important; border: 1px solid rgba(255, 255, 255, 0.32) !important; border-radius: 999px !important; padding: 6.3px 14.7px !important; margin: 0px !important; height: 32.8px !important; box-sizing: border-box !important; box-shadow: rgba(0, 0, 0, 0.18) 0px 1px 2px, rgba(255, 255, 255, 0.12) 0px 1px 0px inset !important; transition: none !important;}
html body #bottom-navbar a[href^="catalog/brands?"]:hover,html body #bottom-navbar a[href^="catalog/brands?"]:focus,html body #bottom-navbar a[href^="catalog/categories?"]:hover,html body #bottom-navbar a[href^="catalog/categories?"]:focus{background: rgba(255, 255, 255, 0.2) !important; border-color: rgba(255, 255, 255, 0.48) !important; color: rgb(255, 255, 255) !important; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px, rgba(255, 255, 255, 0.16) 0px 1px 0px inset !important;}
html body #bottom-navbar .navbar-nav > li:has(> a[href^="catalog/brands?"]),html body #bottom-navbar .navbar-nav > li:has(> a[href^="catalog/categories?"]){order: -1 !important; border-left-color: transparent !important; margin: 0px !important; transition: none !important;}
html body #bottom-navbar .navbar-nav > li:has(> a[href^="catalog/brands?"]){padding: 0px 3.5px 0px 1px !important;}
html body #bottom-navbar .navbar-nav > li:has(> a[href^="catalog/categories?"]){padding: 0px 12px 0px 3.5px !important;}
@media (min-width: 992px) and (max-width: 1500px){html body #bottom-navbar a[href^="catalog/brands?"],html body #bottom-navbar a[href^="catalog/categories?"]{padding: 3px 8px !important; font-size: 12px !important; height: auto !important;}}
@media (min-width: 992px) and (max-width: 1500px){html body #bottom-navbar .navbar-nav > li:has(> a[href^="catalog/brands?"]){padding: 0px 2px 0px 1px !important;}}
@media (min-width: 992px) and (max-width: 1500px){html body #bottom-navbar .navbar-nav > li:has(> a[href^="catalog/categories?"]){padding: 0px 4px 0px 2px !important;}}
/* end AllPro nav pills when links carry a code */

/* AllPro iPad header (Claude, Oct 23 2026). Evan's call: on iPad widths (768 to 1199px) the signed-in site uses the phone header (logo, call and menu buttons, search, Quick Order) instead of the desktop rows, and the Next delivery time text is centered in its bar. Phone and desktop are unchanged. Delete this block to undo. */
@media (min-width:768px) and (max-width:1199.98px){html body:has(#top-navbar-mobile) nav#top-navbar-mobile#top-navbar-mobile{display:flex!important}html body:has(#top-navbar-mobile) nav#top-navbar#top-navbar{display:none!important}html body:has(#top-navbar-mobile) nav#bottom-navbar#bottom-navbar{display:block!important;grid-template-areas:none!important;grid-template-columns:none!important;height:auto!important;min-height:0!important;padding:0!important}html body:has(#top-navbar-mobile) nav#bottom-navbar#bottom-navbar>#nav-phone,html body:has(#top-navbar-mobile) nav#bottom-navbar#bottom-navbar>#nav-links,html body:has(#top-navbar-mobile) nav#bottom-navbar#bottom-navbar>#nav-orders{display:none!important}html body:has(#top-navbar-mobile) nav#bottom-navbar#bottom-navbar>#mobile-search{display:block!important}html body:has(#top-navbar-mobile) div#subnav-links#subnav-links,html body:has(#top-navbar-mobile) nav#bottom-subnavbar#bottom-subnavbar,html body:has(#top-navbar-mobile) .flex-item:has(> #bottom-subnavbar){display:none!important}.navbar-toggler { color: rgb(0, 0, 0); border: rgba(0, 0, 0, 0); border-radius: 0px; flex: 1 1 auto; margin: 0px; background: 0px 0px !important; }.navbar-toggler:hover { background: 0px 0px !important; }.navbar-toggler .icon-bar { opacity: 1; background-color: rgb(0, 0, 0); width: 24px; height: 2px; margin: 0px auto; transition: 0.2s; display: block !important; }.navbar-toggler .icon-bar + .icon-bar { margin-top: 6px !important; }.navbar-toggler .top-bar { transform-origin: 10% 10%; transform: rotate(45deg); }.navbar-toggler .middle-bar { opacity: 0; }.navbar-toggler .bottom-bar { transform-origin: 10% 90%; transform: rotate(-45deg); }.navbar-toggler.collapsed .top-bar { transform: rotate(0deg); }.navbar-toggler.collapsed .middle-bar { opacity: 1; }.navbar-toggler.collapsed .bottom-bar { transform: rotate(0deg); }#top-navbar.navbar { border-bottom: 1px solid rgb(227, 235, 243); }#bottom-navbar.navbar { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }#bottom-navbar { min-height: var(--nav-height-bottom); }#top-navbar { height: var(--nav-height-bottom); padding-top: 0px; padding-bottom: 0px; }#top-navbar .navbar-logo { min-height: 0px; }#top-navbar #nav-logo { height: var(--nav-height-bottom); flex: 1 1 auto; padding-top: 0px; padding-bottom: 0px; }#top-navbar #nav-logo img { max-height: 58px; }#top-navbar #mobile-phone { line-height: var(--nav-height-bottom); flex: 1 1 auto; align-self: center; height: 59px; padding: 0px; font-size: 12px; font-weight: 600; background-color: rgb(255, 255, 255) !important; }#top-navbar #mobile-phone a { color: rgb(178, 0, 0); }#top-navbar #mobile-phone a:hover, #top-navbar #mobile-phone a:focus, #top-navbar #mobile-phone a:active { color: rgb(153, 0, 0); }#top-navbar .row div { height: auto; }#top-navbar #nav-account { height: var(--nav-height-bottom); flex: 1 1 auto; }#top-navbar #nav-account form { height: var(--nav-height-bottom); margin: -1px 0px 0px; padding: 0px 15px 0px 35px; }#top-navbar #nav-account form input[type="text"] { height: var(--nav-height-bottom); padding-left: 0px; font-size: 14px; }#top-navbar #nav-account form button { height: 40px; padding: 6px 10px; }#top-navbar-mobile { z-index: 11; position: relative; }#top-navbar .navbar-collapse, #top-navbar-mobile .navbar-collapse { z-index: 11; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); border-top: 0px; border-bottom: 1px solid rgba(0, 0, 0, 0.5); width: 100%; position: absolute; top: 100%; left: 0px; box-shadow: rgba(0, 0, 0, 0.32) 0px 10px 15px; }#top-navbar .navbar-collapse .navbar-nav > li > a, #top-navbar .navbar-collapse .navbar-nav > li > .navbar-li-wrapper > a, #top-navbar .navbar-collapse .dropdown-menu > li > a, #top-navbar .navbar-collapse .dropdown-menu > li > .navbar-li-wrapper > a, #top-navbar-mobile .navbar-collapse .navbar-nav > li > a, #top-navbar-mobile .navbar-collapse .navbar-nav > li > .navbar-li-wrapper > a, #top-navbar-mobile .navbar-collapse .dropdown-menu > li > a, #top-navbar-mobile .navbar-collapse .dropdown-menu > li > .navbar-li-wrapper > a { color: rgb(0, 0, 0); padding: 10px 15px; font-size: 14px; }#top-navbar .navbar-collapse .navbar-nav > li > a:not(.btn)::after, #top-navbar .navbar-collapse .dropdown-menu > li > a:not(.btn)::after, #top-navbar-mobile .navbar-collapse .navbar-nav > li > a:not(.btn)::after, #top-navbar-mobile .navbar-collapse .dropdown-menu > li > a:not(.btn)::after { content: ""; float: right; font-family: FontAwesome, sans-serif; font-weight: 400; }#top-navbar .navbar-collapse li.dropdown.show > a:not(.btn)::after, #top-navbar-mobile .navbar-collapse li.dropdown.show > a:not(.btn)::after { content: ""; }#top-navbar .navbar-collapse .navbar-nav, #top-navbar-mobile .navbar-collapse .navbar-nav { margin: 0px -15px; }#top-navbar .navbar-collapse .navbar-nav > li, #top-navbar-mobile .navbar-collapse .navbar-nav > li { border-bottom: 1px solid rgb(221, 221, 221); }#top-navbar .navbar-collapse .dropdown-menu, #top-navbar-mobile .navbar-collapse .dropdown-menu { padding: 15px; }#top-navbar .navbar-collapse .dropdown-menu > li > a, #top-navbar-mobile .navbar-collapse .dropdown-menu > li > a { font-size: 16px; font-weight: 400; }#top-navbar .dropdown-box, #top-navbar-mobile .dropdown-box { width: 100%; }#top-navbar .dropdown-box li, #top-navbar-mobile .dropdown-box li { text-transform: uppercase; margin: 15px 0px; font-size: 20px; font-style: italic; font-weight: 600; }#top-navbar .dropdown-box li select, #top-navbar .dropdown-box li input, #top-navbar-mobile .dropdown-box li select, #top-navbar-mobile .dropdown-box li input { color: rgb(0, 0, 0); border-radius: 0px; width: 100%; height: 40px; font-size: 16px; font-style: normal; font-weight: 600; }#top-navbar .dropdown-box li .btn, #top-navbar-mobile .dropdown-box li .btn { background-color: rgb(178, 0, 0); width: 100%; color: rgb(255, 255, 255) !important; margin-top: 6px !important; padding: 15px !important; font-size: 16px !important; }#top-navbar .dropdown-box li .btn:hover, #top-navbar .dropdown-box li .btn:focus, #top-navbar .dropdown-box li .btn:active, #top-navbar-mobile .dropdown-box li .btn:hover, #top-navbar-mobile .dropdown-box li .btn:focus, #top-navbar-mobile .dropdown-box li .btn:active { background-color: rgb(153, 0, 0) !important; }#top-navbar .dropdown-box.ymm-nav-menu, #top-navbar .dropdown-box.engine-nav-menu, #top-navbar-mobile .dropdown-box.ymm-nav-menu, #top-navbar-mobile .dropdown-box.engine-nav-menu { width: 100%; max-width: none; padding: 10px !important; }#top-navbar .dropdown-box.ymm-nav-menu li, #top-navbar .dropdown-box.engine-nav-menu li, #top-navbar-mobile .dropdown-box.ymm-nav-menu li, #top-navbar-mobile .dropdown-box.engine-nav-menu li { text-transform: none; margin: 0px 0px 12px; font-size: 14px; font-style: normal; font-weight: 500; }#top-navbar .dropdown-box.ymm-nav-menu li .ymm-field-label, #top-navbar .dropdown-box.ymm-nav-menu li .engine-field-label, #top-navbar .dropdown-box.engine-nav-menu li .ymm-field-label, #top-navbar .dropdown-box.engine-nav-menu li .engine-field-label, #top-navbar-mobile .dropdown-box.ymm-nav-menu li .ymm-field-label, #top-navbar-mobile .dropdown-box.ymm-nav-menu li .engine-field-label, #top-navbar-mobile .dropdown-box.engine-nav-menu li .ymm-field-label, #top-navbar-mobile .dropdown-box.engine-nav-menu li .engine-field-label { margin-bottom: 6px; font-size: 11px; }#top-navbar .dropdown-box.ymm-nav-menu li .form-select, #top-navbar .dropdown-box.ymm-nav-menu li .form-control, #top-navbar .dropdown-box.ymm-nav-menu li .ymm-vin, #top-navbar .dropdown-box.ymm-nav-menu li select, #top-navbar .dropdown-box.ymm-nav-menu li input, #top-navbar .dropdown-box.engine-nav-menu li .form-select, #top-navbar .dropdown-box.engine-nav-menu li .form-control, #top-navbar .dropdown-box.engine-nav-menu li .ymm-vin, #top-navbar .dropdown-box.engine-nav-menu li select, #top-navbar .dropdown-box.engine-nav-menu li input, #top-navbar-mobile .dropdown-box.ymm-nav-menu li .form-select, #top-navbar-mobile .dropdown-box.ymm-nav-menu li .form-control, #top-navbar-mobile .dropdown-box.ymm-nav-menu li .ymm-vin, #top-navbar-mobile .dropdown-box.ymm-nav-menu li select, #top-navbar-mobile .dropdown-box.ymm-nav-menu li input, #top-navbar-mobile .dropdown-box.engine-nav-menu li .form-select, #top-navbar-mobile .dropdown-box.engine-nav-menu li .form-control, #top-navbar-mobile .dropdown-box.engine-nav-menu li .ymm-vin, #top-navbar-mobile .dropdown-box.engine-nav-menu li select, #top-navbar-mobile .dropdown-box.engine-nav-menu li input { border-radius: 10px; min-height: 42px; }#top-navbar .dropdown-box.ymm-nav-menu li .btn, #top-navbar .dropdown-box.engine-nav-menu li .btn, #top-navbar-mobile .dropdown-box.ymm-nav-menu li .btn, #top-navbar-mobile .dropdown-box.engine-nav-menu li .btn { min-height: 42px; margin-top: 0px; padding: 10px 14px !important; }#top-navbar .navbar-login, #top-navbar-mobile .navbar-login { padding: 0px 15px 15px !important; }#top-navbar .navbar-login .btn, #top-navbar-mobile .navbar-login .btn { width: 100%; display: block; }#top-navbar .navbar-login .form-control, #top-navbar-mobile .navbar-login .form-control { margin: 15px 0px; }#navbar-mobile-logged-in .fa-caret-down { display: inline-block; }#navbar-mobile-logged-in .fa-caret-right { display: none; }#navbar-mobile-logged-in .ymm-nav-dropdown--filled > a.nav-link.dropdown-toggle { align-items: center; gap: 0.35em; max-width: 100%; display: inline-flex; }#navbar-mobile-logged-in .ymm-nav-dropdown--filled > a.nav-link.dropdown-toggle::after { content: none !important; float: none !important; font-family: inherit !important; display: none !important; }#navbar-mobile-logged-in .ymm-nav-dropdown--filled > a.nav-link.dropdown-toggle .ymm-nav-toggle-text { text-overflow: ellipsis; white-space: nowrap; min-width: 0px; overflow: hidden; }#navbar-mobile-logged-in .ymm-nav-dropdown--filled > a.nav-link.dropdown-toggle .ymm-nav-clear { cursor: pointer; border-radius: 6px; flex-shrink: 0; justify-content: center; align-items: center; margin-left: 0.2em; padding: 0.2em 0.4em; line-height: 1; display: inline-flex; }#navbar-mobile-logged-in .ymm-nav-dropdown--filled > a.nav-link.dropdown-toggle .ymm-nav-clear .fa-xmark { opacity: 1; font-size: 1em; line-height: 1; }#navbar-mobile-logged-in .ymm-nav-dropdown--filled > a.nav-link.dropdown-toggle .ymm-nav-clear:hover { background-color: rgba(0, 0, 0, 0.06); }#navbar-mobile-logged-in .ymm-nav-dropdown--filled > a.nav-link.dropdown-toggle .ymm-nav-clear:focus-visible { background-color: rgba(0, 0, 0, 0.06); }#navbar-mobile-logged-in.nav-child-list { padding: 0px; top: 0px; left: 100%; }#navbar-mobile-logged-in.nav-child-list a { padding: 10px; }#navbar-mobile-logged-in.nav-child-list li > .navbar-li-wrapper { width: 100%; }#navbar-mobile-logged-in.nav-child-list li > .navbar-li-wrapper > a { text-decoration: none; }#navbar-mobile-logged-in.nav-child-list li > .navbar-li-wrapper:hover > .dropdown-menu { display: block; }#navbar-mobile-logged-in.nav-child-list li > .navbar-li-wrapper a { justify-content: space-between; display: flex; }#navbar-mobile-logged-in.nav-child-list li > .navbar-li-wrapper a.dropdown-toggle i.fa-caret-down { display: none; }#navbar-mobile-logged-in.nav-child-list li > .navbar-li-wrapper a.dropdown-toggle i.fa-caret-right { display: inline-block; }#bottom-navbar { z-index: 4; }#bottom-navbar #mobile-search { width: 100%; }#bottom-navbar #mobile-search form { box-shadow: none; border: 0px; margin: 0px; padding: 0px; position: relative; }#bottom-navbar #mobile-search form input[type="search"] { height: var(--nav-height-bottom); box-shadow: none; border: 0px; border-radius: 0px; }#bottom-navbar #mobile-search form input[type="search"]:focus { box-shadow: none; }#bottom-navbar #mobile-search form .btn { width: 100%; height: var(--nav-height-bottom); }#bottom-navbar #mobile-search form div { margin: 0px; padding: 0px; }#bottom-navbar #mobile-search i { font-size: 18px; }.mobile-collapsable-navbar.navbar-light #nav-logo, .mobile-collapsable-navbar.navbar-light .navbar-nav > li > a, .mobile-collapsable-navbar.navbar-light .navbar-nav > li > .navbar-li-wrapper > a { color: rgb(0, 0, 0); }.mobile-collapsable-navbar .navbar-toggler { background-color: rgba(0, 0, 0, 0); border: 0px; border-radius: 0px; height: 50px; margin: 0px; padding: 15px; }.mobile-collapsable-navbar .navbar-toggler:focus, .mobile-collapsable-navbar .navbar-toggler:hover { background-color: rgba(0, 0, 0, 0); }#top-navbar, #bottom-navbar, .sticky-navbar #top-navbar, .sticky-navbar #bottom-navbar, .sticky-navbar .scrolled #top-navbar { min-height: var(--nav-height-bottom); }.sticky-navbar #top-navbar .navbar-collapse { max-height: calc(-90px + 100vh); }#top-navbar-mobile .navbar-collapse.top-navbar-mobile__collapse { overscroll-behavior: contain; max-height: min(82dvh, 100dvh - 10rem); overflow: hidden auto; }#top-navbar-mobile .navbar-collapse.top-navbar-mobile__collapse .navbar-nav { margin-left: 0px; margin-right: 0px; }#top-navbar-mobile .navbar-collapse.top-navbar-mobile__collapse .dropdown-menu { float: none; max-width: 100%; box-shadow: none; border-width: 1px 0px; border-style: solid none; border-color: rgb(221, 221, 221) currentcolor; border-image: none; border-radius: 0px; width: 100% !important; margin: 0px !important; position: static !important; transform: none !important; }.sticky-navbar #top-navbar-mobile .navbar-collapse.top-navbar-mobile__collapse { max-height: min(72dvh, 100dvh - 90px); }#top-navbar-mobile .top-navbar-mobile__header { padding-top: 4px; padding-bottom: 4px; }#top-navbar-mobile .top-navbar-mobile__search { padding-bottom: 6px !important; }#mobile-search .row { margin: 0px !important; }#mobile-search .btn-quick-order-section { box-sizing: border-box; max-width: 100%; width: 100% !important; margin: 0px !important; padding: 0px 8px 8px !important; }#mobile-search .btn-quick-order { height: 40px; min-height: 0px; padding: 0px 12px; font-size: 14px; line-height: 40px; border-radius: 6px; margin: 0px !important; width: 100% !important; }#elite-extra-bar .alert-banner { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0px 6px; padding: 6px 12px; font-size: 13px; line-height: 1.35; text-align: center; }#elite-extra-bar .alert-banner__label::after { content: ":"; }#elite-extra-bar .alert-banner__label, #elite-extra-bar .alert-banner__value, #elite-extra-bar .alert-banner a { font-size: 13px; margin: 0px !important; padding: 0px !important; }#elite-extra-bar .alert-banner a { white-space: nowrap; }html body #top-navbar-mobile { border-bottom: 0px !important; box-shadow: none !important; }html body #bottom-navbar { background: rgb(248, 249, 250) !important; box-shadow: none !important; border-bottom: 0px !important; }html body #bottom-navbar .btn-quick-order-section { padding: 0px 8px 14px !important; }html body #bottom-navbar .btn-quick-order { border-radius: 12px !important; height: 46px !important; min-height: 0px !important; box-shadow: rgba(15, 23, 42, 0.08) 0px 1px 2px !important; }html body #top-navbar #mobile-phone, html body #top-navbar #mobile-phone > a { background: transparent !important; }html body li.ap-mm-head { display: block !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) .ap-mm-ico { display: block !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) .ap-mm-chev { display: block !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) { background: rgb(255, 255, 255) !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar).show { width: 100%; max-height: calc(100dvh - 140px); overflow-y: auto; border-top: 1px solid rgb(227, 235, 243); box-shadow: rgba(15, 23, 42, 0.14) 0px 14px 28px; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) > ul { width: 100%; padding: 4px 0px 80px !important; margin: 0px !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) a:focus:not(:focus-visible), html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) button:focus:not(:focus-visible) { outline: 0px !important; box-shadow: none !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) > ul > li { border: 0px !important; margin: 0px !important; background: transparent !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) > ul > li > a, html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) > ul > li > .navbar-li-wrapper > a { align-items: center; gap: 12px; min-height: 50px; display: flex !important; padding: 0px 18px !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.2 !important; color: rgb(27, 36, 51) !important; border-width: 0px 0px 1px !important; border-style: none none solid !important; border-color: currentcolor currentcolor rgb(238, 242, 246) !important; border-image: none !important; border-radius: 0px !important; background: transparent !important; text-transform: none !important; letter-spacing: 0px !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) > ul > li > a::after, html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) > ul > li > .navbar-li-wrapper > a::after { display: none !important; content: none !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) > ul > li > a .ap-nav-ico, html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) > ul > li > .navbar-li-wrapper > a .ap-nav-ico, html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) .ymm-nav-toggle-icon, html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) .ap-mm-ico { flex: 0 0 auto; width: 18px !important; height: 18px !important; margin: 0px !important; color: rgb(0, 87, 184) !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) .ymm-nav-toggle-label { align-items: center; gap: 12px; display: flex !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) a.nav-link-own-caret > span { align-items: center; margin-left: auto !important; display: flex !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) a.nav-link-own-caret > span > svg { display: none !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) a.nav-link-own-caret > span::before, html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) a.ymm-nav-toggle-chev::before, html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) .ap-mm-chev { content: ""; display: block; width: 12px; height: 12px; background: rgb(154, 163, 174); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center center / contain no-repeat; transition: transform 0.2s; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) a.nav-link-own-caret[aria-expanded="true"] > span::before, html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) a.nav-link-own-caret.show > span::before { transform: rotate(180deg); }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) .ap-mm-chev.ap-r { transform: rotate(-90deg); }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) a .float-end { display: none !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) .ap-mm-chev { margin-left: auto; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) li.ap-mm-head { font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: rgb(107, 118, 134); font-size: 12px !important; padding: 20px 18px 6px !important; border-bottom: 1px solid rgb(238, 242, 246) !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) li.ap-mm-head:first-child { padding-top: 12px !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) > ul > li.ap-mm-head:first-child { order: -9 !important; }html body #top-navbar #navbar .navbar-nav > li > a.nav-link[href] { min-height: 50px; padding: 0px 18px !important; margin: 0px !important; border-width: 0px 0px 1px !important; border-style: none none solid !important; border-color: currentcolor currentcolor rgb(238, 242, 246) !important; border-image: none !important; border-radius: 0px !important; background: transparent !important; color: rgb(27, 36, 51) !important; font-size: 16px !important; font-weight: 600 !important; box-shadow: none !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) .nav-child-list, html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) .ymm-nav-menu { position: static !important; float: none !important; transform: none !important; margin: 0px !important; padding: 4px 0px !important; border-width: 0px 0px 1px !important; border-style: none none solid !important; border-color: currentcolor currentcolor rgb(238, 242, 246) !important; border-image: none !important; border-radius: 0px !important; box-shadow: none !important; background: rgb(246, 248, 251) !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) .nav-child-list a { align-items: center; min-height: 44px; display: flex !important; padding: 0px 18px 0px 48px !important; font-size: 15px !important; font-weight: 500 !important; color: rgb(43, 53, 69) !important; background: transparent !important; border: 0px !important; white-space: normal !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) .nav-child-list .nav-child-list a { padding-left: 64px !important; font-size: 14.5px !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) .ap-mm-cart strong { font-size: 16px !important; font-weight: 600 !important; color: rgb(27, 36, 51) !important; text-transform: none !important; letter-spacing: 0px !important; display: inline !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) .ap-mm-cart .label-orders-count { margin-left: 8px; border-radius: 999px; font-size: 12px; padding: 3px 8px; display: inline-block !important; background: rgb(200, 16, 46) !important; color: rgb(255, 255, 255) !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) .ap-mm-cart .label-orders-count.ap-zero { display: none !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) .mobile-logout, html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) .view-as-exit { align-items: center; justify-content: center; gap: 8px; height: 46px; display: flex !important; width: calc(100% - 36px) !important; margin: 16px 18px 0px !important; border-radius: 10px !important; font-size: 15px !important; font-weight: 700 !important; background: rgb(255, 255, 255) !important; color: rgb(200, 16, 46) !important; border: 1.5px solid rgb(200, 16, 46) !important; box-shadow: none !important; text-transform: none !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) .view-as-exit { color: rgb(74, 85, 104) !important; border-color: rgb(195, 201, 209) !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) .mobile-logout svg { width: 16px; height: 16px; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) .ymm-nav-menu { padding: 14px 18px 18px !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) .ymm-nav-menu .ymm-field { list-style: none; margin: 0px 0px 12px !important; padding: 0px !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) .ymm-nav-menu .ymm-field-label { display: block; font-size: 13px !important; font-weight: 600 !important; color: rgb(74, 85, 104) !important; margin: 0px 0px 5px !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) .ymm-nav-menu .form-select, html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) .ymm-nav-menu input.form-control, html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) .ymm-nav-menu input[type="text"] { height: 46px; width: 100% !important; border-radius: 10px !important; font-size: 15px !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) .ymm-nav-menu .btn { height: 46px; width: 100% !important; border-radius: 10px !important; margin: 0px 0px 10px !important; font-size: 15px !important; font-weight: 700 !important; }html body :is(.top-navbar-mobile__collapse, #top-navbar #navbar) .ymm-nav-menu a.btn { background: rgb(255, 255, 255) !important; color: rgb(74, 85, 104) !important; border: 1.5px solid rgb(195, 201, 209) !important; box-shadow: none !important; }html body #top-navbar #navbar > ul.navbar-nav:not(.navbar-login) { padding-bottom: 0px !important; }html body #top-navbar #navbar > ul.navbar-login { width: 100%; border-top: 1px solid rgb(238, 242, 246); display: block !important; padding: 16px 18px 80px !important; margin: 0px !important; background: rgb(246, 248, 251) !important; }html body #top-navbar #navbar .navbar-login form { gap: 12px !important; margin: 0px !important; }html body #top-navbar #navbar .navbar-login .mb-0 { margin: 0px !important; height: auto !important; }html body #top-navbar #navbar .navbar-login input.form-control { margin: 0px !important; width: 100% !important; height: 46px !important; border-radius: 10px !important; font-size: 15px !important; padding: 0px 14px !important; }html body #top-navbar #navbar .navbar-login .form-check { display: flex; align-items: center; gap: 8px; min-height: 24px; padding-left: 0px !important; margin: 0px !important; }html body #top-navbar #navbar .navbar-login .form-check-label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgb(74, 85, 104); }html body #top-navbar #navbar .navbar-login .form-check-input { margin: 0px !important; float: none !important; }html body #top-navbar #navbar .navbar-login input[type="submit"] { width: 100% !important; height: 46px !important; padding: 0px !important; border-radius: 10px !important; font-size: 15px !important; font-weight: 700 !important; margin: 4px 0px 0px !important; }html body #top-navbar-mobile .top-navbar-mobile__logo-img, html body .top-navbar-mobile .top-navbar-mobile__logo-img, html body #top-navbar .navbar-logo img { width: 128px !important; height: auto !important; max-width: none !important; }html body #top-navbar-mobile .top-navbar-mobile__logo, html body #top-navbar-mobile .navbar-logo { width: auto !important; }html body #top-navbar > #nav-logo img { width: 128px !important; max-width: none !important; height: auto !important; }html body .top-navbar-mobile__header a.ap-hdr-phone { font-size: 0px !important; width: 48px !important; height: 48px !important; padding: 0px !important; gap: 0px !important; justify-content: center !important; margin: 0px 0px 0px auto !important; border: 1px solid rgb(208, 220, 232) !important; background: rgb(248, 250, 252) !important; box-shadow: none !important; border-radius: 10px !important; }html body .top-navbar-mobile__header a.ap-hdr-phone svg { width: 18px !important; height: 18px !important; margin: 0px !important; }html body #top-navbar #mobile-phone { align-items: center; display: flex !important; justify-content: flex-end !important; padding-right: 8px !important; }html body #top-navbar #mobile-phone > a { width: 48px !important; height: 48px !important; padding: 0px !important; gap: 0px !important; justify-content: center !important; align-items: center !important; border: 1px solid rgb(208, 220, 232) !important; background: rgb(248, 250, 252) !important; border-radius: 10px !important; box-shadow: none !important; }html body #top-navbar #mobile-phone > a > em { display: none !important; }html body #top-navbar #mobile-phone > a::before { width: 21px !important; height: 21px !important; flex: 0 0 21px !important; margin: 0px !important; mask-size: 21px 21px !important; background-size: 21px 21px !important; }html body:has(#top-navbar-mobile) .navbar-wrapper{z-index:1040!important}html body .top-navbar-mobile__collapse.show{z-index:1050!important}html body:has(#top-navbar-mobile) nav#bottom-navbar#bottom-navbar #mobile-search .btn-quick-order-section{padding:0 8px 14px!important;height:auto!important;min-height:0!important}html body:has(#top-navbar-mobile) nav#bottom-navbar#bottom-navbar #mobile-search,html body:has(#top-navbar-mobile) nav#bottom-navbar#bottom-navbar #mobile-search .row{height:auto!important;min-height:0!important}html body:has(#top-navbar-mobile) #elite-extra-bar .alert-banner{align-items:center!important;align-content:center!important;min-height:0!important;height:auto!important;padding:11px 12px!important}}
/* end AllPro iPad header */

/* AllPro iPad home widgets (Claude, Oct 23 2026). Evan's call: on iPad, the home middle row is a two-column grid (Pro Rebates and Current Promotions, Spray Liner and Trailer Parts full width, then New Lines and Rebates and Promotions last), the Rebates card shows the phone Rebates and offers block with its View all rebates button, and 24px even spacing down to the footer. Needs the Custom JS block of the same name, which tags the panels. Delete both to undo. */
@media (min-width:768px) and (max-width:1199.98px){html body .ap-midrow{display:grid!important;grid-template-columns:1fr 1fr!important;gap:18px!important;align-items:start}html body .ap-midrow>.ap-c25,html body .ap-midrow>.ap-c50{display:contents!important}html body .ap-midrow .ap-p1panel{margin:0!important;width:auto!important;height:100%}html body .ap-midrow .ap-w-pro{order:1}html body .ap-midrow .ap-w-promo{order:2}html body .ap-midrow .ap-w-spray{order:3}html body .ap-midrow .ap-w-trailer{order:4}html body .ap-midrow .ap-w-new{order:5}html body .ap-midrow .ap-w-aam{order:6;grid-column:1/-1}html body .ap-midrow{padding:0 12px!important}html body .ap-midrow .ap-w-spray{order:3;grid-column:1/-1}html body .ap-midrow .ap-w-trailer{order:4;grid-column:1/-1}html body .ap-midrow .ap-w-new{order:5}html body .ap-midrow .ap-w-aam{order:6;grid-column:auto!important}html body .ap-midrow .ap-w-aam .ap-geny-strip{display:none!important}html body .ap-midrow .ap-w-aam{display:flex!important;flex-direction:column}html body .ap-midrow .ap-w-aam .panel-body{display:none!important}html body .ap-midrow .ap-p1panel .panel-body iframe { display: none !important; }html body .ap-midrow .ap-rb-phone { flex-direction: column; align-items: center; text-align: center; padding: 26px 20px 24px; background: rgb(0, 87, 184); display: flex !important; color: rgb(255, 255, 255) !important; text-decoration: none !important; }html body .ap-midrow .ap-rb-phone b { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size: 34px; font-weight: 700; line-height: 1; text-transform: uppercase; }html body .ap-midrow .ap-rb-phone span { font-size: 16px; line-height: 1.3; margin: 8px 0px 16px; max-width: 280px; }html body .ap-midrow .ap-rb-phone i { font-style: normal; background: rgb(202, 13, 41); border-radius: 5px; padding: 12px 26px; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 1.6px; text-transform: uppercase; }html body .ap-midrow .ap-w-aam .ap-rb-phone{flex:1;justify-content:center;box-sizing:border-box;width:100%}html body .ap-midrow .ap-w-aam>.ap-rb-phone{display:flex!important;flex:1;margin:0!important;border-radius:0 0 4px 4px}html body .ap-midrow.ap-midrow{gap:24px!important}html body:has(.ap-midrow) .footer-wrapper.ap-ft{margin-top:14px!important}}
/* end AllPro iPad home widgets */

/* AllPro iPad footer (Claude, Oct 23 2026). Evan's call: on iPad, the footer logo sits left of a divider with phone, email and locations to its right, a divider line above the link columns, and Proud Member Of centered over one row of badges. Delete this block to undo. */
@media (min-width:768px) and (max-width:1199.98px){
html body .footer-wrapper.ap-ft .ap-ft-top .ap-ft-brand{display:grid!important;grid-template-columns:auto auto;grid-template-rows:auto auto auto;justify-content:center;align-items:center;column-gap:0;text-align:left!important}
html body .footer-wrapper.ap-ft .ap-ft-top .ap-ft-brand>a:first-child{grid-column:1;grid-row:1 / span 3;align-self:stretch;display:flex!important;align-items:center;padding-right:28px;margin:0 28px 0 0!important;border-right:1px solid #CDD3DB}
html body .footer-wrapper.ap-ft .ap-ft-top .ap-ft-brand>a:first-child{width:175px!important;height:70px!important;padding:14px 28px 14px 0!important;align-self:center!important;min-height:0!important;box-sizing:content-box!important;background-position:center!important;background-size:contain!important;background-origin:content-box!important}html body .footer-wrapper.ap-ft .ap-ft-top .ap-ft-brand>a:first-child img.footer-logo{margin:0!important;width:175px!important;max-width:none!important;height:auto!important}
html body .footer-wrapper.ap-ft .ap-ft-top .ap-ft-brand>.ap-ft-phone,html body .footer-wrapper.ap-ft .ap-ft-top .ap-ft-brand>.ap-ft-email,html body .footer-wrapper.ap-ft .ap-ft-top .ap-ft-brand>.ap-ft-where{grid-column:2;text-align:left!important;margin:0!important;width:auto!important}
html body .footer-wrapper.ap-ft .ap-ft-top .ap-ft-brand>.ap-ft-email{margin-top:4px!important}html body .footer-wrapper.ap-ft .ap-ft-top .ap-ft-brand>.ap-ft-where{margin-top:6px!important}
html body .footer-wrapper.ap-ft .ap-ft-badges .ap-ft-badges-in{flex-direction:column!important;align-items:center!important;gap:22px!important;padding-top:30px!important;padding-bottom:30px!important}
html body .footer-wrapper.ap-ft .ap-ft-badges .ap-ft-badges-label{text-align:center!important;margin:0!important;width:auto!important}
html body .footer-wrapper.ap-ft .ap-ft-badges .ap-mb-row{flex-wrap:nowrap!important;justify-content:center!important;gap:26px!important;width:auto!important;max-width:100%}
html body .footer-wrapper.ap-ft .ap-ft-badges .ap-mb-badge{margin:0!important}
html body .footer-wrapper.ap-ft .ap-ft-top .ap-ft-brand.ap-ft-brand{position:relative;padding-bottom:36px!important;margin-bottom:4px!important}html body .footer-wrapper.ap-ft .ap-ft-top .ap-ft-brand.ap-ft-brand::after{content:"";position:absolute;left:-30px;right:-30px;bottom:0;border-top:1px solid #E2E6EB}}
/* end AllPro iPad footer */

/* AllPro phone site update strip, short (Claude, Oct 23 2026). Evan's call: on phones (under 768px) the red Site update strip is one line, Price or part not loading? Call 800-858-4487, with the close button on the right. iPad and desktop keep the full message. Delete this block to undo. */
@media (max-width:767.98px){html body #ap-notice#ap-notice{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;padding:9px 40px 9px 12px!important;min-height:0!important;position:relative}
html body #ap-notice#ap-notice>b,html body #ap-notice#ap-notice>i{display:none!important}
html body #ap-notice#ap-notice>span{font-size:0!important;line-height:1.3!important;text-align:center!important;margin:0!important;padding:0!important;border:0!important;flex:0 1 auto!important}
html body #ap-notice#ap-notice>span::before{content:"Price or part not loading? Call ";font-size:14px;font-weight:500}
html body #ap-notice#ap-notice>span>a{font-size:14px!important;font-weight:700!important;white-space:nowrap}
html body #ap-notice#ap-notice>button{position:absolute!important;right:8px!important;top:50%!important;transform:translateY(-50%)!important;margin:0!important;width:24px!important;height:24px!important;min-width:0!important;font-size:16px!important;line-height:22px!important;padding:0!important}}
/* end AllPro phone site update strip, short */

/* AllPro iPad footer columns and copyright (Claude, Oct 23 2026). Evan's call: on iPad (768 to 1199px) the Your Account, Programs and Company columns are centered as a group, and the bottom strip shows the copyright and Powered by line first, with AllPro and AAM Privacy and Terms on a second line. Delete this block to undo. */
@media (min-width:768px) and (max-width:1199.98px){html body .footer-wrapper.ap-ft .ap-ft-top{justify-content:center!important;column-gap:72px!important}html body .footer-wrapper.ap-ft .ap-ft-top>.ap-ft-col{width:auto!important;flex:0 0 auto!important;max-width:none!important}}
@media (min-width:768px) and (max-width:1199.98px){html body .footer-wrapper.ap-ft .ap-ft-bottom .ap-ft-bottom-in .footer-copyright{display:block!important;width:100%;flex-basis:100%;text-align:center;margin-bottom:4px}html body .footer-wrapper.ap-ft .ap-ft-bottom .ap-ft-bottom-in .ap-legal-ours>.footer-sep:first-child{display:none!important}}
/* end AllPro iPad footer columns and copyright */

/* AllPro iPad vehicle picker in header (Claude, Oct 23 2026). Evan's call: on iPad (768 to 1199px, signed in) the Year, Make, Model picker sits under the search bar in one row, same width and 50px height as the search, with Search and a centered reset button. Needs the Custom JS block of the same name, which moves the site's own picker into the iPad header (and back on other widths). Delete both to undo. */
@media (min-width:768px) and (max-width:1199.98px){
html body.ap-tab-ymm #top-navbar-mobile #nav-search-ymm{display:block!important;margin:10px 0 0!important;padding:0!important;width:100%!important}
html body.ap-tab-ymm #top-navbar-mobile #nav-search-ymm form.nav-horizontal-ymm-form{display:flex!important;align-items:stretch!important;gap:8px!important;margin:0!important;padding:0!important;width:100%!important;flex-wrap:nowrap!important}
html body.ap-tab-ymm #top-navbar-mobile #nav-search-ymm .nav-horizontal-ymm-intro{display:none!important}
html body.ap-tab-ymm #top-navbar-mobile #nav-search-ymm .nav-horizontal-ymm-fields{flex:1 1 auto!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:8px!important;margin:0!important;min-width:0!important}
html body.ap-tab-ymm #top-navbar-mobile #nav-search-ymm .nav-horizontal-ymm-field{display:block!important;margin:0!important;min-width:0!important;width:100%!important;max-width:none!important;flex:none!important}
html body.ap-tab-ymm #top-navbar-mobile #nav-search-ymm select.nav-horizontal-ymm-select{width:100%!important;max-width:none!important;min-width:0!important;height:50px!important;min-height:50px!important;border:1px solid #D8E2EE!important;border-radius:12px!important;font-size:16px!important;padding:0 36px 0 14px!important;box-shadow:0 1px 2px rgba(18,36,60,.06),0 4px 14px rgba(18,36,60,.05)!important;background-position:right 12px center!important}
html body.ap-tab-ymm #top-navbar-mobile #nav-search-ymm .nav-horizontal-ymm-submit{flex:0 0 auto!important;height:50px!important;min-width:120px!important;margin:0!important;border-radius:12px!important;background:#B20000!important;border-color:#B20000!important;color:#fff!important;font-size:15px!important;font-weight:600!important;padding:0 18px!important;opacity:1!important}
html body.ap-tab-ymm #top-navbar-mobile #nav-search-ymm .nav-horizontal-ymm-submit:disabled{background:#E57F86!important;border-color:#E57F86!important}
html body.ap-tab-ymm #top-navbar-mobile #nav-search-ymm .nav-horizontal-ymm-reset{flex:0 0 50px!important;width:50px!important;height:50px!important;margin:0!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border:1px solid #D8E2EE!important;border-radius:12px!important;background:#fff!important;font-size:0!important;color:#0057B8!important}
html body.ap-tab-ymm #top-navbar-mobile #nav-search-ymm .nav-horizontal-ymm-reset svg,html body.ap-tab-ymm #top-navbar-mobile #nav-search-ymm .nav-horizontal-ymm-reset i{width:20px!important;height:20px!important;font-size:20px!important;margin:0!important}
html body.ap-tab-ymm #top-navbar-mobile #nav-search-ymm .nav-horizontal-ymm-reset{gap:0!important}html body.ap-tab-ymm #top-navbar-mobile #nav-search-ymm .nav-horizontal-ymm-reset>span{display:none!important}}
/* end AllPro iPad vehicle picker in header */

/* AllPro phone home top, simplified (Claude, Oct 23 2026). Evan's call: on phones (under 768px) Brands and Categories share one row, and a full-width Shop by Year / Make / Model button (Evan's truck icon from the welcome pop-up, pop-up line weight) opens the Year, Make, Model picker under it; the delivery bar is one line with a small centered chevron and taps through to delivery history. The picker only hides once the Custom JS block of the same name has added its button (html.ap-veh-ready). Delete both to undo. */
@media (max-width:767.98px){
html body section.home-mobile-cta{padding-top:14px!important;padding-bottom:6px!important}
html body section.home-mobile-cta>.row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin:0!important;--bs-gutter-x:0;--bs-gutter-y:0}
html body section.home-mobile-cta>.row>.col-6,html body section.home-mobile-cta>.row>.ap-veh-col{width:auto!important;max-width:none!important;padding:0!important;margin:0!important;flex:none!important}
html body section.home-mobile-cta>.row>.col-6>a.btn,html body section.home-mobile-cta a.ap-veh-btn{height:46px!important;min-height:0!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;padding:0 6px!important;font-size:15px!important;letter-spacing:.3px!important;border-radius:10px!important;white-space:nowrap!important;line-height:1!important}
html body section.home-mobile-cta a.ap-veh-btn{background:#fff!important;color:#B20000!important;border:1.5px solid #B20000!important;text-decoration:none!important;font-weight:600}
html body section.home-mobile-cta a.ap-veh-btn svg{width:18px;height:18px;flex:none}
html body section.home-mobile-cta a.ap-veh-btn .ap-veh-chev{transition:transform .2s}
html body section.home-mobile-cta.ap-veh-open a.ap-veh-btn{background:#B20000!important;color:#fff!important}
html body section.home-mobile-cta.ap-veh-open a.ap-veh-btn .ap-veh-chev{transform:rotate(180deg)}
html body section.home-mobile-cta>.row>.col-12{grid-column:1/-1!important;width:auto!important;padding:0!important;margin:0!important}html.ap-veh-ready body section.home-mobile-cta>.row>.col-12{display:none!important}
html.ap-veh-ready body section.home-mobile-cta.ap-veh-open>.row>.col-12{display:block!important;margin-top:4px!important}
html body section.home-mobile-cta .home-mobile-ymm-form .mb-3{margin-bottom:8px!important}
html body section.home-mobile-cta .home-mobile-ymm-form select{height:44px!important;border-radius:10px!important}
html body section.home-mobile-cta .home-mobile-ymm-form button{height:44px!important;border-radius:10px!important}
html body #elite-extra-bar .alert-banner{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:center!important;gap:6px!important;padding:9px 12px!important;min-height:0!important;height:auto!important;font-size:13.5px!important;white-space:nowrap!important;cursor:pointer}
html body #elite-extra-bar .alert-banner>*{margin:0!important;display:inline!important}
html body #elite-extra-bar .alert-banner>a{font-size:0!important;line-height:0!important;text-decoration:none!important;display:inline-flex!important;align-items:center!important;align-self:center!important;width:6px;height:10px}
html body #elite-extra-bar .alert-banner>a::after{content:"";display:block;width:6px;height:10px;background:#0057B8;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1.5 1.5 6.5 7l-5 5.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1.5 1.5 6.5 7l-5 5.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
html body section.home-mobile-cta>.row>.ap-veh-col{grid-column:1/-1!important}html body section.home-mobile-cta a.ap-veh-btn{justify-content:space-between!important;padding:0 16px!important;font-size:16px!important}html body section.home-mobile-cta a.ap-veh-btn .ap-veh-ic{display:flex;align-items:center;gap:10px}html body section.home-mobile-cta a.ap-veh-btn .ap-veh-chev{width:14px!important;height:14px!important}html body section.home-mobile-cta a.ap-veh-btn svg.ap-veh-truck{width:30px!important;height:30px!important;fill:currentColor;stroke:currentColor;stroke-width:34;stroke-linejoin:round;flex:none}html body section.home-mobile-cta a.ap-veh-btn:focus{outline:none!important;box-shadow:none!important;border-color:#B20000!important}html body section.home-mobile-cta a.ap-veh-btn:focus-visible{outline:2px solid #0057B8!important;outline-offset:2px}}
/* end AllPro phone home top, simplified */

/* AllPro desktop nav spacing, cart icon and dropdown icons (Claude, Oct 23 2026). Evan's call: on wide screens (1400px+) the blue nav menus (Truck Accessories to About) get more room that grows with the screen (14px up to 28px a side), so less empty blue before View Cart; the View Cart icon is 26x22 instead of 41x34; every desktop dropdown link gets a Font Awesome icon (added by the Custom JS block of the same name) in AllPro blue, 16px, lined up in one column, and the dropdowns size to their longest link so names stay on one line. Delete both to undo. */
@media (min-width:1400px){
html body #bottom-navbar#bottom-navbar #nav-links .nav.navbar-nav>li:nth-child(n+3)>a.nav-link,html body #bottom-navbar#bottom-navbar #nav-links .nav.navbar-nav>li:nth-child(n+3)>div>a.nav-link{padding-left:clamp(14px,calc((100vw - 1400px)*.03 + 14px),28px)!important;padding-right:clamp(14px,calc((100vw - 1400px)*.03 + 14px),28px)!important}
}
@media (min-width:768px){
html body #bottom-navbar #nav-orders a.nav-link svg{width:26px!important;height:22px!important;flex:none}
}
html body #nav-links .dropdown-menu a.nav-link>svg.ap-nav-ico{width:16px!important;height:16px!important;flex:none!important;margin-right:10px!important;color:#0057B8!important;opacity:.9}
html body #nav-links .dropdown-menu a.nav-link{display:flex!important;align-items:center!important}
@media (min-width:992px){html body #nav-links .dropdown-menu{min-width:max-content!important}html body #nav-links .dropdown-menu a.nav-link{white-space:nowrap!important;padding-right:20px!important}}
/* end AllPro desktop nav spacing, cart icon and dropdown icons */

/* AllPro phone menu dropdown icons (Claude, Oct 23 2026). Evan's call: the phone menu sub-items (signed in and signed out) get the same Font Awesome icons as the desktop dropdowns, added by the Custom JS block "AllPro desktop dropdown icons": AllPro blue, 16px, one column, words lined up. Delete this block to undo the styling. */
@media (max-width:767.98px){html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .dropdown-menu a.nav-link>svg.ap-nav-ico{width:16px!important;height:16px!important;flex:none!important;margin:0 12px 0 0!important;color:#0057B8!important}
html body :is(.top-navbar-mobile__collapse,#top-navbar #navbar) .dropdown-menu a.nav-link{display:flex!important;align-items:center!important}}
/* end AllPro phone menu dropdown icons */