/* Custom CSS - Extracted from inline styles */

/* Image sizing */
img:is([sizes="auto" i], [sizes^="auto," i]) {
    contain-intrinsic-size: 3000px 1500px;
}

/* Page-specific product styles */
.page-id-2914 .product-sum.purple {
    background-color: #7B4C9E !important;
}

.page-id-2914 .evx-product.purple {
    border: solid 3px #7B4C9E !important;
}

.page-id-2914 .product-sum.purple p {
    color: #FFF;
}

.page-id-2914 .evx-product.purple .ev-product-con h2.text-blue {
    color: #FFF !important;
}

.page-id-2914 .product-sum.altBlue {
    background-color: #157CBE !important;
}

.page-id-2914 .evx-product.altBlue {
    border: solid 3px #157CBE !important;
}

.page-id-2914 .product-sum.altBlue p {
    color: #FFF;
}

.page-id-2914 .evx-product.altBlue .ev-product-con h2.text-blue {
    color: #FFF !important;
}

.page-id-2914 .text-blue {
    color: #FFF !important;
}

.page-id-2914 .col-md-5>h2:nth-child(1)>span {
    color: #0d5c93 !important;
}

.page-id-2914 .EVX-3p-head>h2:nth-child(1)>span:nth-child(1),
.page-id-2914 .EVX-3p>ul:nth-child(1)>li:nth-child(1)>span:nth-child(1),
.page-id-2914 .EVX-3p>ul:nth-child(1)>li:nth-child(2)>span:nth-child(1),
.page-id-2914 .EVX-3p>ul:nth-child(1)>li:nth-child(3)>span:nth-child(1) {
    color: #FFF !important;
}

/* Main custom styles */
.page-id-2902 .main-title2 {
    border-top: 4px solid #0d5c93;
    border-bottom: 4px solid #0d5c93;
    line-height: 1.0625;
    margin-top: 50px;
}

.dropdown-parent {
    background-color: #0d5c93 !important;
}

.why-title,
.illustration-title,
.sec-title h2 {
    border-top: 4px solid #0d5c93 !important;
    border-bottom: 4px solid #0d5c93 !important;
}

.yellow-btn,
.retailer-btn {
    background-color: #cc0e0e !important;
    border: 1px solid #cc0e0e !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 8px rgba(204, 14, 14, 0.2) !important;
}

/* Submit button - using subtle red accent */
#gform_submit_button_1 {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%) !important;
    border: 2px solid #b91c1c !important;
    color: #fff !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(185, 28, 28, 0.2) !important;
}

/* Improved hover effects */
.yellow-btn:hover,
.retailer-btn:hover {
    background-color: #8a0909 !important;
    border-color: #8a0909 !important;
    box-shadow: 0 4px 16px rgba(138, 9, 9, 0.3) !important;
    transform: translateY(-2px) !important;
    outline: none !important;
}
.yellow-btn:focus,
.retailer-btn:focus,
.yellow-btn:active,
.retailer-btn:active {
    background-color: #8a0909 !important;
    border-color: #8a0909 !important;
    outline: none !important;
    box-shadow: 0 4px 16px rgba(138, 9, 9, 0.3) !important;
}

/* Retailers Grid Styles */
.retailers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    padding: 20px 0;
}

.retailers-grid .each {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.retailers-grid .img-con {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
}

.retailers-grid .img-con img {
    max-width: 100%;
    height: auto;
    max-height: 80px;
    object-fit: contain;
}

.retailers-grid .retailer-btn {
    padding: 14px 40px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    width: 100%;
    max-width: 220px;
    text-align: center;
}

@media (max-width: 768px) {
    .retailers-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .retailers-grid .retailer-btn {
        font-size: 18px !important;
        padding: 16px 40px !important;
    }
}

#gform_submit_button_1:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    border-color: #dc2626 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(185, 28, 28, 0.4) !important;
}

header .desktop-nav-wrap .primary-navigation .primary-menu-container #primary-menu-list .menu-item.menu-item-has-children .sub-menu {
    background: #0d5c93;
}

.main-carousel h4 {
    color: #0d5c93 !important;
}

.pilled-list a {
    transition: all 0.3s ease !important;
}

.pilled-list a:hover {
    background: #0d5c93 !important;
    transform: translateX(5px) !important;
}

.find-product-banner a.yellow-btn {
    margin-top: 20px;
}

.why-section .yellow-btn {
    display: block;
    width: fit-content;
    clear: both;
    margin-top: 20px !important;
    background-color: #cc0e0e !important;
    border-color: #cc0e0e !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 8px rgba(204, 14, 14, 0.2) !important;
}

.why-section .yellow-btn:hover,
.why-section .yellow-btn:focus,
.why-section .yellow-btn:active {
    background-color: #8a0909 !important;
    border-color: #8a0909 !important;
    outline: none !important;
    box-shadow: 0 4px 16px rgba(138, 9, 9, 0.3) !important;
    transform: translateY(-2px) !important;
}

@media (max-width: 768px) {
    .home .why-section {
        text-align: center;
    }
}

.home .ev-section h1 {
    font-size: 70px !important;
}

.home .ev-section p {
    font-size: 38px !important;
}

.home .ev-section img {
    height: 80px !important;
    width: auto !important;
}

header {
    padding: 10px 60px 10px 60px;
}

.header-logos {
    margin: 0 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.header-logos:hover {
    background-color: transparent !important;
    transform: scale(1.08) !important;
}

.gtf-logo {
    background: url("images/icon-bg-1.png") !important;
    background-size: contain !important;
    font-size: 0;
    width: 125px;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.home header .gtf-logo,
.home .header-logos .gtf-logo {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}

.home header .logo img,
.page-id-2977 header .logo img,
.page-id-about header .logo img,
.products-page header .logo img,
.contact-us-page header .logo img {
    filter: brightness(0) invert(1) !important;
}

.products-page header,
.contact-us-page header,
.about-page header,
.legal-page header {
    background-color: #0d5c93 !important;
    background-image: none !important;
}

.oem-logo {
    background: url("images/icon-bg-2.png") !important;
    background-size: contain !important;
    font-size: 0;
    width: 110px;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.evx-logo {
    background: url("images/icon-bg-3.png") !important;
    background-size: contain !important;
    font-size: 0;
    width: 55px;
    background-repeat: no-repeat !important;
    margin-left: 20px;
    background-position: center !important;
}

.command-logo {
    background: url("images/icon-bg-4.png") !important;
    background-size: contain !important;
    font-size: 0;
    width: 120px;
    background-repeat: no-repeat !important;
    margin-left: 20px;
    background-position: center !important;
}

.header-logos:not(#menu-item-2615) .sub-menu a {
    max-width: 200px;
    text-wrap: wrap;
    height: auto !important;
    line-height: 1.5em !important;
    padding-top: 8px !important;
    padding-bottom: 10px !important;
}

.header-logos#menu-item-3137 .sub-menu {
    margin-left: -40px;
}

.header-logos#menu-item-3108 .sub-menu {
    margin-left: -63px;
}

.header-logos#menu-item-1989 .sub-menu {
    margin-left: -30px;
}

.header-logos a {
    text-align: center;
}

@media (max-width: 998px) {
    .header-logos {
        background-image: none !important;
        font-size: 22px;
        margin-left: 0;
    }
}

.swiper-button-prev svg,
.swiper-button-next svg {
    display: none;
}

.desktop-nav-wrap select {
    font-family: HelveticaNeueLTStd-MdCn;
    font-size: 20px;
    border: none;
    background-color: #0d5c93;
    margin: 0 auto;
    display: block;
    margin-top: 25px;
    margin-bottom: 25px;
    display: none;
    transition: all 0.3s ease;
}

.desktop-nav-wrap select:hover {
    background-color: #0a4a6e;
}

@media (max-width: 1000px) {
    .pll-parent-menu-item {
        display: none;
    }

    .desktop-nav-wrap select,
    header .hamburger {
        display: block;
    }

    .desktop-nav-wrap .primary-navigation .primary-menu-container #primary-menu-list .menu-item.current-menu-item>a {
        color: #000 !important;
    }
}

body.logged-in header {
    top: 30px;
}

.yellow-btn {
    text-transform: uppercase !important;
}

.product-listing .yellow-btn {
    background-color: #cc0e0e !important;
    border-color: #cc0e0e !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 8px rgba(204, 14, 14, 0.2) !important;
}

.product-listing .yellow-btn:hover,
.product-listing .yellow sweden-btn:focus,
.product-listing .yellow-btn:active {
    background-color: #8a0909 !important;
    border-color: #8a0909 !important;
    outline: none !important;
    box-shadow: 0 4px 16px rgba(138, 9, 9, 0.3) !important;
    transform: translateY(-2px) !important;
}

.evx-banner .yellow-btn {
    margin: 40px auto 20px auto !important;
}

.page-id-2977 .home-slider .slide {
    padding: 40px 0px !important;
}

.page-id-2977 .engineerd-text h4::after {
    display: none;
}

.page-id-2914 .vehicle-selector-nav {
    display: none;
}

.evx-page {
    padding-top: 60px;
}

.evx-product .product-sum p {
    max-width: 100%;
}

.marker-wrap .marker h4 a {
    color: #3cb0d0;
    max-width: 140px;
    display: block;
    margin: 0 auto;
    transition: color 0.3s ease;
}

.marker-wrap .marker h4 a:hover {
    color: #2a8aa8;
}

/* Correct order of steps on mobile */
.ev-steps.mobile {
    display: none;
}

@media (max-width: 768px) {
    .ev-steps:not(.mobile) {
        display: none;
    }

    .ev-steps.mobile {
        display: block;
    }
}

/* Fix global slash issue */
.slash-fix {
    font-size: 80%;
    margin-top: -15px;
    display: inline-block;
    vertical-align: middle;
}

/* Fix car hotspots */
@media (max-width: 1380px) {
    .newgen-section .col-md-6 {
        width: 100%;
        max-width: 100%;
    }
}

/* Banners templates */
.oem-banner {
    margin: 200px 0;
    background-image: url(images/bg-hero-main.jpg);
    background-size: cover;
}

.oem-banner .container {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 60px 20px;
}

.oem-banner .container .banner-image {
    width: 50%;
}

.oem-banner .container .banner-image img {
    width: 100%;
}

.oem-banner .container .text {
    color: #fff;
    text-align: center;
}

.oem-banner .container .text h1 {
    font-size: 5rem;
    font-weight: 300;
}

.oem-banner .container .text p {
    font-size: 2.3rem;
    line-height: 1.4em;
    margin: 20px 0;
}

.oem-banner .container .text .banner-cta {
    background: #000;
    padding: 10px 20px;
    display: inline-block;
    color: #fff;
    text-transform: uppercase;
    border-radius: 18px 0px 18px 0px;
    transition: all 0.3s ease;
}

.oem-banner .container .text .banner-cta:hover {
    background: #0d5c93;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .oem-banner .container {
        flex-wrap: wrap;
        justify-content: center;
    }

    .oem-banner .container .banner-image {
        width: 100%;
    }
}

.gtf-banner {
    margin: 200px 0;
    background-image: url(images/bg-section-pattern.png);
    background-size: cover;
    background-position: top center;
}

.gtf-banner .container {
    display: flex;
    align-items: center;
    gap: 30px;
    padding-top: 2vw;
    padding-bottom: 28vw;
}

.gtf-banner .container .text {
    color: #fff;
    text-align: center;
    width: 100%;
}

.gtf-banner .container .text h1 {
    font-size: 4rem;
    font-weight: 300;
}

.gtf-banner .container .text p {
    font-size: 2.2rem;
    line-height: 1.4em;
    margin: 10px 0;
}

.gtf-banner .container .text .banner-cta {
    background: #000;
    padding: 10px 20px;
    display: inline-block;
    color: #fff;
    text-transform: uppercase;
    border-radius: 18px 0px 18px 0px;
    transition: all 0.3s ease;
}

.gtf-banner .container .text .banner-cta:hover {
    background: #0d5c93;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

@media (max-width: 998px) {
    .gtf-banner .container {
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
    }

    .gtf-banner .container .text {
        padding-top: 30px;
        padding-bottom: 200px;
        margin-top: -200px;
        background: #000000;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.53) 27%, rgba(0, 0, 0, 1) 58%, rgba(0, 0, 0, 1) 100%);
    }
}

@media (max-width: 768px) {
    .gtf-banner .container {
        flex-wrap: wrap;
        justify-content: center;
    }

    .gtf-banner .container .banner-image {
        width: 100%;
    }
}

/* Misc adjustments to OEM homepage */
.page-template-oem-home-template .product-video::before {
    display: none;
}

.page-template-oem-home-template .product-video img {
    height: 400px;
    object-fit: contain;
}

/* Product Line section */
.explore-product-line {
    border-bottom: 2px solid #0d5c93;
}

.protection-list ul li {
    font-family: 'galanogrotesque';
    letter-spacing: 0;
}

@media(max-width: 767px) {
    .where-to-buy-page .header-parent {
        margin-top: 0px !important;
    }

    .where-to-buy-page .header-parent .left-side .title .top {
        margin-top: 0px !important;
    }

    .where-to-buy-page h2.text-center {
        margin-top: 0px;
    }
}

@media(max-width: 728px) {
    .page-id-2977 .home-slider p.h4 {
        font-size: 1.7rem !important;
    }

    .parent-pageid-2977 section {
        background-image: none !important;
        background: #000;
    }

    .parent-pageid-2977 .product-img {
        max-width: 50%;
        margin: 0 auto;
    }

    .parent-pageid-2977 .explore-product-line h3 {
        font-size: 28px;
    }

    .parent-pageid-2977 .sub-title li {
        font-size: 20px !important;
    }
}

.parent-pageid-2977 .protection-list ul li {
    font-size: 20px;
}

/* Misc adjustments to EVX page */
.home .evx-banner h2 {
    font-size: 90px;
    justify-content: center;
}

.home .evx-banner p {
    font-size: 50px;
}

@media (max-width: 1500px) {
    .evx-banner h1,
    .evx-banner h2 {
        font-size: 90px;
    }

    .evx-banner p {
        font-size: 50px;
    }
}

@media (max-width: 992px) {
    .evx-banner h1,
    .evx-banner h2 {
        font-size: 65px;
    }

    .evx-banner h4 {
        font-size: 30px;
    }

    .evx-banner p {
        font-size: 33px;
    }

    .home .evx-banner h1,
    .home .evx-banner h2 {
        font-size: 65px;
    }

    .home .evx-banner p {
        font-size: 33px;
    }

    .home .evx-banner h4 {
        margin-bottom: 0;
    }
}

@media (max-width: 767px) {
    .home .evx-slide h2 {
        font-size: 48px;
    }

    .home .evx-slide p {
        font-size: 28px;
    }
}

.product-video-section div.col-md-12:nth-child(1) {
    text-align: center;
    margin-bottom: 50px;
}

.product-video .video-popup::before {
    display: none;
}

section.section-padding:nth-child(6) {
    padding: 20px 0px;
}

.product-video-info .title h2 {
    font-size: 64px !important;
}

.postid-2263.wp-embed-responsive .wp-embed-aspect-16-9 .wp-block-embed__wrapper::before {
    padding-top: 0px !important;
}

#menu-item-3108>ul:nth-child(2) {
    display: flex;
    min-width: 490px;
}

#menu-item-3360 a {
    max-width: 100% !important;
    width: fit-content;
}

/* Lazy rendering */
[data-wpr-lazyrender] {
    content-visibility: auto;
}

/* Navigation and Swiper styles */
.primary-navigation .menu-wrapper a {
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.primary-navigation .menu-wrapper a:hover {
    text-decoration: none !important;
    color: #0d5c93 !important;
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    display: block;
    background-color: black;
}

.vehicle-selector-nav {
    display: none;
}

.vehicle-selector-nav.in-content {
    display: flex;
    position: initial;
    flex-wrap: wrap;
}

.vehicle-selector-nav .text {
    min-width: 100%;
}

.vehicle-selector-nav.mobile.disable .mobile-arrow {
    display: none;
}

@media (max-width: 1100px) {
    .vehicle-selector-nav .text,
    .vehicle-selector-nav .nav-dropdown-parent .year-parent,
    .vehicle-selector-nav .nav-dropdown-parent .make-parent,
    .vehicle-selector-nav .nav-dropdown-parent .model-parent,
    .vehicle-selector-nav .nav-dropdown-parent select {
        min-width: 100%;
    }
}

@media (max-width: 350px) {
    .vehicle-selector-nav .text {
        padding-top: 7px;
    }
}

main {
    padding-top: 60px;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-illustration .swiper-slide {
    display: block;
    background: black;
}

.feature-product-parent {
    width: 100% !important;
    height: auto !important;
}

.vehicle-selector-nav {
    position: static;
    transform: none !important;
    background-color: #0d5c93;
}

.vehicle-selector-nav .text {
    color: #fff;
}

.vehicle-selector-nav .nav-dropdown-parent .year-parent,
.vehicle-selector-nav .nav-dropdown-parent .make-parent,
.vehicle-selector-nav .nav-dropdown-parent .model-parent {
    max-width: 320px;
    margin-right: 25px;
}

.vehicle-selector-nav .nav-dropdown-parent select {
    max-width: 320px !important;
    background: transparent !important;
    color: #fff;
    border-bottom: 3px solid #fff !important;
    transition: all 0.3s ease;
}

.vehicle-selector-nav .nav-dropdown-parent select:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.vehicle-selector-nav .nav-dropdown-parent select:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-bottom-color: #a8daff !important;
}

.vehicle-selector-nav .nav-dropdown-parent .go-button {
    background-color: #fff;
    color: #0d5c93;
    transition: all 0.3s ease;
    border: 2px solid #fff;
}

.vehicle-selector-nav .nav-dropdown-parent .go-button:hover {
    background-color: transparent;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Force remove blue outline and ensure smooth transitions */
a.yellow-btn,
button.yellow-btn,
.home .yellow-btn,
.home-slider .yellow-btn {
    outline: none !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

a.yellow-btn:hover,
button.yellow-btn:hover,
.home .yellow-btn:hover,
.home-slider .yellow-btn:hover,
a.yellow-btn:focus,
button.yellow-btn:focus,
.home .yellow-btn:focus,
.home-slider .yellow-btn:focus,
a.yellow-btn:active,
button.yellow-btn:active,
.home .yellow-btn:active,
.home-slider .yellow-btn:active {
    background-color: #8a0909 !important;
    border-color: #8a0909 !important;
    color: #fff !important;
    outline: none !important;
    box-shadow: 0 4px 16px rgba(138, 9, 9, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* Silver learn more button overrides */
.oem-slide .learn,
.home .oem-slide .learn {
    outline: none !important;
    transition: background-position 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    background: linear-gradient(90deg, #808285 0%, #fff 50%, #808285 100%) !important;
    background-size: 200% 100% !important;
    background-position: 0% 0% !important;
    box-shadow: none !important;
}

.oem-slide .learn span {
    position: relative !important;
    z-index: 2 !important;
}

.oem-slide .learn:hover,
.home .oem-slide .learn:hover {
    background-position: 100% 0% !important;
}

.oem-slide .learn:focus,
.home .oem-slide .learn:focus,
.oem-slide .learn:focus-visible,
.home .oem-slide .learn:focus-visible,
.oem-slide .learn:active,
.home .oem-slide .learn:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Red campaign button overrides */
.home .campaign-slide .yellow-btn,
.campaign-slide .yellow-btn {
    background-color: #cc0e0e !important;
    color: #fff !important;
    border: none !important;
    border-radius: 5px !important;
    padding: 13px 70px 15px !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
    box-shadow: 0 2px 8px rgba(204, 14, 14, 0.2) !important;
    transform: translateY(0) !important;
}

.home .campaign-slide .yellow-btn:hover,
.campaign-slide .yellow-btn:hover,
.home .campaign-slide .yellow-btn:focus,
.campaign-slide .yellow-btn:focus,
.home .campaign-slide .yellow-btn:focus-visible,
.campaign-slide .yellow-btn:focus-visible,
.home .campaign-slide .yellow-btn:active,
.campaign-slide .yellow-btn:active {
    background-color: #8a0909 !important;
    color: #fff !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 4px 16px rgba(138, 9, 9, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* EVX button overrides - same as red campaign button */
.evx-slide .yellow-btn,
.evx-banner .yellow-btn {
    background-color: #cc0e0e !important;
    color: #fff !important;
    border: none !important;
    border-radius: 5px !important;
    padding: 13px 70px 15px !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
    box-shadow: 0 2px 8px rgba(204, 14, 14, 0.2) !important;
    transform: translateY(0) !important;
}

.evx-slide .yellow-btn:hover,
.evx-banner .yellow-btn:hover,
.evx-slide .yellow-btn:focus,
.evx-banner .yellow-btn:focus,
.evx-slide .yellow-btn:focus-visible,
.evx-banner .yellow-btn:focus-visible,
.evx-slide .yellow-btn:active,
.evx-banner .yellow-btn:active {
    background-color: #8a0909 !important;
    color: #fff !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 4px 16px rgba(138, 9, 9, 0.3) !important;
    transform: translateY(-2px) !important;
    transform: none !important;
}