/* Measurements from the supplied 1920px, 768px and 375px XD artboards.
   Each breakpoint has its own layout; intermediate widths remain fluid. */
:root { --gold-strong: #ffc551; --navy: #304659; --content: 1640px; --header-mobile: 55px; }
img { min-width: 0; }
.container, .container-wide { width: min(calc(100% - 14.583333%), 1640px); }
.nav-shell { width: calc(100% - 76px); min-height: 117px; grid-template-columns: minmax(192px, 1fr) minmax(320px, 647px) minmax(420px, 1fr); gap: 0; }
.utility-bar { height: 41px; min-height: 41px; }
.utility-inner { height: 41px; padding-right: 22px; gap: 29px; }
.header-search { transform: translateY(10px); }
.header-search .search-input { height: 57px; font-size: 18px; }
.main-nav { gap: 42px; padding-left: 40px; }
.main-nav a { font-size: 20px; font-weight: 700; }
.main-nav a[aria-current='page'] { padding-block: 4px; }
.home-hero { min-height: 942px; background-position: center 38px; background-size: auto 1080px; }
.home-hero::before { content: ''; position: absolute; inset: auto 0 0 auto; width: 72%; height: 340px; background: rgb(255 197 81 / .35); clip-path: polygon(100% 0,100% 100%,0 100%); }
.home-hero::after { right: 0; width: 71%; height: 171px; }
.hero-copy { top: 424px; left: max(10.9375%, calc((100% - 1640px) / 2 + 70px)); width: 400px; }
.hero-copy h1 { font-size: 36px; line-height: 51px; margin-bottom: 20px; }
.hero-copy .button { min-width: 217px; min-height: 46px; padding: 8px 24px; font-size: 24px; }
.category-section { padding: 50px 0 82px; }
.category-section h2 { font-size: 48px; line-height: 58px; margin-bottom: 19px; }
.category-grid { gap: 20px 16px; }
.category-card { position: relative; font-size: 24px; line-height: 29px; }
.category-card__image { aspect-ratio: 1; border-radius: 10px; }
.category-card__image img { width: 84%; height: 84%; margin-top: -6%; }
.category-card strong { position: absolute; left: 0; right: 0; bottom: 29px; margin: 0; }
.category-card:hover .category-card__image { transform: none; box-shadow: none; }
.button:hover { transform: none; }
.site-footer { padding: 43px 0 54px; }
.footer-grid { grid-template-columns: 319fr 329fr 358fr 362fr 260fr; gap: 0; align-items: start; }
.footer-primary, .footer-support, .footer-account { padding-top: 18px; }
.footer-primary { padding-left: 13px; }
.footer-links { gap: 16px; font-size: 13px; line-height: 15px; }
.footer-title { font-size: 24px; line-height: 29px; margin-bottom: 10px; }
.footer-social { padding-top: 10px; }
.social-row { flex-wrap: nowrap; gap: 11px; }
.social-row a { width: 42px; height: 42px; flex: 0 0 42px; background: transparent; border-radius: 0; }
.social-row img { width: 100%; height: 100%; }
.footer-chat-time { font-size: 15px; line-height: 18px; }
.footer-chat .button { min-height: 21px; padding: 2px 10px; width: 80px; font-size: 13px; }
.copyright { margin-top: 49px; padding-top: 17px; font-size: 13px; line-height: 24px; }
.chat-fab { width: 80px; height: 80px; right: 40px; bottom: 26px; }
.inner-hero { min-height: 354px; }
.inner-hero .container { padding-top: 103px; }
.inner-hero h1 { font-size: 100px; }
.inner-hero::before, .inner-hero::after { right: 0; bottom: 0; transform: none; clip-path: polygon(100% 0,100% 100%,0 100%); }
.inner-hero::before { width: 72%; height: 338px; }
.inner-hero::after { width: 71%; height: 169px; }
.content-main { padding-top: 44px; padding-bottom: 68px; }
.breadcrumbs { font-size: 14px; line-height: 17px; margin-bottom: 21px; }
.content-columns { grid-template-columns: minmax(0,1fr) 398px; gap: 16px; }
.about-copy { font-size: 18px; line-height: 25px; }
.page-title { font-size: 48px; line-height: 58px; margin-bottom: 10px; }
.content-ad-stack { display: flex; flex-direction: column; gap: 18px; }
.side-ad { min-height: 737px; padding: 25px 33px 33px; }
.content-ad-stack .register-ad { min-height: 326px; padding: 52px 33px 33px; }
.register-ad img { width: 280px; }
.register-ad .button, .side-ad .button { min-height: 46px; font-size: 24px; }
.section-ribbon { margin: 38px 0 79px; }
.section-ribbon span { font-size: 36px; line-height: 44px; min-height: 59px; padding: 7px 16px; border-radius: 0 32px 32px 0; }
.section-ribbon::after { height: 6px; }
.feature-grid { gap: 38px 18px; margin-bottom: 64px; }
.feature-item svg, .feature-item .feature-icon { width: 180px; height: 148px; margin: 0 auto 18px; }
.feature-item h3 { font-size: 22px; line-height: 26px; margin-bottom: 8px; }
.feature-item p { font-size: 18px; line-height: 25px; max-width: 275px; }
.category-main { padding: 55px 0 38px; }
.category-main .page-title { margin: 39px 0; }
.subcategory-grid { gap: 16px; }
.subcategory-card { position: relative; font-size: 24px; }
.subcategory-card strong { position: absolute; left: 8px; right: 8px; bottom: 29px; margin: 0; }
.subcategory-card .category-card__image img { width: 84%; height: 84%; }
@media (min-width:1100px) and (max-width:1700px) {
    .nav-shell { grid-template-columns: 1fr 35% 1fr; }
    .main-nav { gap: clamp(14px,2vw,35px); padding-left: 24px; }
    .main-nav a { font-size: clamp(13px,1.05vw,18px); }
    .home-hero { min-height: 49.0625vw; background-size: auto 56.25vw; }
    .hero-copy { top: 22.0833vw; }
    .content-columns { grid-template-columns: minmax(0,1fr) 24.27%; }
    .footer-grid { gap: 15px; }
    .social-row { gap: 7px; }
    .social-row a { width: 30px; height: 30px; flex-basis: 30px; }
}

/* Product details desktop artboard includes a full vehicle selector and a tall,
   two-column product overview before the information tabs. */
@media (min-width: 1100px) {
    .product-main { padding-top: 64px; }
    .product-vehicle-strip {
        min-height: 219px;
        margin-top: 26px;
        margin-bottom: 40px;
        padding: 34px 42px;
        align-items: center;
    }
    .product-vehicle-strip > div:first-child { align-self: center; }
    .product-vehicle-strip h2 { font-size: 30px; line-height: 36px; margin-bottom: 12px; }
    .product-vehicle-strip .field select { min-height: 54px; font-size: 18px; }
    .product-vehicle-strip .button { min-height: 54px; font-size: 18px; }
    .product-main .product-summary { min-height: 789px; }
    .product-main .product-panel[data-product-panel="details"] {
        display: grid;
        grid-template-columns: 812px minmax(0, 1fr);
        column-gap: 44px;
        align-items: start;
        min-height: 725px;
        padding: 38px 0 22px;
        background: #f3f3f3;
    }
    .product-main .product-panel[data-product-panel="details"] h2 {
        grid-column: 1 / -1;
        grid-row: 1;
        margin: 0 0 18px;
        padding: 8px 16px;
        background: #e7e7e7;
        border-left: 8px solid var(--gold-strong);
        color: var(--charcoal);
        font-size: 26px;
        line-height: 32px;
    }
    .product-main .product-panel[data-product-panel="details"] img {
        grid-column: 1;
        grid-row: 2 / span 5;
        width: 812px;
        height: 604px;
        object-fit: cover;
        margin: 0;
    }
    .product-main .product-panel[data-product-panel="details"] p,
    .product-main .product-panel[data-product-panel="details"] ul,
    .product-main .product-panel[data-product-panel="details"] h3 {
        grid-column: 2;
    }
    .product-main .product-panel[data-product-panel="details"] p { grid-row: 2; }
    .product-main .product-panel[data-product-panel="details"] ul { grid-row: 3; }
    .product-main .product-panel[data-product-panel="details"] h3 { grid-row: 4; }
}
@media (max-width: 575px) {
    .product-vehicle-strip { display: none; }
    .product-main { padding-bottom: 46px; }
}
@media (min-width:1701px) {
    .results-main .product-card__image { height: 260px; }
    .results-main .product-card h2 { font-size: 24px; }
    .results-main .product-card__type { font-size: 18px; }
}
@media (min-width:576px) and (max-width:1099px) {
    .container, .container-wide { width: calc(100% - 160px); }
    .site-header--overlay { position: absolute; background: transparent; }
    .utility-bar { display: none; }
    .nav-shell { width: 100%; min-height: 55px; grid-template-columns: 25% minmax(0,1fr) 20%; padding: 0 15px; gap: 0; }
    .brand { width: 96px; }
    .header-search { transform: translateY(12px); }
    .header-search .search-input { height: 35px; font-size: 15px; }
    .header-search .advance-link { margin-top: 10px; font-size: 13px; }
    .menu-toggle { grid-column: 3; justify-self: end; }
    .main-nav { top: 55px; padding: 22px; }
    .home-hero { min-height: 541px; background-size: auto 541px; background-position: center top; }
    .home-hero::before { display: none; }
    .hero-copy { top: 207px; left: 10%; width: 300px; }
    .hero-copy h1 { font-size: 24px; line-height: 29px; margin-bottom: 8px; }
    .hero-copy .button { min-width: 172px; min-height: 33px; font-size: 20px; }
    .category-section { padding: 16px 0 17px; }
    .category-section h2 { font-size: 24px; line-height: 29px; margin-bottom: 6px; }
    .category-grid { gap: 8px; }
    .category-card { font-size: 15px; line-height: 18px; }
    .category-card strong { bottom: 8px; }
    .site-footer { padding: 20px 0 22px; }
    .footer-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; position: relative; }
    .footer-primary { padding-left: 13px; }
    .footer-primary, .footer-support, .footer-account { padding-top: 8px; }
    .footer-links { gap: 15px; line-height: 15px; }
    .footer-title { font-size: 18px; line-height: 22px; margin-bottom: 7px; }
    .footer-social { position: absolute; right: 0; top: 137px; padding: 0; }
    .footer-social .footer-title { display: none; }
    .social-row { gap: 7px; }
    .social-row a { width: 25px; height: 26px; flex-basis: 25px; }
    .footer-chat-time { font-size: 13px; }
    .copyright { margin-top: 15px; padding-top: 8px; line-height: 24px; }
    .chat-fab { width: 40px; height: 40px; right: 27px; bottom: 28px; }
    .inner-hero { min-height: 209px; }
    .inner-hero .container { padding-top: 52px; }
    .inner-hero h1 { font-size: 48px; }
    .inner-hero::before { height: 155px; }
    .inner-hero::after { height: 76px; }
    .content-columns { grid-template-columns: minmax(0,1fr) 146px; gap: 8px; }
    .page-title { font-size: 36px; line-height: 43px; }
    .about-copy { font-size: 16px; line-height: 21px; }
    .side-ad { min-height: 275px; padding: 12px; }
    .content-ad-stack .register-ad { min-height: 123px; padding: 12px; }
    .register-ad img { width: 120px; }
    .register-ad .button,.side-ad .button { min-height: 24px; font-size: 12px; padding: 4px; }
    .section-ribbon { margin: 28px 0 35px; }
    .section-ribbon span { min-height: 43px; font-size: 23px; line-height: 29px; }
    .feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); margin-bottom: 38px; }
    .feature-item svg,.feature-item .feature-icon { width: 95px; height: 76px; margin-bottom: 12px; }
    .feature-item h3 { font-size: 18px; line-height: 22px; }
    .feature-item p { font-size: 15px; line-height: 20px; }
    .category-main { padding: 24px 0 25px; }
    .results-layout, .results-content, .product-grid, .product-card { min-width: 0; }
    .results-layout { grid-template-columns: 210px minmax(0,1fr); }
    .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .result-actions { min-width: 0; flex-wrap: wrap; }
    .result-actions .view-link { display: none; }
    .category-main .page-title { margin: 20px 0 22px; font-size: 36px; }
    .subcategory-grid { gap: 8px; }
    .subcategory-card { font-size: 15px; }
    .subcategory-card strong { bottom: 10px; }
}
@media (max-width:575px) {
    html:has(body.overlay-page) { height: 812px; overflow: hidden; }
    .overlay-page { position: fixed; inset: 0; width: 100%; height: 812px; min-height: 812px; overflow: hidden; background: #303030; }
    .overlay-page .site-header { background: #535353; }
    .overlay-main { min-height: 757px; height: 757px; display: block; padding: 14px 24px; }
    .overlay-main .dialog-card { width: 100%; padding: 0; border-radius: 0; background: transparent; box-shadow: none; color: #fff; }
    .overlay-main .dialog-card h1 { margin: 0 0 18px; color: #fff; font-family: Lato, Arial, sans-serif; font-size: 30px; line-height: 36px; }
    .overlay-main .dialog-card .form-grid { display: grid; gap: 12px; margin: 0 0 28px; }
    .overlay-main .dialog-card .field { gap: 0; }
    .overlay-main .dialog-card .field label { display: none; }
    .overlay-main .dialog-card .field input, .overlay-main .dialog-card .field select { min-height: 60px; border: 0; border-radius: 0; padding: 16px 24px; font-size: 18px; }
    .overlay-main .dialog-card .search-mode-links { justify-content: center; gap: 12px; flex-wrap: wrap; }
    .overlay-main .dialog-card .search-mode-links .button { min-height: 42px; font-size: 17px; }
    .overlay-main .dialog-card .button--wide { min-height: 52px; }
    .container, .container-wide { width: calc(100% - 34px); }
    .utility-bar { display: none; }
    .nav-shell { width: 100%; min-height: 55px; padding: 0 8px 0 15px; grid-template-columns: minmax(0,1fr) 46px 46px; }
    .brand { width: 96px; }
    .main-nav { top: 55px; padding: 22px; }
    .main-nav a { font-size: 18px; }
    .home-hero { min-height: 584px; background-size: auto 639px; background-position: center bottom; }
    .home-hero::before { display: none; }
    .hero-copy { top: auto; bottom: 33px; left: 27px; width: calc(100% - 42px); }
    .hero-copy h1 { font-size: clamp(29px,9.6vw,42px); line-height: 1.416667; margin-bottom: 20px; }
    .hero-copy .button { min-width: 217px; min-height: 46px; font-size: 24px; }
    .category-section { padding: 16px 0 101px; }
    .category-section h2 { font-size: clamp(29px,9.6vw,42px); line-height: 43px; margin-bottom: 16px; }
    .category-grid { column-gap: 10px; row-gap: 20px; }
    .category-card { font-size: 15px; line-height: 18px; }
    .category-card__image { aspect-ratio: 166 / 160; }
    .category-card__image img { width: 75%; height: 75%; margin: 0; }
    .category-card strong { position: static; display: block; margin-top: 6px; min-height: 18px; }
    .category-card:first-child .category-card__image { width: calc(100% - 5px); }
    .site-footer { padding: 19px 0 20px; font-size: 13px; }
    .site-footer > .container, .site-footer > .container-wide { width: calc(100% - 32px); }
    .footer-grid { grid-template-columns: 152fr 170fr; gap: 20px 20px; }
    .footer-primary, .footer-support, .footer-account, .footer-social { padding: 0; }
    .footer-primary { padding-left: 8px; }
    .footer-primary li:has(a[href^='services']), .footer-support li:has(a[href='sitemap.html']) { display: none; }
    .footer-links { font-size: 13px; line-height: 25px; gap: 0; }
    .footer-support a[href='faq.html'] { display: block; max-width: 112px; }
    .footer-title { font-size: 18px; line-height: 22px; margin-bottom: 7px; }
    .footer-social { align-self: end; }
    .social-row { display: grid; grid-template-columns: repeat(3,42px); gap: 8px 11px; }
    .social-row a { width: 42px; height: 42px; }
    .footer-chat-time { font-size: 13px; margin-bottom: 9px; gap: 13px; }
    .footer-chat .button { min-height: 21px; }
    .copyright { margin-top: 26px; padding-top: 6px; font-size: 13px; line-height: 19px; }
    .chat-fab { position: fixed; width: 40px; height: 40px; right: 11px; bottom: 12px; }
    .content-main { padding: 22px 0 18px; }
    .content-main > .container, .blog-main > .container { width: calc(100% - 54px); }
    .content-columns { display: block; }
    .content-ad-stack { display: none; }
    .blog-layout { display: flex; flex-direction: column; gap: 0; }
    .blog-layout > div { display: contents; }
    .blog-layout > div > .eyebrow { order: 1; }
    .blog-layout > div > .blog-section-title { order: 2; }
    .blog-layout > div > .post-grid { order: 3; }
    .blog-layout > div > .show-more-wrap { display: none; }
    .blog-layout > div > section { order: 5; }
    .blog-layout > .blog-sidebar { display: contents; }
    .blog-layout > .blog-sidebar > .blog-ad { order: 4; }
    .blog-layout > .blog-sidebar > .ribbon-title { order: 6; }
    .blog-layout > .blog-sidebar > .featured-list { order: 7; }
    .blog-layout > * { order: initial !important; }
    .blog-layout > div { display: block; }
    .blog-layout > .blog-sidebar { display: block; }
    .blog-hero { min-height: 543px; }
    .blog-main { padding-bottom: 0; }
    .post-card img, .featured-card img { aspect-ratio: 302 / 181; height: auto; object-fit: cover; }
    .blog-ad { min-height: 361px; }
    .content-main .breadcrumbs { font-size: 13px; line-height: 16px; margin-bottom: 0; }
    .page-title { font-size: 36px; line-height: 43px; margin-bottom: 0; }
    .about-copy { font-size: 15px; line-height: 20px; margin-bottom: 16px; }
    .mobile-register-ad { min-height: 252px; padding: 54px 25px 23px; margin: 16px 0 55px; gap: 38px; }
    .mobile-register-ad img { width: 222px; }
    .register-ad .button { min-height: 52px; font-size: 24px; }
    .section-ribbon { margin: 0 0 29px; }
    .section-ribbon span { min-height: 43px; padding: 8px 16px; font-size: 24px; line-height: 28px; }
    .section-ribbon::after { height: 4px; min-width: 28px; }
    .feature-grid, .feature-grid--three { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px 18px; margin-bottom: 35px; }
    .feature-item:last-child:nth-child(odd) { grid-column: auto; width: auto; justify-self: stretch; }
    .feature-item svg,.feature-item .feature-icon { width: 95px; height: 69px; margin: 0 auto 10px; }
    .feature-item h3 { font-size: 18px; line-height: 23px; margin-bottom: 5px; }
    .feature-item p { font-size: 15px; line-height: 20px; }
    .category-main .page-title { margin: 0 0 11px; font-size: 34px; line-height: 41px; }
    .category-main { padding-bottom: 0; }
    .subcategory-grid { gap: 20px 10px; }
    .subcategory-card { font-size: 16px; }
    .subcategory-card strong { position: static; margin-top: 5px; }
    .subcategory-card .category-card__image { aspect-ratio: 1; }
    .subcategory-card .category-card__image img { width: 85%; height: 85%; margin: 0; }
    .results-main .vehicle-strip { min-height: 249px; }
    .results-main .product-card { min-height: 350px; }
}