/* ==========================================================================
   DESIGN TOKENS — Palette A "Northern Navy"
   Single source of truth for colour, radius and elevation.
   Rule: no raw hex below this block. If you need a new colour, add a token.
   ========================================================================== */
:root {
  --header-bg:#0B1F3A; --header-ink:#FFFFFF; --header-ink-dim:#A9BBD0;
  --nav-bg:#F1F4F7;    --nav-ink:#1B2836;    --nav-ink-active:#0B1F3A;
  --bg:#FFFFFF;        --surface:#FFFFFF;    --surface-2:#F4F6F9;
  --ink:#10151C;       --ink-muted:#5A6472;  --line:#E3E7EC;
  --brand:#0B1F3A;     --accent:#0E9BD1;     --on-accent:#FFFFFF;
  --hero-bg:#0B1F3A;   --hero-ink:#FFFFFF;   --hero-sub:#C3D2E2;
  --band-bg:#141A22;   --band-ink:#E8EDF3;   --band-head:#4FB6E0;
  --foot-bg:#101720;   --foot-ink:#C2CCD8;   --foot-head:#5FC0E8;
  --ok:#1B8A4B;        --warn:#B4531A;       --danger:#C0392B;
  --on-media:#FFFFFF;  /* text and controls sitting on photography */
  --radius:10px;       --radius-lg:14px;
  --shadow:0 1px 2px rgba(16,21,28,.06), 0 8px 24px rgba(16,21,28,.08);
  --measure:1200px;
  --display:'Archivo','Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* Custom CSS overrides for Borderland Brandon theme */

/* Re-declares Lato after main.css to fix the inherited Brandon-relative paths.
   These now point at ../fonts/lato/ — the same directory main.css uses and the
   one header.php preloads. They previously resolved to assets/css/fonts/lato/,
   a byte-identical duplicate, so the preload warmed a URL the browser never
   used and every Lato file was downloaded twice: once speculatively, once for
   real after the CSS parsed. That wasted preload is why the swap was visible. */
@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato/lato-regular-webfont.woff2') format('woff2'),
         url('../fonts/lato/lato-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato/lato-bold-webfont.woff2') format('woff2'),
         url('../fonts/lato/lato-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato/lato-light-webfont.woff2') format('woff2'),
         url('../fonts/lato/lato-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato/lato-italic-webfont.woff2') format('woff2'),
         url('../fonts/lato/lato-italic-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Archivo (SIL Open Font License 1.1), one variable file carrying weight
   400-800 and width 75-112%. Lato stops at 700, so every `font-weight:800`
   in this file was falling back to Bold and the inventory prices read thin at
   30px. This face is the display cut for the inventory tile only — headings
   elsewhere still use Lato. The width axis is what lets a name as long as
   "Mule PRO-FXT 820" hold one line beside a two-word one. */
@font-face {
    font-family: 'Archivo';
    src: url('../fonts/archivo/archivo-latin-var.woff2') format('woff2-variations'),
         url('../fonts/archivo/archivo-latin-var.woff2') format('woff2');
    font-weight: 400 800;
    font-stretch: 75% 112%;
    font-style: normal;
    font-display: swap;
}

/* Ensure body uses Lato */
body {
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Contact page responsive grid */
@media (max-width: 768px) {
    .contact-info-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ======== Promo Carousel (Swiper — Homepage) ======== */
/* Override PowerGo main.css conflicting rules */
#slider,
body:not(.has-outer-wrap):not(.is-template-v1-6) #slider,
body.is-template-v1-6 #slider {
    background: #1a1a1a;
    overflow: visible !important;
    height: auto !important;
    padding-top: 0 !important;
    border-top: none !important;
}

/* PowerGo hides #slider img without .desktop/.narrow/.mobile classes — force show */
#slider .promo-carousel img,
body:not(.is-template-v1-6) #slider img,
body:not(.has-outer-wrap):not(.is-template-v1-6) #slider img {
    display: block !important;
}

.promo-carousel {
    height: 300px;
    overflow: hidden;
}

.promo-carousel .swiper-slide {
    border-radius: 6px;
    overflow: hidden;
}

.promo-carousel .swiper-slide a {
    display: block;
}

.promo-carousel .swiper-slide img {
    width: 100% !important;
    height: 300px !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center;
}

/* Dim non-active slides for depth */
.promo-carousel .swiper-slide:not(.swiper-slide-active) {
    opacity: 0.5;
    transition: opacity 0.3s;
}
.promo-carousel .swiper-slide-active {
    opacity: 1;
}

/* Arrow styling */
.promo-carousel .swiper-button-prev,
.promo-carousel .swiper-button-next {
    color: #fff;
    background: rgba(0,0,0,0.35);
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.promo-carousel .swiper-button-prev::after,
.promo-carousel .swiper-button-next::after {
    font-size: 18px;
}

/* Pagination dots */
.promo-carousel .swiper-pagination-bullet {
    background: rgba(255,255,255,0.5);
    opacity: 1;
}
.promo-carousel .swiper-pagination-bullet-active {
    background: #088fc2;
}

@media (max-width: 767px) {
    .promo-carousel .swiper-slide img {
        height: 200px !important;
        object-fit: cover !important;
    }
    .promo-carousel {
        max-height: 200px;
        height: auto;
    }
}

.promo-slide-text {
    background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
    color: #fff;
    padding: 60px 40px;
    text-align: center;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.promo-slide-text h2 {
    font-size: 28px;
    margin: 0 0 12px;
    color: #fff;
}

.promo-slide-text p {
    font-size: 16px;
    margin: 0;
    opacity: 0.85;
    max-width: 600px;
}

/* Arrow controls */
.promo-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 12;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 24px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s;
    line-height: 1;
    border-radius: 50%;
}

.promo-arrow:hover {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.6);
}

.promo-prev {
    left: 16px;
}

.promo-next {
    right: 16px;
}

/* Bar indicators (like original PowerGo theme) */
.promo-bars {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.promo-bar {
    width: 80px;
    height: 6px;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 3px;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    transition: background 0.3s;
}

.promo-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: #088fc2;
    border-radius: 3px;
}

.promo-bar.active span {
    width: 100%;
    animation: barFill 6s linear;
}

@keyframes barFill {
    from { width: 0; }
    to { width: 100%; }
}

.promo-bar:hover {
    background: rgba(255, 255, 255, 0.55);
}

/* ======== Promotions Page ======== */
.promo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 28px;
    margin: 20px 0 40px;
}

.promo-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.2s, transform 0.2s;
}

.promo-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.promo-card-image {
    height: 220px;
    overflow: hidden;
    background: #f0f0f0;
}

.promo-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.promo-card:hover .promo-card-image img {
    transform: scale(1.03);
}

.promo-card-noimage {
    background: #2d2d2d;
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-card-placeholder {
    text-align: center;
    color: #888;
    padding: 20px;
}

.promo-card-body {
    padding: 20px;
}

.promo-card-body h3 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    color: #222;
    line-height: 1.3;
}

.promo-card-desc {
    color: #555;
    font-size: 15px;
    margin: 0 0 10px;
    line-height: 1.5;
}

.promo-card-detail {
    color: #777;
    font-size: 13px;
    margin: 0 0 14px;
    line-height: 1.5;
}

.promo-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.promo-card-expires {
    font-size: 13px;
    color: #e31937;
    font-weight: 600;
}

.promo-card-link {
    font-size: 14px;
    color: #e31937;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.promo-card-link:hover {
    color: #b8142d;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .promo-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .promo-slide-text {
        padding: 40px 20px;
        min-height: 200px;
    }

    .promo-slide-text h2 {
        font-size: 22px;
    }

    .promo-arrow {
        font-size: 18px;
        width: 36px;
        height: 36px;
    }

    .promo-prev {
        left: 8px;
    }

    .promo-next {
        right: 8px;
    }

    .promo-bar {
        width: 40px;
        height: 4px;
    }

    .promo-bars {
        bottom: 10px;
        gap: 5px;
    }
}

/* ======== Blog Listing ======== */
.blog-listing {
    padding: 30px 0 50px;
}

.blog-listing .page-header {
    margin-bottom: 30px;
}

.blog-listing .page-header h1 {
    font-size: 32px;
    font-weight: 700;
    color: #222;
    margin: 0;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.blog-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s, transform 0.2s;
}

.blog-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
    transform: translateY(-2px);
}

.blog-card-image {
    display: block;
    height: 220px;
    overflow: hidden;
    background: #fff;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.3s;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.03);
}

.blog-card-body {
    padding: 20px;
}

.blog-card-meta {
    font-size: 13px;
    color: #888;
    margin-bottom: 8px;
}

.blog-card-title {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.blog-card-title a {
    color: #222;
    text-decoration: none;
}

.blog-card-title a:hover {
    color: #088fc2;
}

.blog-card-excerpt {
    color: #555;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 14px;
}

.blog-card-excerpt p {
    margin: 0;
}

.blog-card-link {
    font-size: 14px;
    color: #088fc2;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.blog-card-link:hover {
    color: #066b91;
    text-decoration: underline;
}

.blog-pagination {
    margin-top: 40px;
    text-align: center;
}

.blog-pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.blog-pagination .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s, border-color 0.2s;
}

.blog-pagination .page-numbers:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

.blog-pagination .page-numbers.current {
    background: #088fc2;
    border-color: #088fc2;
    color: #fff;
}

.blog-empty {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.blog-empty h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
}

/* ======== Blog Single Post ======== */
.blog-single {
    padding-bottom: 50px;
}

.blog-single-hero {
    margin: 0 -20px 30px;
    max-height: 400px;
    overflow: hidden;
    border-radius: 8px;
}

.blog-single-hero img {
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: contain;
    object-position: center;
    display: block;
    background: #fff;
}

.blog-single-title {
    text-transform: none !important;
}

.blog-single-content {
    max-width: 780px;
    margin: 0 auto;
}

.blog-single-meta {
    font-size: 14px;
    color: #888;
    margin-bottom: 12px;
}

.blog-single-author {
    margin-left: 12px;
    color: #999;
}

.blog-single-title {
    font-size: 34px;
    font-weight: 700;
    color: #222;
    line-height: 1.25;
    margin: 0 0 28px;
}

.blog-single-body {
    font-size: 16px;
    line-height: 1.75;
    color: #333;
}

.blog-single-body p {
    margin: 0 0 18px;
}

.blog-single-body h2 {
    font-size: 24px;
    font-weight: 700;
    color: #222;
    margin: 32px 0 14px;
}

.blog-single-body h3 {
    font-size: 20px;
    font-weight: 700;
    color: #222;
    margin: 28px 0 12px;
}

.blog-single-body img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 20px 0;
}

.blog-single-body ul,
.blog-single-body ol {
    margin: 0 0 18px 24px;
}

.blog-single-body li {
    margin-bottom: 6px;
}

.blog-single-body blockquote {
    border-left: 4px solid #088fc2;
    margin: 20px 0;
    padding: 12px 20px;
    background: #f8f9fa;
    color: #555;
    font-style: italic;
}

.blog-single-back {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.blog-single-back a {
    color: #088fc2;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: color 0.2s;
}

.blog-single-back a:hover {
    color: #066b91;
    text-decoration: underline;
}

/* ======== Contact Tiles (contact page + service page sidebar) ======== */
a.contact-tile {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 36px 24px 28px;
  text-align: center;
  text-decoration: none !important;
  color: #222 !important;
  transition: transform 0.2s, box-shadow 0.2s;
}
a.contact-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  color: #222 !important;
  text-decoration: none !important;
}
a.contact-tile .contact-tile-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
a.contact-tile h2 {
  margin: 0 0 6px;
  font-size: 20px;
  color: #222 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}
a.contact-tile .contact-tile-detail {
  margin: 0 0 16px;
  font-size: 15px;
  color: #666 !important;
}
a.contact-tile .contact-tile-cta {
  display: inline-block;
  margin-top: auto;
  padding: 8px 20px;
  background: var(--accent);
  border: 0;
  border-radius: var(--radius);
  font-size: 13px;
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: filter 0.2s;
}
a.contact-tile:hover .contact-tile-cta {
  filter: brightness(1.12);
  border-color: #178fb8;
}
.contact-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
@media (max-width: 768px) {
  .contact-tiles { grid-template-columns: 1fr; }
  .contact-info-grid { grid-template-columns: 1fr; }
}

/* ======== Parts & Service SMS Tile ======== */
a.parts-sms-tile {
  display: flex !important;
  align-items: center;
  gap: 20px;
  background: #1a1a1a;
  border: 2px solid #333;
  border-radius: 12px;
  padding: 24px 28px;
  text-decoration: none !important;
  color: #fff !important;
  margin: 24px 0;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
a.parts-sms-tile:hover {
  border-color: #e31937;
  box-shadow: 0 8px 24px rgba(227,25,55,0.25);
  transform: translateY(-3px);
  color: #fff !important;
  text-decoration: none !important;
}
a.parts-sms-tile .parts-sms-icon {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
a.parts-sms-tile .parts-sms-body { flex: 1; min-width: 0; }
a.parts-sms-tile .parts-sms-body h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}
a.parts-sms-tile .parts-sms-body p {
  margin: 0;
  color: #aaa !important;
  font-size: 14px;
}
a.parts-sms-tile .parts-sms-cta {
  flex-shrink: 0;
  padding: 10px 22px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  color: #fff !important;
}
a.parts-sms-tile:hover .parts-sms-cta {
  background: #e31937;
  border-color: #e31937;
}
@media (max-width: 700px) {
  a.parts-sms-tile { flex-wrap: wrap; }
  a.parts-sms-tile .parts-sms-cta { width: 100%; text-align: center; }
}

/* Blog header icon */
#siteHeader .site-branding li.blog a,
#siteFooter li.blog a {
    position: relative;
}

#siteHeader .site-branding li.blog a:before,
#siteFooter li.blog a:before {
    content: "\f02d";
    font-family: FontAwesome-solid;
}

/* ======== Blog Responsive ======== */
@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .blog-listing .page-header h1 {
        font-size: 26px;
    }

    .blog-card-image {
        height: 180px;
        background: #fff;
    }

    .blog-single-hero {
        margin: 0 -10px 20px;
        max-height: 250px;
    }

    .blog-single-hero img {
        height: 250px;
    }

    .blog-single-title {
        font-size: 26px;
    }

    .blog-single-body {
        font-size: 15px;
    }
}

/* ===== CONTACT FORM ===== */
.contact-form-section {
    margin-top: 40px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 30px;
}
.contact-form-section h2 {
    color: #222;
    font-size: 22px;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}
.contact-form .cf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.contact-form .cf-field {
    margin-bottom: 16px;
}
.contact-form .cf-row .cf-field {
    margin-bottom: 0;
}
.contact-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    color: #333;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #088fc2;
    box-shadow: 0 0 0 2px rgba(8,25,79,0.15);
}
.contact-form textarea {
    resize: vertical;
    min-height: 100px;
}
.contact-form select {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}
.cf-submit {
    display: inline-block;
    padding: 12px 32px;
    background: #088fc2;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}
.cf-submit:hover {
    background: #178fb8;
}
.contact-form-success {
    text-align: center;
    padding: 30px;
}
.contact-form-success h3 {
    color: #4CAF50;
    font-size: 20px;
    margin: 16px 0 8px;
}
.contact-form-success p {
    color: #666;
    font-size: 14px;
}
.contact-form-error {
    background: #ffebee;
    border: 1px solid #ffcdd2;
    color: #c62828;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 16px;
}
@media (max-width: 600px) {
    .contact-form .cf-row {
        grid-template-columns: 1fr;
    }
    .contact-form-section {
        padding: 20px 16px;
    }
}

/* Contact tiles - 4 columns */
.contact-tiles {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
    .contact-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ==========================================================================
   SHARED PRIMITIVES — used by every reskinned template.
   `bl-` prefix avoids collisions with the inherited PowerGo main.css.
   ========================================================================== */
.bl-wrap{max-width:var(--measure);margin:0 auto;padding:0 24px}

.bl-btn{display:inline-block;padding:12px 22px;border-radius:var(--radius);font-size:14.5px;
  font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;
  font-family:inherit;transition:.15s}
.bl-btn.bl-btn--primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.bl-btn.bl-btn--primary:hover{filter:brightness(1.08);color:var(--on-accent)}
.bl-btn.bl-btn--outline{background:transparent;color:var(--ink);border-color:var(--line)}
.bl-btn.bl-btn--outline:hover{border-color:var(--accent);color:var(--accent)}
.bl-btn--block{display:block;width:100%;text-align:center}
.bl-btn--sm{padding:9px 15px;font-size:13px}

.bl-field{display:flex;flex-direction:column;gap:6px}
.bl-field label{font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--ink);text-transform:uppercase}
.bl-field .bl-hint{font-size:12px;color:var(--ink-muted);font-weight:400;text-transform:none;letter-spacing:0}
.bl-field input,.bl-field select,.bl-field textarea{font:inherit;font-size:15px;padding:11px 13px;
  border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);
  color:var(--ink);width:100%}
.bl-field input:focus,.bl-field select:focus,.bl-field textarea:focus{outline:none;
  border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.bl-field textarea{min-height:120px;resize:vertical}
.bl-req{color:var(--danger)}

.bl-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bl-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

.bl-card,.bl-panel{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.bl-panel{padding:24px}

.bl-badge{display:inline-block;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase}
.bl-badge--new{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.bl-badge--used{background:color-mix(in srgb,var(--ink-muted) 16%,transparent);color:var(--ink-muted)}

@media (max-width:620px){ .bl-grid2,.bl-grid3{grid-template-columns:1fr} }


/* ==========================================================================
   SITE CHROME — replaces the PowerGo #siteHeader / #mainnav / #siteFooter.
   Those selectors carry ~2,775 rules in the inherited 4.2MB main.css. The
   markup no longer uses them, so those rules go inert. main.css STAYS
   enqueued: `.inner` alone has 1,595 rules and is used by all 18 templates.
   The mobile menu is vanilla JS here — mmenu bound to the old markup.
   ========================================================================== */
.bl-hdr{background:var(--header-bg);color:var(--header-ink);position:relative;z-index:60}
.bl-hdr__in{display:flex;align-items:center;gap:24px;padding:16px 24px;
  max-width:var(--measure);margin:0 auto}
/* Transparent logo — no border. A frame around a transparent PNG would outline
   empty space rather than the mark. */
.bl-hdr__logo img{height:96px;width:auto;display:block}
.bl-hdr__right{margin-left:auto;text-align:right;display:flex;flex-direction:column;
  gap:3px;align-items:flex-end}
.bl-hdr__addr.bl-hdr__addr{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--header-ink);text-decoration:none}
.bl-hdr__addr.bl-hdr__addr:hover{color:var(--accent)}
.bl-hdr__tel.bl-hdr__tel{font-size:25px;font-weight:600;color:var(--header-ink);
  text-decoration:none;letter-spacing:-.01em;line-height:1.1}
.bl-hdr__tel.bl-hdr__tel:hover{color:var(--accent)}
.bl-hdr__social{display:flex;gap:8px;margin-top:3px;list-style:none;padding:0;margin-bottom:0}
/* Bare glyphs, no tile. */
.bl-hdr__social{gap:14px}
.bl-hdr__social a{display:grid;place-items:center;background:none;padding:0;
  color:var(--header-ink);text-decoration:none;transition:.15s}
.bl-hdr__social a:hover{color:var(--accent)}
.bl-hdr__social svg{width:19px;height:19px;fill:currentColor;display:block}

/* --- desktop nav + dropdowns --- */
.bl-nav{background:var(--nav-bg);border-bottom:1px solid var(--line);position:relative;z-index:55}
.bl-nav__in{display:flex;align-items:center;max-width:var(--measure);margin:0 auto;padding:0 24px}
/* Items spread across the full container rather than bunching left. Each li
   flexes so the row fills edge to edge and the labels stay centred in their
   own share of the width. */
.bl-nav__list{display:flex;list-style:none;margin:0;padding:0;width:100%;
  justify-content:space-between}
.bl-nav__list > li{position:relative;flex:1 1 auto;text-align:center}
.bl-nav__list > li > a{display:block;padding:17px 10px;color:var(--nav-ink);text-decoration:none;
  font-size:15px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  border-bottom:3px solid transparent;white-space:nowrap}
.bl-nav__list > li > a:hover,.bl-nav__list > li.is-current > a{color:var(--nav-ink-active);
  border-bottom-color:var(--accent)}
.bl-nav__has > a::after{content:"";display:inline-block;margin-left:7px;vertical-align:middle;
  border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)}
/* Anchored to the parent's LEFT edge, not centred on it. Centring (left:50% +
   translateX(-50%)) put the Catalog dropdown off the left edge of the screen at
   every width <=1200: the nav row stops being centred once the viewport is
   narrower than --measure, so Catalog starts at the 24px padding, and a 210px
   menu centred on a 147px item begins at -7px (-27px by 900px). It looked fine
   at 1440 because the row is centred there and Catalog starts at 144px.
   li:last-child is right-aligned so a dropdown added to the last nav item
   cannot overflow the other edge — the nav is data-driven from $bl_nav, so
   which items have children can change without anyone revisiting this rule. */
.bl-sub{position:absolute;top:100%;left:0;min-width:210px;text-align:left;background:var(--surface);
  border:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);
  box-shadow:var(--shadow);list-style:none;margin:0;padding:6px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s}
.bl-nav__list > li:last-child .bl-sub{left:auto;right:0}
.bl-nav__has:hover .bl-sub,.bl-nav__has:focus-within .bl-sub{opacity:1;visibility:visible;transform:translateY(0)}
.bl-sub a{display:block;padding:9px 12px;border-radius:calc(var(--radius) - 4px);
  color:var(--ink);text-decoration:none;font-size:14px;font-weight:500}
.bl-sub a:hover{background:var(--surface-2);color:var(--accent)}

/* --- mobile bar: hamburger + Parts / Sales / Call --- */
.bl-mbar{display:none;background:var(--header-bg);border-top:1px solid color-mix(in srgb,var(--header-ink) 12%,transparent)}
.bl-mbar__list{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:0;padding:0}
.bl-mbar__list li + li{border-left:1px solid color-mix(in srgb,var(--header-ink) 12%,transparent)}
.bl-mbar__list a,.bl-mbar__list button{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;width:100%;padding:11px 4px;background:none;border:0;
  color:var(--header-ink);text-decoration:none;font:inherit;font-size:10.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.bl-mbar__list a:hover,.bl-mbar__list button:hover{background:color-mix(in srgb,var(--header-ink) 10%,transparent)}
.bl-mbar svg{width:20px;height:20px;fill:currentColor;display:block}

/* --- off-canvas drawer (replaces mmenu) --- */
.bl-drawer{position:fixed;inset:0 auto 0 0;width:min(86vw,340px);background:var(--surface);
  z-index:200;transform:translateX(-100%);transition:transform .26s ease;
  overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:0 0 40px rgba(0,0,0,.35)}
.bl-drawer[data-open]{transform:none}
.bl-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px;border-bottom:1px solid var(--line);background:var(--header-bg)}
.bl-drawer__head img{height:52px;width:auto}
.bl-drawer__close{background:none;border:0;color:var(--header-ink);font-size:26px;
  line-height:1;cursor:pointer;padding:4px 8px}
.bl-drawer ul{list-style:none;margin:0;padding:0}
.bl-drawer > nav > ul > li{border-bottom:1px solid var(--line)}
.bl-drawer a{display:block;padding:14px 18px;color:var(--ink);text-decoration:none;
  font-size:15px;font-weight:600}
.bl-drawer a:hover{background:var(--surface-2);color:var(--accent)}
.bl-drawer .bl-sub{position:static;opacity:1;visibility:visible;transform:none;
  border:0;box-shadow:none;border-radius:0;padding:0 0 8px 0;background:var(--surface-2)}
.bl-drawer .bl-sub a{padding:10px 18px 10px 34px;font-size:14px;font-weight:500}
.bl-scrim{position:fixed;inset:0;background:rgba(8,12,18,.55);z-index:199;
  opacity:0;visibility:hidden;transition:.26s}
.bl-scrim[data-open]{opacity:1;visibility:visible}
body.bl-locked{overflow:hidden}

/* --- footer --- */
.bl-foot{background:var(--foot-bg);color:var(--foot-ink);padding:44px 0 0}
.bl-foot__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding-bottom:32px}
.bl-foot h4{margin:0 0 13px;color:var(--foot-head);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase}
.bl-foot ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.bl-foot a{color:var(--foot-ink);text-decoration:none;font-size:14px}
.bl-foot a:hover{color:var(--foot-head)}
.bl-foot__meta{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
  padding:20px 0;border-top:1px solid color-mix(in srgb,var(--foot-ink) 16%,transparent);font-size:14px}
.bl-foot__meta .grp{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bl-foot__meta img{height:36px;width:auto}
.bl-foot__social{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.bl-foot__social a{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--foot-ink) 14%,transparent)}
.bl-foot__social svg{width:14px;height:14px;fill:currentColor;display:block}
/* Explicit padding so the ~300px of dead space above the copyright bar
   on the live site cannot come back. */
.bl-foot__legal{padding:15px 0;margin:0;
  border-top:1px solid color-mix(in srgb,var(--foot-ink) 12%,transparent);
  font-size:12.5px;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between}
.bl-foot__legal a{font-size:12.5px;text-decoration:underline}

@media (max-width:1000px){ .bl-foot__cols{grid-template-columns:repeat(2,1fr)} }
/* 910, not 900: the seven nav items plus the row's 24px padding need 910px to
   sit on one line, so viewports of 901-909px kept the desktop nav and scrolled
   sideways by 9px on every page. Swapping to the drawer 10px earlier costs
   nothing — the band is nine pixels wide — and removes the horizontal scroll.
   The other max-width:900px blocks below are grid layout and stay at 900; they
   are unrelated to whether the nav row fits. */
/* The nav row grew when its first item was renamed from Catalog to Inventory and
   the store's own catalog moved under it, and at 911px — the narrowest desktop
   width — it needed 930px and pushed the page sideways by 19. Rather than move
   the breakpoint again or shorten a label until it happens to fit, the row gives
   back its horizontal padding and item spacing over the last 90px before the
   drawer takes over. Adding a nav item is then a layout question, not a
   silent 19px of sideways scroll. */
@media (max-width:1000px){
  .bl-nav__in{padding:0 10px}
  .bl-nav__list > li > a{padding-left:5px;padding-right:5px;letter-spacing:0}
}

@media (max-width:910px){
  .bl-nav{display:none}
  .bl-mbar{display:block}
  .bl-hdr__in{padding:12px 16px;gap:14px}
  .bl-hdr__logo img{height:64px}
  .bl-hdr__tel{font-size:20px}
  .bl-hdr__addr{font-size:10.5px}
  .bl-foot{padding-top:32px}
}
@media (max-width:620px){
  .bl-hdr__social{display:none}
  .bl-foot__cols{grid-template-columns:1fr 1fr;gap:22px}
  .bl-foot__meta{gap:14px}
}

.bl-foot__map{display:block;line-height:0;border-top:1px solid color-mix(in srgb,var(--foot-ink) 16%,transparent)}
.bl-foot__map iframe{filter:grayscale(.25)}
.bl-foot h4 a{color:inherit;text-decoration:none;font:inherit}

/* main.css centres text inside the footer region; the new footer is left-aligned. */
.bl-foot,.bl-foot__cols,.bl-foot__cols > div,.bl-foot__legal{text-align:left}
.bl-foot__meta{text-align:left}


/* ===== HOMEPAGE HERO =====
   Split panel. Every hero asset is a manufacturer banner with its own headline
   burned into the LEFT of the image, so overlaid site copy collided with it.
   Copy sits in a solid panel; the image is anchored right to show the machine.
   The old inline rules used object-fit:contain on a fixed 476px black box,
   which is what produced the letterboxing. */
/* Full-bleed with a left-to-right fade, copy overlaid. The fade runs deep on
   the left so the manufacturer banner's own headline is pushed down in contrast
   under the site copy rather than competing with it at equal weight. */
.bl-hero{position:relative;display:block;background:var(--hero-bg);
  min-height:clamp(340px,42vw,540px);text-align:left;isolation:isolate}
.bl-hero__media{position:absolute;inset:0;z-index:0}
.bl-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,18,34,.92) 0%,rgba(7,18,34,.78) 32%,
                             rgba(7,18,34,.35) 62%,rgba(7,18,34,.05) 100%)}
/* pointer-events:none is load-bearing. This panel spans the whole hero at
   z-index 2, and .bl-hero__media sits at z-index 0 — which makes it a stacking
   context, so the swiper arrows inside it cannot rise above this layer no
   matter what z-index they carry. Without this the carousel arrows were
   unclickable. The panel's own links opt back in below. */
.bl-hero__copy{position:relative;z-index:2;display:flex;align-items:center;
  min-height:clamp(340px,42vw,540px);max-width:var(--measure);margin:0 auto;
  padding:44px clamp(24px,3.5vw,56px);pointer-events:none}
.bl-hero__copy a,.bl-hero__copy button{pointer-events:auto}
.bl-hero__kicker{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-accent);background:var(--accent);
  padding:5px 11px;border-radius:999px;margin-bottom:14px}
.bl-hero__h1{margin:0 0 10px;color:var(--hero-ink);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(28px,4.2vw,52px);line-height:1.05;max-width:16ch}
.bl-hero__sub{margin:0 0 22px;color:var(--hero-sub);font-size:clamp(15px,1.5vw,18px);max-width:44ch}
.bl-hero__cta{display:flex;gap:12px;flex-wrap:wrap}
/* Frosted-glass secondary. A plain transparent outline sat directly on the
   photography, so its legibility changed with every slide — fine on the dark
   dirt-bike shot, washed out on the bright jet-ski water. The translucent fill
   plus blur gives the label a consistent backing whatever is behind it, while
   staying clearly subordinate to the solid primary.
   Doubled class: main.css a,a:link,a:visited is (0,1,1) and would otherwise
   take the label back to PowerGo blue. */
.bl-hero__cta .bl-btn.bl-btn--outline{
  background:color-mix(in srgb,var(--hero-ink) 16%,transparent);
  color:var(--hero-ink);
  border-color:color-mix(in srgb,var(--hero-ink) 50%,transparent);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.bl-hero__cta .bl-btn.bl-btn--outline:hover{
  background:color-mix(in srgb,var(--hero-ink) 28%,transparent);
  border-color:var(--hero-ink);color:var(--hero-ink)}
.bl-hero__media{overflow:hidden}
.bl-hero__media .hero-carousel,.bl-hero__media .swiper-wrapper,
.bl-hero__media .swiper-slide{height:100%}
.bl-hero__media .swiper-slide img{width:100%;height:100%;object-fit:cover;
  object-position:82% center;display:block}
.bl-hero__media .swiper-button-prev,.bl-hero__media .swiper-button-next{color:var(--on-media)}
.bl-hero__media .swiper-button-prev::after,.bl-hero__media .swiper-button-next::after{font-size:24px}
.bl-hero__media .swiper-pagination{text-align:right;padding-right:22px;z-index:3}
.bl-hero__media .swiper-button-prev,.bl-hero__media .swiper-button-next{z-index:3}
.bl-hero__media .swiper-pagination-bullet{background:var(--on-media);opacity:.55}
.bl-hero__media .swiper-pagination-bullet-active{opacity:1}

@media (max-width:900px){
  .bl-hero{min-height:0}
  /* On a phone the fade cannot carry text over a busy photo, so the image sits
     above and the copy on solid colour beneath it. */
  .bl-hero__media{position:relative;height:clamp(200px,50vw,300px)}
  .bl-hero::after{inset:auto 0 auto 0;height:clamp(200px,50vw,300px);
    background:linear-gradient(180deg,rgba(7,18,34,0) 55%,rgba(7,18,34,.55) 100%)}
  .bl-hero__copy{min-height:0;padding:26px 20px 30px}
}

/* main.css styles bare h1/h2/h3 with the PowerGo blue, uppercase and its own
   sizing. The reskinned headings are explicit about all three so they do not
   inherit it. Doubled class beats a:link (0,1,1) where headings wrap links. */
/* main.css: `.home:not(.is-template-v1-6):not(.is-rental) h1` is (0,3,1) and sets
   26px / #088fc2 / font-weight:400!important. This selector is (0,4,0) — .bl-hero is doubled, because :not() arguments
   count toward specificity and theirs is (0,3,1) — so it wins
   on colour and size; the weight needs !important because theirs is. */
.bl-hero.bl-hero .bl-hero__copy .bl-hero__h1{color:var(--hero-ink);text-transform:none;
  font-size:clamp(28px,4.2vw,52px);font-weight:800!important;line-height:1.05;
  letter-spacing:-.02em;font-family:inherit}
.bl-hero__cta .bl-btn.bl-btn--outline{color:var(--hero-ink)}


/* ===== HOMEPAGE BRAND TILES =====
   Brands come from bl_this_store()['brands'] (inc/store-config.php), not a
   hardcoded catalog — Suzuki gets a tile the same way Kawasaki does. Sits in
   the same white band as the category tiles below it and reuses the same
   card/hover language (surface-2, line, shadow, translateY lift) so it reads
   as one system rather than a bolted-on block. */
.bl-brands{padding:44px 0 6px;text-align:left;background:var(--bg)}
.bl-brands__h2{margin:0 0 16px;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-muted)}
.bl-brands__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.bl-brand-tile{display:flex;align-items:center;justify-content:center;min-height:84px;
  padding:20px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);transition:.2s;text-decoration:none}
.bl-brand-tile:hover{border-color:var(--accent);transform:translateY(-2px)}
.bl-brand-tile img{max-width:100%;max-height:42px;object-fit:contain;display:block}
.bl-brand-tile span{font-size:15px;font-weight:800;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink)}

/* ===== HOMEPAGE CATEGORY TILES =====
   OEM product cutouts served from the theme, not hotlinked from
   kawasaki-global-admin.com. Counts come from the live inventory feed and are
   suppressed when zero, so a dead feed costs the counts and not the tiles. */
/* main.css sets body{background:#292929}; these sections are transparent by
   default, which is why the original tiles read grey-on-grey. */
.bl-cats{padding:24px 0 8px;text-align:left;background:var(--bg)}
.bl-cats__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.bl-cat{position:relative;display:block;overflow:hidden;border-radius:var(--radius);
  text-decoration:none;color:inherit;background:var(--surface-2);border:1px solid var(--line);
  box-shadow:var(--shadow);transition:.2s}
.bl-cat:hover{border-color:var(--accent);transform:translateY(-2px)}
.bl-cat,.bl-cat *{text-decoration:none}
.bl-cat__shot{position:relative;aspect-ratio:3/4;overflow:hidden;display:block;padding:0}
.bl-cat__shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;display:block}
/* Fallback product cutouts sit on white; contain them rather than crop. */
.bl-cat__shot img[src$=".png"]{object-fit:contain;background:var(--surface-2);padding:12px}
.bl-cat__shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,31,58,.10) 35%,rgba(11,31,58,.86) 100%)}
.bl-cat:hover .bl-cat__shot img{transform:scale(1.05)}
.bl-cat__label{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px;
  color:var(--on-media);font-size:17px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;border-top:0}
.bl-cat__count{font-weight:600;font-size:12px;letter-spacing:0;text-transform:none;
  color:var(--on-media);opacity:.88;white-space:nowrap}

/* Six tiles divide evenly by 6, 3 and 2, so no breakpoint leaves an orphan. */
@media (max-width:1200px){
  .bl-cats__grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .bl-cats__grid{grid-template-columns:repeat(2,1fr)}
}


/* ===== HOMEPAGE PROMO CARDS ===== */
.bl-promos{padding:52px 0;background:var(--bg);text-align:left}
.bl-promos__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bl-promo{display:flex;flex-direction:column;overflow:hidden}
.bl-promo img{aspect-ratio:16/10;object-fit:cover;width:100%;display:block}
.bl-promo__body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.bl-promo.bl-promo .bl-promo__body h2{margin:0;font-size:19px;font-weight:800!important;
  letter-spacing:-.01em;text-transform:none;font-family:inherit;line-height:1.25}
.bl-promo__body h2 a{color:var(--ink);text-decoration:none}
.bl-promo__body h2 a:hover{color:var(--accent)}
.bl-promo__body p{margin:0;color:var(--ink-muted);font-size:14.5px;flex:1}
.bl-promo__body .bl-btn{align-self:flex-start;margin-top:6px}

/* ===== HOMEPAGE SEO BAND =====
   Structure is untouched: #content > .inner > main > article > .text keeps the
   .textMore block so the existing "+ Read More" toggle in main.js still works. */
.bl-band{background:var(--band-bg);color:var(--band-ink);padding:52px 0;text-align:left}
.bl-band .page-header{margin:0 0 18px}
.bl-band.bl-band .page-header h1{color:var(--band-head);font-size:clamp(19px,2.1vw,26px);
  font-weight:800!important;letter-spacing:-.01em;text-transform:none;font-family:inherit;
  line-height:1.25;margin:0;max-width:38ch}
.bl-band .text{color:var(--band-ink)}
.bl-band .text p{margin:0 0 14px;font-size:15px;max-width:78ch;color:var(--band-ink)}
.bl-band .text a{color:var(--band-head)}

@media (max-width:900px){ .bl-promos__grid{grid-template-columns:1fr} }

/* .bl-foot ul{flex-direction:column} is (0,1,1) and also matched the social
   list, stacking the icons. This is (0,2,0) so the row wins. */
.bl-foot .bl-foot__social{flex-direction:row;align-items:center}
.bl-foot .bl-foot__social li{width:auto}


/* ==========================================================================
   INVENTORY LISTING — was 255 lines of inline <style> in page-inventory.php.
   Class names are the template's own (inv-*, cf-*), so the PHP filter logic,
   $type_map handling, sale-price branches and image fallbacks are untouched.
   ========================================================================== */
.page-template-page-inventory #content,
body.page-inventory #content{background:var(--bg)}

/* Filter bar — one row: label, the selects, then the search.
   It used to render as three stacked bands. .cf-search is a wrapper around the
   input and its button, but it was named in the form-control rule below and so
   inherited width:100%, a border and padding — a full-width box that could only
   sit on its own line, drawn inside a second card because .cf-fields carried its
   own background on top of #invFilters'. And .cf-fields declared six grid
   columns for four selects, so two phantom columns padded out the right side. */
#invFilters{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:12px 14px;margin:0 0 20px}
.cf-label{display:flex;align-items:center;gap:7px;flex:none;
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
/* page-catalog.php renders .cf-fields on its own, with no #invFilters around it,
   so the card stays on this class and is switched off only inside the wrapper —
   otherwise the catalog's selects sit bare on the page background. */
.cf-fields{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:12px 14px;box-shadow:var(--shadow);margin:0 0 20px}
#invFilters .cf-fields{flex:1 1 420px;
  background:none;border:0;border-radius:0;padding:0;box-shadow:none;margin:0}
.cf-field{flex:1 1 130px;min-width:118px;margin:0}
.cf-search{display:flex;align-items:center;flex:0 1 250px;min-width:190px;
  background:none;border:0;padding:0;box-shadow:none}
.cf-field select,.cf-field input,.cf-search input{font:inherit;font-size:15px;padding:11px 13px;
  border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);
  color:var(--ink);width:100%}
/* The input and its button read as one control. */
.cf-search input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0;min-width:0}
.cf-field select:focus,.cf-field input:focus,.cf-search input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.cf-search-btn{display:flex;align-items:center;justify-content:center;flex:none;
  padding:11px 18px;border-radius:0 var(--radius) var(--radius) 0;font-size:14.5px;
  font-weight:700;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);
  cursor:pointer;font-family:inherit;white-space:nowrap;align-self:stretch}
.cf-search-btn:hover{filter:brightness(1.08)}

/* card grid */
.inv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:0 0 48px;list-style:none;margin:0}
/* position:relative is load-bearing: .inv-card-link's pseudo-element covers
   this box so the whole card opens the unit. Everything a visitor can press
   inside the card is lifted above that overlay — see the z-index:2 rules. */
.inv-card{position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);
  transition:.18s;text-align:left}
.inv-card:hover{transform:translateY(-3px);border-color:var(--accent)}
.inv-card,.inv-card *{text-decoration:none}

/* Photo carousel. Every shot is stacked in the frame and cross-faded; only the
   first carries a src at render, so the grid weighs what it weighed before the
   arrows existed. The rest are swapped in from data-src on first use. */
.inv-card-img{position:relative;aspect-ratio:3/2;background:var(--surface-2);overflow:hidden;display:block}
.inv-shots{position:absolute;inset:0}
.inv-card-img img{width:100%;height:100%;object-fit:cover;display:block}
/* visibility, not opacity alone: an inactive shot must not paint at all, or a
   photo still waiting on its data-src renders as a broken-image icon with its
   alt text spelled across the card. */
.inv-shot{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .22s ease}
.inv-shot.is-active{opacity:1;visibility:visible}
/* A phone shot of a used unit is taller than it is wide, with the machine in
   the lower half and sky or shop wall above it. Cropping that to a 3:2 frame
   keeps the middle half of the height — the wall. Portrait photos are shown
   whole and sit over a blurred copy of themselves, which fills the frame
   without inventing anything or cutting the unit. The backdrop is the same URL
   as the photo, so it is not a second request. */
/* Pin both layers to the frame.
   PowerGo's main.css carries `#mainContent article .text img{height:auto
   !important}` — an id selector with !important, at (1,2,1). No amount of class
   stacking outranks that, so the tile's own `height:100%` never applied and
   every photo rendered at its intrinsic height inside the frame: a 1440x1920
   phone shot 484px tall in a 242px box, showing whatever sat above the machine
   and spilling the rest under `overflow:hidden`. It read as a bad crop; it was
   never a crop. This selector is (1,3,1), which is the only way to win, and the
   plain one after it covers any context outside that wrapper. */
#mainContent article .text .inv-shot img,
.inv-shot img{position:absolute;inset:0;width:100%;height:100%!important}
.is-portrait .inv-shot-fill{transform:scale(1.15);
  filter:blur(16px) saturate(.8) brightness(.94)}
.is-portrait .inv-shot-main{object-fit:contain}
.inv-card-noimg{display:grid;place-items:center;color:var(--ink-muted);font-size:13px}
/* Always visible, not revealed on hover: a control a visitor has to discover
   is a control most of them never find, and there is no hover at all on the
   phones most of this traffic arrives on. Kept quiet enough to sit over a
   photo without competing with the unit. */
.inv-shot-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:32px;height:32px;display:grid;place-items:center;padding:0;cursor:pointer;
  border:1px solid rgba(11,31,58,.14);border-radius:50%;
  background:rgba(255,255,255,.86);color:var(--brand);
  box-shadow:0 1px 5px rgba(16,21,28,.24);
  transition:background .16s ease,color .16s ease}
.inv-shot-prev{left:9px}
.inv-shot-next{right:9px}
.inv-shot-nav:hover{background:#fff;color:var(--accent)}
.inv-shot-nav:focus-visible{outline:2px solid var(--accent);outline-offset:2px;background:#fff}
.inv-badge{position:absolute;top:10px;left:10px;z-index:2;font-family:var(--display);
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 8px;border-radius:3px;box-shadow:0 1px 6px rgba(0,0,0,.25)}
.badge-new{background:var(--brand);color:#fff}
.badge-used{background:#fff;color:var(--brand);border:1px solid #C3CEDA}
.badge-special{background:var(--danger);color:#fff}
.inv-save-tab{position:absolute;right:0;bottom:12px;z-index:2;font-family:var(--display);
  background:var(--danger);color:#fff;font-size:13px;font-weight:800;font-stretch:102%;
  padding:6px 12px 6px 14px;border-radius:3px 0 0 3px;box-shadow:0 2px 8px rgba(0,0,0,.2)}

.inv-card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:9px;flex:1}
/* PowerGo's .text wrapper sets `p{margin-bottom:20px}` and
   `h3:not(:first-child){margin-top:50px}` at (0,3,1). A tile rule at (0,3,0)
   loses to both, which is what opened a 50px hole between the eyebrow and the
   model name. Everything in this card that sets a margin is written at (0,4,1)
   for that reason — do not "simplify" these selectors. */
.text .inv-card.inv-card .inv-card-eyebrow,
.inv-card.inv-card .inv-card-eyebrow{margin:0;font-family:var(--display);font-size:11px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--brand) 62%,var(--ink-muted))}
/* Two lines, always — a one-line name and a two-line name must not push the
   price to different heights in the same row of tiles. */
/* Two lines, always: a one-line name and a two-line name must not push the
   price to different heights in the same row of tiles. The clamp lives on the
   span, not on the h3 (a flex item, so -webkit-box is blockified there and the
   clamp silently does nothing) and not on the anchor (overflow:hidden would
   clip the ::after that makes the whole card clickable). */
.text .inv-card.inv-card .inv-card-title,
.inv-card.inv-card .inv-card-title{margin:0;font-family:var(--display);font-size:19.5px;
  font-weight:700!important;font-stretch:88%;
  letter-spacing:-.005em;line-height:1.18;color:var(--ink);text-transform:none;
  min-height:2.36em}
/* `body *` and `h3 *` in main.css both set font-weight:400, so the weight on
   the h3 never reaches the text inside the anchor — the model name rendered
   regular while the price beside it was 800. Restate it on the span itself. */
.inv-card .inv-card-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-family:var(--display);font-weight:700;font-stretch:88%}
.text .inv-card .inv-card-title a,.inv-card .inv-card-title a{color:var(--ink)}
.inv-card-link::after{content:'';position:absolute;inset:0;z-index:1}
.inv-card-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.inv-card-price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.inv-price-now{font-family:var(--display);font-size:32px;font-weight:800;font-stretch:106%;
  color:var(--ink);line-height:1;letter-spacing:-.022em;font-variant-numeric:tabular-nums}
.inv-price-was{font-family:var(--display);font-size:14.5px;font-weight:600;
  color:var(--ink-muted);text-decoration:line-through}
.inv-price-was.is-empty{text-decoration:none;opacity:.5}

/* Payment. Rendered on every tile: dimmed when no defensible figure exists,
   never dropped, because a missing row shortens the card and leaves the row
   of tiles beside it ragged. Only the live one is a button. */
.inv-payment{position:relative;z-index:2;display:flex;align-items:center;gap:10px;width:100%;
  margin:0;padding:9px 12px;text-align:left;font:inherit;cursor:pointer;
  background:color-mix(in srgb,var(--accent) 9%,#fff);
  border:1px solid color-mix(in srgb,var(--accent) 30%,#fff);border-radius:7px;color:var(--ink)}
.inv-payment:hover{border-color:var(--accent)}
.inv-pay-amt{font-family:var(--display);font-size:22px;font-weight:800;font-stretch:104%;
  line-height:1;font-variant-numeric:tabular-nums}
.inv-pay-kicker{font-family:var(--display);font-size:11.5px;font-weight:700;
  letter-spacing:.035em;line-height:1.35;
  color:color-mix(in srgb,var(--brand) 78%,var(--accent))}
.inv-pay-kicker em{display:block;font-style:normal;font-weight:500;font-size:10.5px;
  color:var(--ink-muted);letter-spacing:.01em}
.inv-payment-off{background:var(--surface-2);border-color:var(--line);cursor:default}
.inv-payment-off .inv-pay-amt{color:var(--ink-muted);opacity:.6}
.inv-payment-off .inv-pay-kicker{color:var(--ink-muted);opacity:.75}

.text .inv-card.inv-card .inv-card-meta,
.inv-card.inv-card .inv-card-meta{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;margin:auto 0 0;padding-top:2px;font-family:var(--display);
  font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-muted)}
.inv-card-facts{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-card-stock{margin:0;flex:none;white-space:nowrap}

/* Actions. Two only — the card itself is the link to the unit, so the old
   DETAILS button has nothing left to do. */
.inv-card-actions{display:grid;grid-template-columns:1.35fr 1fr;gap:8px;margin-top:11px}
.text .inv-card a.inv-btn-finance,.inv-card a.inv-btn-finance{position:relative;z-index:2;
  display:block;width:100%;padding:11px 8px;text-align:center;font-family:var(--display);
  font-size:13.5px;font-weight:700;letter-spacing:.01em;
  border-radius:6px;background:var(--brand);color:#fff;border:1px solid var(--brand)}
.text .inv-card a.inv-btn-finance:hover,.inv-card a.inv-btn-finance:hover{filter:brightness(1.35)}
.text .inv-card a.inv-btn-info,.inv-card a.inv-btn-info{position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;padding:11px 8px;text-align:center;
  font-family:var(--display);font-size:13.5px;font-weight:600;
  border-radius:6px;border:1px solid var(--line);
  color:var(--ink);background:transparent}
.text .inv-card a.inv-btn-info:hover,.inv-card a.inv-btn-info:hover{
  border-color:var(--accent);color:var(--accent);filter:none}

/* Disclaimer modal */
.pay-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;
  justify-content:center;padding:20px}
.pay-modal[hidden]{display:none}
.pay-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62)}
.pay-modal-box{position:relative;max-width:560px;width:100%;max-height:86vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:22px 24px}
.pay-modal-box h2{margin:0 0 10px;font-size:18px;font-weight:800}
.pay-modal-box p{margin:0 0 18px;font-size:13px;line-height:1.55;color:var(--ink-muted)}
.pay-modal-close{padding:9px 20px;font-size:12.5px;font-weight:800;letter-spacing:.04em;
  border-radius:6px;border:1px solid var(--line);background:transparent;color:var(--ink);
  cursor:pointer}
.pay-modal-close:hover{border-color:var(--accent);color:var(--accent)}
.inv-cta{padding:0 17px 17px}
/* Doubled class: main.css a,a:link,a:visited is (0,1,1) and beats a single
   class, so these render as underlined blue links otherwise. */
/* The grid sits inside PowerGo's .text wrapper, whose
   `.text:not(.reset-text) a` is (0,2,1) and sets #088fc2 plus an underline.
   `:not()` arguments count, so theirs is (0,3,1); this needs four classes. */
.text .inv-card .inv-btn.inv-btn,
.inv-btn.inv-btn{display:inline-block;padding:9px 15px;
  border-radius:var(--radius);font-size:13px;font-weight:700;border:2px solid var(--line);
  background:transparent;color:var(--ink);text-decoration:none;text-align:center}
.text .inv-card .inv-btn.inv-btn:hover,
.inv-btn.inv-btn:hover{border-color:var(--accent);color:var(--accent)}
.inv-empty{padding:48px 0;text-align:center;color:var(--ink-muted);font-size:15px}

@media (max-width:1000px){
  .inv-grid{grid-template-columns:repeat(2,1fr)}
  /* Two selects per line, label becomes a heading above them. */
  .cf-field{flex:1 1 calc(50% - 5px)}
  .cf-label{flex:1 1 100%}
}
@media (max-width:620px){
  .inv-grid{grid-template-columns:1fr}
  .cf-fields{flex:1 1 100%}
  .cf-search{flex:1 1 100%}
}

.text .inv-card .inv-card-title{color:var(--ink)}
.text .inv-card a,.text .inv-card a:link,.text .inv-card a:visited{text-decoration:none}


/* ==========================================================================
   VEHICLE DETAIL — was 388 lines of inline <style>, the largest block in the
   theme. Class names are the template's own. The inquiry form, its field names
   (vi_*), the nonce, and the recipient list including leads@borderlandgroup.ca
   are all untouched.
   ========================================================================== */
.vd-layout{display:grid;grid-template-columns:1.55fr 1fr;gap:36px;align-items:start;
  padding:8px 0 24px;text-align:left}
.vd-gallery{min-width:0}
.vd-main-img{width:100%;aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--surface-2);display:block}
.vd-main-img img{width:100%;height:100%;object-fit:cover;display:block}
.vd-no-image{display:grid;place-items:center;color:var(--ink-muted);font-size:14px}
.vd-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px}
.vd-thumb{aspect-ratio:1;border-radius:var(--radius);overflow:hidden;cursor:pointer;
  border:2px solid transparent;background:var(--surface-2)}
.vd-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.vd-thumb-active{border-color:var(--accent)}

.vd-sidebar{position:sticky;top:20px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:22px}
.vd-sidebar-header{margin-bottom:14px}
.vd-layout .vd-title{margin:6px 0 4px;font-size:24px;font-weight:800!important;letter-spacing:-.02em;
  line-height:1.2;color:var(--ink);text-transform:none;font-family:inherit}
.vd-subtitle{color:var(--ink-muted);font-size:14px;margin:0}
.vd-special-offer{display:inline-block;padding:4px 9px;border-radius:999px;font-size:11px;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:color-mix(in srgb,var(--danger) 15%,transparent);color:var(--danger)}
.vd-price-section{padding:14px 0 4px;border-top:1px solid var(--line);margin-top:14px}
.vd-price-label{display:block;font-size:12px;font-weight:600;color:var(--ink-muted);
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:2px}
.vd-price{font-size:31px;font-weight:800;letter-spacing:-.025em;color:var(--ink);margin:0}
.vd-price-sale{color:var(--danger)}
.vd-price-was{font-size:15px;font-weight:600;color:var(--ink-muted);text-decoration:line-through;
  margin-right:9px}
.vd-price-note{font-size:12.5px;color:var(--ink-muted);margin:6px 0 0}
.vd-price-bar{margin:0}
.vd-sidebar-actions,.vd-price-actions{display:flex;flex-direction:column;gap:10px;margin:16px 0 4px}
.vd-sidebar .vd-btn-finance,.vd-sidebar .vd-btn-text,.vd-sidebar-actions a,
.vd-price-actions a{display:block;width:100%;text-align:center;padding:12px 20px;
  border-radius:var(--radius);font-size:14.5px;font-weight:700;text-decoration:none;
  border:2px solid var(--line);color:var(--ink);background:transparent}
.vd-sidebar .vd-btn-finance{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.vd-sidebar .vd-btn-finance:hover{filter:brightness(1.08);color:var(--on-accent)}
.vd-sidebar-actions a:hover,.vd-price-actions a:hover{border-color:var(--accent);color:var(--accent)}

.vd-details-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin:0}
.vd-detail{display:flex;justify-content:space-between;gap:14px;padding:10px 0;
  border-bottom:1px solid var(--line);font-size:14px}
.vd-detail-label{color:var(--ink-muted)}
.vd-detail-value{font-weight:600;text-align:right;color:var(--ink)}

.vd-section{padding:26px 0;text-align:left}
.vd-section .vd-section-title{margin:0 0 14px;font-size:19px;font-weight:800!important;
  letter-spacing:-.01em;color:var(--ink);text-transform:none;font-family:inherit}
.vd-specs-table{width:100%;border-collapse:collapse;font-size:14px}
.vd-specs-table td,.vd-specs-table th{padding:10px 12px;border-bottom:1px solid var(--line);
  text-align:left;vertical-align:top}
.vd-specs-table th{color:var(--ink-muted);font-weight:600;width:38%}
.vd-description{font-size:15px;color:var(--ink);line-height:1.65}
.vd-no-specs{color:var(--ink-muted);font-size:14px}

.vd-sidebar-form{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:13px}
.vd-sidebar-form input,.vd-sidebar-form textarea,.vd-sidebar-form select{font:inherit;font-size:15px;
  padding:11px 13px;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--surface);color:var(--ink);width:100%}
.vd-sidebar-form input:focus,.vd-sidebar-form textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.vd-sidebar-form textarea{min-height:110px;resize:vertical}
.vd-form-submit{background:var(--accent)!important;border:2px solid var(--accent)!important;
  color:var(--on-accent)!important;font-weight:700;padding:12px 20px;border-radius:var(--radius);
  cursor:pointer;font-family:inherit;font-size:14.5px}
.vd-form-success{padding:13px 15px;border-radius:var(--radius);font-size:14px;
  background:color-mix(in srgb,var(--ok) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--ok) 32%,transparent);color:var(--ink)}
.vd-form-error{padding:13px 15px;border-radius:var(--radius);font-size:14px;
  background:color-mix(in srgb,var(--danger) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--danger) 30%,transparent);color:var(--ink)}
.vd-not-found{padding:60px 0;text-align:center;color:var(--ink-muted)}
.vd-back-bottom{padding:0 0 40px}
.text .vd-btn-back{color:var(--ink-muted);text-decoration:none;font-size:14px}
.text .vd-btn-back:hover{color:var(--accent)}

@media (max-width:1000px){
  .vd-layout{grid-template-columns:1fr;gap:26px}
  .vd-sidebar{position:static}
}
@media (max-width:620px){
  .vd-details-grid{grid-template-columns:1fr}
  .vd-thumbs{grid-template-columns:repeat(4,1fr)}
  .vd-price{font-size:27px}
}


/* ==========================================================================
   FINANCING — was 87 lines of inline <style>. The form is already a four-step
   wizard (Vehicle Interest, Personal Information, Employment & Income,
   Trade-In & Review) with its own stepper and review screen, so only the
   styling moved. All 29 field names, the fin_hp honeypot, the
   BORDERLAND_FINANCE_* constants, the leads@ CC and the finance-service POST
   are untouched.
   ========================================================================== */
.fin-inner{max-width:860px;margin:0 auto;padding:8px 0 56px;text-align:left}
.fin-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:26px}
.fin-subtitle,.fin-sub{color:var(--ink-muted);font-size:15px;margin:0 0 20px}

/* stepper */
.fin-stepper{display:flex;align-items:center;gap:10px;margin:0 0 24px;flex-wrap:wrap}
.fin-step-dot{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;
  color:var(--ink-muted);padding:8px 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface)}
.fin-step-dot.active,.fin-step-dot.is-active,.fin-step-dot[aria-current]{
  color:var(--ink);border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent)}
.fin-step-dot.done,.fin-step-dot.is-done{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}

/* sections + fields */
/* The wizard toggles `.visible` on sections and `.active`/`.done` on the step
   dots — not `.active` on sections. Getting this wrong renders an empty card. */
.fin-section{display:none}
.fin-section.visible{display:block}
/* Trade-in fields are revealed by toggleTradein() adding `.show`. */
.fin-tradein-fields{display:none}
.fin-tradein-fields.show{display:block}
.fin-section h2{margin:0 0 4px;font-size:19px;font-weight:800!important;letter-spacing:-.01em;
  color:var(--ink);text-transform:none;font-family:inherit}
.fin-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 16px}
.fin-field{display:flex;flex-direction:column;gap:6px;margin:0 0 16px}
.fin-field label{font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--ink);
  text-transform:uppercase}
.fin-field input,.fin-field select,.fin-field textarea{font:inherit;font-size:15px;padding:11px 13px;
  border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);
  color:var(--ink);width:100%}
.fin-field input:focus,.fin-field select:focus,.fin-field textarea:focus{outline:none;
  border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.fin-field textarea{min-height:110px;resize:vertical}
.fin-radios{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.fin-radios label{display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:500;
  text-transform:none;letter-spacing:0}
.fin-radios input{width:auto}

/* review */
.fin-review{border-top:1px solid var(--line);padding-top:18px;margin-top:6px}
.fin-review-section{margin:0 0 18px}
.fin-review-section h3{margin:0 0 10px;font-size:14px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-muted)}
.fin-review-row{display:flex;justify-content:space-between;gap:16px;padding:8px 0;
  border-bottom:1px solid var(--line);font-size:14px}

/* buttons */
.fin-btns{display:flex;gap:12px;align-items:center;margin-top:22px;flex-wrap:wrap}
.fin-btn,.fin-btn-next,.fin-btn-back,.fin-btn-submit{display:inline-block;padding:12px 22px;
  border-radius:var(--radius);font-size:14.5px;font-weight:700;border:2px solid var(--line);
  background:transparent;color:var(--ink);cursor:pointer;font-family:inherit;text-decoration:none}
.fin-btn-next,.fin-btn-submit{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.fin-btn-next:hover,.fin-btn-submit:hover{filter:brightness(1.08)}
.fin-btn-back:hover{border-color:var(--accent);color:var(--accent)}
.fin-btn-submit{margin-left:auto}

.fin-disclaimer{margin-top:16px;font-size:12.5px;color:var(--ink-muted);line-height:1.6}
.fin-success{padding:20px;border-radius:var(--radius-lg);
  background:color-mix(in srgb,var(--ok) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);color:var(--ink)}

@media (max-width:620px){
  .fin-row{grid-template-columns:1fr}
  .fin-card{padding:18px}
  .fin-btn-submit{margin-left:0;width:100%;text-align:center}
}


/* ==========================================================================
   CONTACT — department is a segmented control instead of a select. Submitted
   values stay sales|parts|service|general so $dept_to_type still maps the CRM
   lead type. Recipients, subject string and CRM push are untouched.
   ========================================================================== */
.bl-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bl-seg label{display:block;position:relative;margin:0}
.bl-seg input{position:absolute;opacity:0;pointer-events:none}
.bl-seg span{display:block;text-align:center;padding:11px 8px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface);font-size:13.5px;font-weight:700;
  cursor:pointer;color:var(--ink)}
.bl-seg input:checked + span{border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
/* The real input is visually hidden, so keyboard focus needs its own ring. */
.bl-seg input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}

.contact-form,.contact-form-section{text-align:left}
.contact-tiles,.contact-info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  padding:0 0 8px;list-style:none;margin:0}
.contact-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:20px;text-align:left}
.contact-tile-icon{color:var(--accent);margin-bottom:10px}
.contact-tile-detail{color:var(--ink-muted);font-size:14px}
.contact-form-success{padding:16px 18px;border-radius:var(--radius);
  background:color-mix(in srgb,var(--ok) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);color:var(--ink);margin:0 0 18px}
.contact-form-error{padding:16px 18px;border-radius:var(--radius);
  background:color-mix(in srgb,var(--danger) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--danger) 30%,transparent);color:var(--ink);margin:0 0 18px}

@media (max-width:900px){ .contact-tiles,.contact-info-grid{grid-template-columns:1fr} }
@media (max-width:620px){ .bl-seg{grid-template-columns:1fr 1fr} }

@media (max-width:1100px){ .contact-tiles,.contact-info-grid{grid-template-columns:repeat(2,1fr)} }

@media (max-width:620px){
  /* Two-up tiles are too narrow for label and count on one line. */
  .bl-cat__label{flex-direction:column;align-items:flex-start;gap:2px;padding:12px;font-size:14px;line-height:1.25}
  .bl-cat__count{font-size:11.5px}
}

/* ==========================================================================
   FONT SWAP — main.css declares Lato with font-display:swap, so the browser
   paints a fallback immediately and swaps when Lato arrives. That is the right
   tradeoff (text readable at once) but the jump is very visible on large type
   like the header phone number, which reads as a glitch.

   Measured (on the digits-space-dash pattern shared by every store's phone
   number, e.g. "204 725-1003") at 100px/600: 635.0 in Lato vs 617.2 in Arial
   and in the system stack — Lato is 2.9% wider. Figures are tabular in Lato,
   so this holds regardless of which store's digits are on screen. A
   metric-matched fallback closes that gap so the swap no longer reflows the
   text; only the glyph shapes change, which is far harder to notice.

   Fonts are ready before first paint on a fast connection (measured 0ms after
   DOMContentLoaded), so this only shows on slower ones.
   ========================================================================== */
@font-face{
  font-family:'Lato-fallback';
  src:local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust:102.9%;
  font-display:swap;
}
body,
.bl-hdr__tel,
.bl-hdr__addr{font-family:Lato,'Lato-fallback',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}


/* ==========================================================================
   INVENTORY: pagination, result count, no-results and the closing CTA.
   These were styled by ID in the template's inline <style> and were missed when
   that block moved to this file, so the pager rendered as raw browser buttons.
   ========================================================================== */
#invCount{font-size:14px;color:var(--ink-muted);padding:2px 0 16px}
#invCount strong{color:var(--ink);font-weight:700}

#invPagination{display:flex;align-items:center;justify-content:center;gap:14px;
  padding:8px 0 40px}
#invPagination button{appearance:none;font:inherit;font-size:14px;font-weight:700;
  padding:10px 18px;border-radius:var(--radius);border:2px solid var(--line);
  background:var(--surface);color:var(--ink);cursor:pointer;transition:.15s}
#invPagination button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
#invPagination button:disabled{opacity:.4;cursor:default;border-color:var(--line);color:var(--ink-muted)}
#invPageInfo{font-size:14px;color:var(--ink-muted);min-width:110px;text-align:center}

#invNoResults{display:none;padding:44px 0;text-align:center}
#invNoResults h2{margin:0 0 8px;font-size:19px;font-weight:800!important;color:var(--ink);
  text-transform:none;font-family:inherit}
#invNoResults p{margin:0;color:var(--ink-muted);font-size:15px}

/* .inv-cta is used twice: once inside a card, once as this closing block.
   Scope the block treatment so the two do not fight. */
#invGrid ~ .inv-cta,
.inv-cta:not(.inv-card .inv-cta){background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:30px 24px;margin:0 0 48px;text-align:center}
.inv-cta p{margin:0 0 16px;color:var(--ink-muted);font-size:15.5px}

/* Anchor buttons outside .inv-card were still losing to main.css
   a,a:link,a:visited at (0,1,1) and rendering as underlined blue links.
   One rule at (0,2,1) covers every .inv-btn wherever it appears, instead of
   patching each context as it turns up. */
.text a.inv-btn,.text a.inv-btn:link,.text a.inv-btn:visited,
a.inv-btn,a.inv-btn:link,a.inv-btn:visited{
  display:inline-block;padding:12px 24px;border-radius:var(--radius);
  border:2px solid var(--accent);background:var(--accent);color:var(--on-accent);
  font-size:14.5px;font-weight:700;text-decoration:none;text-align:center}
.text a.inv-btn:hover,a.inv-btn:hover{filter:brightness(1.08);color:var(--on-accent);
  border-color:var(--accent)}
/* Inside a card it stays the quiet outline variant. */
.text .inv-card a.inv-btn,.inv-card a.inv-btn{padding:9px 15px;font-size:13px;
  background:transparent;border-color:var(--line);color:var(--ink)}
.text .inv-card a.inv-btn:hover,.inv-card a.inv-btn:hover{border-color:var(--accent);color:var(--accent);filter:none}

@media (max-width:620px){
  #invPagination{gap:8px}
  #invPagination button{padding:9px 13px;font-size:13px}
  #invPageInfo{min-width:0;font-size:13px}
}


/* ==========================================================================
   Selectors that existed in the templates' inline <style> blocks and were
   missed when those moved here. Found by diffing every selector in the
   pre-reskin inline CSS against this file, filtered to ones whose class or id
   is still present in today's markup.
   ========================================================================== */

/* Inventory filter container. .cf-fields styles the inner grid; this is the
   band it sits in. */
/* (the filter bar's own layout lives with the rest of its rules above) */
#invFilters input::placeholder{color:var(--ink-muted)}

/* Vehicle detail spec table cells. */
.spec-label{color:var(--ink-muted);font-weight:600;width:35%;min-width:100px}
.spec-value{color:var(--ink);word-break:break-word}

/* Financing stepper: the numbered circle and its label. The reskin styled the
   .fin-step-dot pill but left these two children unstyled, so the number sat
   as bare text instead of in a disc. */
.fin-step-dot .dot{width:26px;height:26px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:700;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-muted);
  flex:none;transition:.2s}
.fin-step-dot.active .dot{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.fin-step-dot.done .dot{background:var(--ok);border-color:var(--ok);color:var(--on-accent)}
.fin-step-dot .dot-label{font-size:13.5px;color:var(--ink-muted);transition:color .2s}
.fin-step-dot.active .dot-label{color:var(--ink);font-weight:700}
.fin-step-dot.done .dot-label{color:var(--ok)}

/* Financing review rows. */
.fin-review-row .rlabel{color:var(--ink-muted)}
.fin-review-row .rvalue{color:var(--ink);font-weight:600;text-align:right;max-width:55%}
.fin-review-row .rvalue.empty{color:var(--ink-muted);font-style:italic;font-weight:400}

@media (max-width:620px){
  .fin-step-dot .dot{width:22px;height:22px;font-size:12px}
  .fin-step-dot .dot-label{font-size:12px}
}

/* ===== SERVICE PAGE =====
   Minimal-typographic: tokens only, no filled panels. Every selector is scoped
   with .text so it outranks the legacy .text p / .text ul / .text li rules that
   main.css carries over from the PowerGo theme — those are (0,1,1), these are
   (0,2,0) or better. */
.text .svc{max-width:920px}
.text .svc p{max-width:68ch}
.text .svc-lede{font-size:clamp(17px,2vw,20px);line-height:1.5;font-weight:500;
  color:var(--ink);max-width:56ch;margin:0 0 28px}
.text .svc-shot{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:6px;
  display:block;margin:0 0 32px}

/* Hours, phone, booking — the three things a service visitor came for, on one
   hairline-bounded row instead of three colored blocks in the sidebar. */
.text .svc-facts{display:grid;grid-template-columns:1.7fr 1fr 1.2fr;gap:32px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:20px 0;margin:0 0 40px}
.text .svc-fact{display:flex;flex-direction:column;gap:6px;min-width:0}
.text .svc-fact-label{font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;color:var(--ink-muted)}
.text .svc-fact-value{font-size:14.5px;line-height:1.45;color:var(--ink)}
.text .svc-fact-value a{color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--accent);padding-bottom:1px}
.text .svc-fact-value a:hover{color:var(--accent)}

/* The one accent mark on the page: a short cyan rule above each section head. */
.text .svc-h2{font-size:clamp(18px,2vw,22px);font-weight:800;letter-spacing:-.01em;
  color:var(--brand);margin:0 0 12px;padding-top:14px;position:relative}
.text .svc-h2::before{content:"";position:absolute;top:0;left:0;width:32px;height:2px;
  background:var(--accent)}

.text ul.svc-list{list-style:none;margin:20px 0 28px;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
/* main.css hangs a FontAwesome chevron off every list item via
   .text:not(.reset-text) ul:not(.woocommerce-error):not(.client-grid):not(.client-flex) > li::before
   — five classes deep, so a plain .text .svc-list li loses. The :not() chain is
   repeated here to outrank it and let the list read as a typographic index. */
.text:not(.reset-text) ul.svc-list:not(.woocommerce-error):not(.client-grid):not(.client-flex) > li{
  padding:9px 0;border-bottom:1px solid var(--line);
  font-size:14.5px;color:var(--ink);background:none;list-style:none;margin-top:0}
.text:not(.reset-text) ul.svc-list:not(.woocommerce-error):not(.client-grid):not(.client-flex) > li::before{
  content:none;display:none}

.text .svc-close{margin-top:44px;padding-top:32px;border-top:1px solid var(--line)}

@media (max-width:760px){
  .text .svc-facts{grid-template-columns:1fr;gap:18px}
  .text .svc-list{grid-template-columns:1fr}
  .text .svc-shot{aspect-ratio:16/9}
}