/*customer-overrides.css*/

:root {
    --harrier-lime: #dafa1d;
    --harrier-blue: #3f6679;
    --harrier-dark: #15191d;
    --harrier-muted: #737980
}

* {
    box-sizing: border-box
}

html, body {
    margin: 0;
    min-height: 100%;
    background: #fff;
    color: #202328
}

body {
    font-family: "Open Sans",Arial,sans-serif
}

#page {
    overflow: hidden;
    background: #fff
}

main {
    display: block
}

/* Harrier customer header */
.harrier-header {
    position: relative !important;
    height: 38px !important;
    min-height: 38px;
    background: var(--harrier-blue) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    z-index: 50
}

.harrier-logo-panel {
    position: absolute;
    z-index: 55;
    left: 0;
    top: 0;
    width: max(355px,calc((100vw - 1170px)/2 + 107px));
    height: 82px;
    background: var(--harrier-lime);
    clip-path: polygon(0 0,100% 0,86% 100%,0 100%);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px
}

    .harrier-logo-panel a {
        display: block;
        line-height: 1
    }

    .harrier-logo-panel img {
        display: block;
        width: 205px;
        max-width: 72%;
        height: auto
    }

.smg-brand-link {
    display: flex !important;
    align-items: center;
    text-decoration: none !important
}

.smg-brand {
    display: block;
    color: #15191d;
    font: 700 42px/1 "Saira Condensed",Arial,sans-serif;
    letter-spacing: 2px;
    white-space: nowrap
}

.harrier-top-strip {
    height: 38px;
    margin-left: 27%;
    color: #eaf0f3
}

.harrier-top-content {
    width: min(100% - 32px,1170px);
    height: 38px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 96px;
    font-family: "Saira Condensed",Arial,sans-serif;
    font-size: 15px
}

    .harrier-top-content p {
        margin: 0;
        color: #b8c8cf
    }

    .harrier-top-content strong {
        color: var(--harrier-lime);
        font-weight: 500
    }

.harrier-contact {
    display: flex;
    gap: 28px;
    color: #fff;
    font-weight: 600
}

    .harrier-contact i {
        margin-right: 6px;
        color: #c8d6dc
    }

.harrier-nav {
    height: 44px;
    background: #fff;
    position: relative;
    z-index: 45;
    border: 0;
    box-shadow: 0 1px 0 rgba(0,0,0,.04)
}

.harrier-nav-inner {
    height: 49px;
    width: min(100% - 32px,1546px);
    margin: 0 auto;
    padding-left: 463px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.harrier-menu {
    display: flex;
    align-items: stretch;
    gap: 0;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    height: 62px
}

    .harrier-menu li {
        display: flex !important;
        flex: 0 0 auto;
        align-items: stretch;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        border: 0 !important
    }

    .harrier-menu a {
        display: flex !important;
        align-items: center;
        padding: 0 16px !important;
        color: #191919 !important;
        text-decoration: none !important;
        text-transform: uppercase;
        font: 600 17px/1 "Saira Condensed",Arial,sans-serif;
        letter-spacing: .03em;
        white-space: nowrap;
        border: 0 !important;
        background: none !important
    }

        .harrier-menu a:hover, .harrier-menu li:first-child a {
            color: #789000 !important
        }

.harrier-actions {
    height: 62px;
    display: flex;
    align-items: center;
    gap: 24px
}

    .harrier-actions > a {
        position: relative;
        color: #111;
        font-size: 20px;
        text-decoration: none
    }

.action-count {
    position: absolute;
    right: -11px;
    top: -10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #55c866;
    color: #fff;
    font: 700 11px/18px Arial;
    text-align: center
}

.mobile-only-link {
    display: none !important
}

.harrier-menu .nav-account-button {
    white-space: nowrap
}

.desktop-side-trigger {
    display: flex;
    align-items: center;
    height: 62px
}

.nav-toggle {
    display: none;
    border: 0;
    background: none;
    color: #111;
    padding: 0;
    line-height: 1;
    font-size: 0
}

    .nav-toggle i {
        font-size: 20px
    }

.nav-toggle-desktop {
    display: block
}

.desktop-side-panel {
    position: absolute;
    top: 62px;
    right: 95px;
    width: 260px;
    background: #fff;
    box-shadow: 0 10px 20px -5px rgba(0,0,0,.7);
    padding: 20px;
    margin: 0;
    overflow: hidden;
    font-size: 13px;
    line-height: 25px;
    z-index: 100;
    border-top: 0;
    opacity: 0;
    visibility: hidden;
    transform: scale(0) rotate(0deg);
    transform-origin: top right;
    transition: all .3s ease-in-out 0s
}

    .desktop-side-panel.open {
        opacity: 1;
        visibility: visible;
        transform: scale(1) rotate(0deg)
    }

    .desktop-side-panel section + section {
        margin-top: 18px
    }

    .desktop-side-panel h3 {
        color: #121212;
        font-size: 18px;
        font-weight: 500;
        line-height: 18px;
        padding: 0 10px 10px 0;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 0 0 8px;
        font-family: "Saira Condensed",sans-serif;
        border-bottom: 1px #eaeaea solid
    }

    .desktop-side-panel ul {
        margin: 0;
        padding: 0;
        list-style: none;
        border-top: 0
    }

    .desktop-side-panel li {
        margin: 0;
        padding: 0
    }

        .desktop-side-panel li + li {
            margin-top: 10px
        }

    .desktop-side-panel a {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0;
        color: #333;
        text-decoration: none;
        font: 400 13px/23px "Open Sans",Arial,sans-serif;
        letter-spacing: normal
    }

        .desktop-side-panel a:hover {
            color: #333
        }

.panel-flag {
    display: block;
    width: 16px;
    height: 11px;
    object-fit: cover
}

.panel-currency-symbol {
    display: inline-block;
    width: 12px;
    min-width: 12px;
    color: #111;
    font: 600 31px/1 "Saira Condensed",Arial,sans-serif
}

/* The original Revolution Slider markup, random transitions and hover-only arrows are used unchanged. */
.home-slider5 {
    position: relative;
    z-index: 1;
    background: #111
}

    .home-slider5 .buy-btn {
        text-decoration: none !important
    }

    .home-slider5 .rev_slider_wrapper .tp-leftarrow.default, .home-slider5 .rev_slider_wrapper .tp-rightarrow.default {
        opacity: 0
    }

    .home-slider5 .rev_slider_wrapper:hover .tp-leftarrow.default, .home-slider5 .rev_slider_wrapper:hover .tp-rightarrow.default {
        opacity: 1
    }

    .home-slider5 .rev_slider_wrapper:focus-within .tp-leftarrow.default {
        left: 15px !important;
        visibility: visible;
        opacity: 1
    }

    .home-slider5 .rev_slider_wrapper:focus-within .tp-rightarrow.default {
        right: 15px !important;
        visibility: visible;
        opacity: 1
    }

/* Overlapping vehicle search */
.harrier-search-wrap {
    position: relative;
    z-index: 10;
    margin-top: -130px;
    padding-bottom: 0
}

.harrier-search-panel {
    min-height: 246px;
    padding: 34px 37px 28px;
    background: #3e6274;
    position: relative;
    border-bottom: 4px solid var(--harrier-lime);
    box-shadow: 0 12px 32px rgba(24,46,57,.16)
}

    .harrier-search-panel:before {
        content: "";
        position: absolute;
        inset: 0;
        background: url("../customer-template/images/pattern.svg") repeat;
        opacity: .1;
        pointer-events: none
    }

    .harrier-search-panel > * {
        position: relative;
        z-index: 1
    }

    .harrier-search-panel h2 {
        margin: 0 0 28px;
        color: #fff;
        text-align: center;
        font: 500 33px/1 "Teko",Arial,sans-serif;
        text-transform: uppercase
    }

.harrier-search-form {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 11px 13px
}

    .harrier-search-form select, .harrier-search-form input {
        display: block;
        width: 100%;
        height: 47px;
        border: 0;
        background: #fff;
        color: #777;
        padding: 0 20px;
        font: 400 14px Arial,sans-serif;
        border-radius: 0;
        outline: none
    }

.harrier-price-preview {
    height: 47px;
    color: #fff;
    font: 600 12px "Saira Condensed",Arial,sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    padding-top: 2px
}

    .harrier-price-preview div {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 10px;
        height: 4px;
        background: #fff
    }

        .harrier-price-preview div:before, .harrier-price-preview div:after {
            content: "";
            position: absolute;
            top: -5px;
            width: 14px;
            height: 14px;
            border: 4px solid #ffe158;
            background: var(--harrier-blue);
            border-radius: 50%
        }

        .harrier-price-preview div:before {
            left: 16%
        }

        .harrier-price-preview div:after {
            right: 16%
        }

.harrier-search-form button {
    grid-column: 1/-1;
    height: 45px;
    border: 0;
    background: var(--harrier-lime);
    color: #263039;
    font: 600 19px "Saira Condensed",Arial,sans-serif;
    text-transform: uppercase;
    cursor: pointer
}

.harrier-promos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding-top: 54px
}

    .harrier-promos a, .harrier-promos img {
        display: block;
        width: 100%
    }

.section {
    padding-top: 65px;
    padding-bottom: 65px
}

.harrier-inventory {
    padding-top: 55px
}

.harrier-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
    border-bottom: 1px solid #ddd
}

    .harrier-section-title h2 {
        display: inline-block;
        margin: 0;
        padding: 0 0 12px;
        border-bottom: 3px solid var(--harrier-lime);
        font: 500 37px/1 "Teko",Arial,sans-serif;
        text-transform: uppercase
    }

    .harrier-section-title a {
        color: #555;
        text-decoration: none;
        text-transform: uppercase;
        font: 600 14px "Saira Condensed",Arial,sans-serif
    }

.car-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 25px
}

.car-card {
    background: #fff;
    border: 1px solid #e4e4e4;
    box-shadow: none;
    transition: .2s
}

    .car-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0,0,0,.1)
    }

.car-image {
    height: 225px;
    position: relative;
    overflow: hidden;
    background: #eee
}

    .car-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .3s
    }

.car-card:hover .car-image img {
    transform: scale(1.025)
}

.car-body {
    padding: 18px 19px 20px
}

    .car-body h3 {
        margin: 2px 0 4px;
        font: 600 24px/1.15 "Saira Condensed",Arial,sans-serif
    }

.car-make {
    margin: 0;
    color: #7a8500;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase
}

.car-model {
    color: #777
}

.car-price {
    font: 600 25px "Teko",Arial,sans-serif;
    color: #222
}

.status-badge {
    display: inline-block;
    padding: 6px 10px;
    background: #6c757d;
    color: #fff;
    font-size: 11px;
    text-transform: uppercase;
    border-radius: 0
}

.car-image .status-badge {
    position: absolute;
    top: 12px;
    right: 12px
}

.status-available {
    background: #49b95b
}

.status-booked {
    background: #e2a92f
}

.status-sold {
    background: #212529
}

.status-unavailable {
    background: #c94848
}

.block {
    display: flex;
    width: 100%
}

/* index-2 style car showcase panels */
.harrier-product-section {
    background: #f3f3f3;
    padding: 50px 0
}

    .harrier-product-section + .harrier-reviews {
        margin-top: 0
    }

.showcase-heading {
    height: 69px;
    background: var(--harrier-blue);
    display: flex;
    align-items: stretch;
    position: relative
}

    .showcase-heading h2 {
        width: 310px;
        margin: 0 !important;
        padding: 0 25px;
        display: flex;
        align-items: center;
        background: var(--harrier-lime);
        clip-path: polygon(0 0,100% 0,85% 100%,0 100%);
        color: #395a68;
        font: 500 28px/1 "Teko",Arial,sans-serif;
        text-transform: uppercase
    }

.harrier-product-section.best .showcase-heading {
    background: #dedede
}

    .harrier-product-section.best .showcase-heading h2 {
        background: #5dcc64;
        color: #fff
    }

.showcase-timer {
    display: flex;
    height: 69px;
    color: #fff;
    margin-left: 185px
}

    .showcase-timer span {
        display: flex;
        min-width: 84px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-left: 1px dotted rgba(255,255,255,.4);
        font: 600 11px "Saira Condensed",Arial,sans-serif;
        text-transform: uppercase
    }

    .showcase-timer strong {
        font: 500 27px/1 "Teko",Arial,sans-serif
    }

.showcase-arrows {
    display: flex;
    gap: 10px;
    margin-left: auto;
    align-items: center;
    padding-right: 18px
}

    .showcase-arrows button, .brands-heading button {
        display: flex;
        width: 33px;
        height: 33px;
        align-items: center;
        justify-content: center;
        border: 0;
        background: #fff;
        color: #496677;
        font-size: 18px;
        cursor: pointer;
        transition: background .2s,color .2s
    }

        .showcase-arrows button:hover, .showcase-arrows button:focus-visible, .brands-heading button:hover, .brands-heading button:focus-visible {
            background: var(--harrier-lime);
            color: #111;
            outline: 0
        }

.showcase-viewport {
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid #ddd
}

.showcase-cars {
    display: flex;
    background: #fff;
    transition: transform .45s ease;
    will-change: transform
}

.showcase-car {
    position: relative;
    flex: 0 0 25%;
    min-width: 0;
    padding: 20px 15px 0;
    text-align: center;
    border-right: 1px solid #ddd;
    background: #fff
}

    .showcase-car:last-child {
        border-right: 0
    }

.showcase-image {
    position: relative;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff
}

.showcase-image-slider {
    position: relative;
    width: 100%;
    height: 220px;
    background: #fff
}

.showcase-image-slide {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 220px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .45s ease
}

    .showcase-image-slide.is-active {
        z-index: 1;
        opacity: 1;
        visibility: visible;
        pointer-events: auto
    }

.showcase-image img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center 54%;
    transform: none
}

.showcase-image-nav {
    position: absolute;
    z-index: 20;
    top: 50%;
    display: flex;
    width: 34px;
    height: 42px;
    align-items: center;
    justify-content: center;
    margin-top: -21px;
    padding: 0;
    border: 0;
    background: rgba(255,255,255,.9);
    box-shadow: 0 2px 8px rgba(0,0,0,.16);
    color: #3e6274;
    font-size: 23px;
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
    pointer-events: none;
    transition: background .2s ease,opacity .2s ease,visibility .2s ease,transform .2s ease
}

.showcase-image-prev {
    left: 7px
}

.showcase-image-next {
    right: 7px
}

.showcase-image-slider:hover .showcase-image-nav, .showcase-image-slider:focus-within .showcase-image-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

.showcase-image-nav:hover, .showcase-image-nav:focus-visible {
    background: var(--harrier-lime);
    color: #26333a;
    opacity: 1;
    outline: 0;
    transform: scale(1.05)
}

.showcase-image-dots {
    position: absolute;
    z-index: 20;
    right: 7px;
    bottom: 8px;
    left: 7px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    pointer-events: none
}

    .showcase-image-dots .car-card-slider-dot {
        width: 8px;
        height: 8px;
        padding: 0;
        border: 1px solid #3e6274;
        border-radius: 50%;
        background: #fff;
        cursor: pointer;
        pointer-events: auto
    }

        .showcase-image-dots .car-card-slider-dot.is-active {
            background: var(--harrier-lime);
            border-color: #879900
        }

.showcase-label {
    position: absolute;
    z-index: 22;
    left: 0;
    top: 0;
    padding: 5px 11px;
    background: #ef6164;
    color: #fff;
    font-size: 11px;
    text-transform: uppercase;
    border-radius: 2px
}

.showcase-car:nth-child(2) .showcase-label {
    background: #42a6e8
}

.showcase-hover-actions {
    position: absolute;
    z-index: 15;
    left: 50%;
    top: 50%;
    display: flex;
    gap: 19px;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%,-50%);
    transition: opacity .25s ease,visibility .25s ease
}

.showcase-car:hover .showcase-hover-actions, .showcase-car:focus-within .showcase-hover-actions {
    opacity: 1;
    visibility: visible
}

.showcase-action {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    text-decoration: none !important;
    transform: rotate(45deg);
    box-shadow: 0 10px 18px rgba(0,0,0,.14);
    transition: transform .2s ease,background .2s ease,color .2s ease
}

.showcase-cart-form {
    margin: 0
}

.showcase-action i {
    transform: rotate(-45deg);
    font-size: 24px
}

.showcase-action-cart {
    background: var(--harrier-lime);
    color: #111
}

.showcase-action-search, .showcase-action-heart {
    background: #fff;
    color: #111
}

.showcase-action:hover, .showcase-action:focus-visible {
    transform: rotate(45deg) scale(1.06);
    color: #111;
    outline: 0
}

.showcase-action-search:hover, .showcase-action-heart:hover, .showcase-action-search:focus-visible, .showcase-action-heart:focus-visible {
    background: var(--harrier-lime)
}

.showcase-car h3 {
    min-height: 50px;
    margin: 12px 0 4px;
    font: 600 18px/1.3 "Saira Condensed",Arial,sans-serif
}

    .showcase-car h3 a {
        color: #262626;
        text-decoration: none
    }

        .showcase-car h3 a:hover {
            color: #657d00
        }

.showcase-rating {
    height: 23px;
    color: #ffca0a;
    font-size: 12px
}

    .showcase-rating i {
        margin: 0 1px
    }

.showcase-price {
    margin: 3px 0 18px;
    color: #111;
    font: 500 25px "Teko",Arial,sans-serif
}

.showcase-specs {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    min-height: 62px;
    border-top: 1px solid #e5e5e5;
    color: #aaa;
    font: 400 14px "Saira Condensed",Arial,sans-serif
}

    .showcase-specs span {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px
    }

    .showcase-specs i {
        color: #c8c8c8
    }

/* testimonial section between Deals and Best Sellers */
.harrier-reviews {
    height: 620px;
    padding: 58px 0 330px;
    background: #15191d url("../customer-template/images/testimonials-bg-img1.jpg") center bottom/cover no-repeat;
    color: #fff;
    text-align: center
}

.reviews-slider {
    position: relative;
    min-height: 225px
}

.review-card {
    position: absolute;
    inset: 0;
    max-width: 790px;
    margin: 0 auto;
    opacity: 0;
    transform: translateX(24px);
    pointer-events: none;
    transition: opacity .5s ease,transform .5s ease
}

    .review-card.active {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto
    }

    .review-card > img {
        width: 88px;
        height: 88px;
        object-fit: cover;
        border: 5px solid rgba(255,255,255,.24);
        border-radius: 50%
    }

.review-quote {
    display: block;
    margin: 13px 0 5px;
    color: var(--harrier-lime);
    font-size: 25px
}

.review-card > p {
    margin: 0 auto 17px;
    color: #e5e5e5;
    font-size: 15px;
    line-height: 1.75
}

.review-card h3 {
    margin: 0;
    color: #fff;
    font: 600 20px "Saira Condensed",Arial,sans-serif;
    text-transform: uppercase
}

    .review-card h3 span {
        display: block;
        color: var(--harrier-lime);
        font-size: 13px;
        font-weight: 400
    }

.review-dots {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    top: 215px;
    display: flex;
    justify-content: center;
    gap: 7px
}

    .review-dots button {
        display: block;
        width: 9px;
        height: 9px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #777;
        cursor: pointer
    }

        .review-dots button.active {
            background: var(--harrier-lime)
        }

        .review-dots button:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 3px
        }

/* Popular brands panel */
.popular-brands-section {
    background: #f3f3f3;
    padding: 5px 0 50px
}

    .popular-brands-section > .container {
        background: #fff;
        border-bottom: 4px solid #e3e3e3
    }

.brands-heading {
    height: 69px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd
}

    .brands-heading h2 {
        width: 310px;
        height: 69px;
        margin: 0 !important;
        padding: 0 25px;
        display: flex;
        align-items: center;
        background: var(--harrier-blue);
        clip-path: polygon(0 0,100% 0,85% 100%,0 100%);
        color: #fff;
        font: 500 28px "Teko",Arial,sans-serif;
        text-transform: uppercase
    }

    .brands-heading > div {
        display: flex;
        gap: 10px;
        margin-left: auto;
        padding-right: 18px
    }

    .brands-heading button {
        background: #f1f1f1
    }

.brand-viewport {
    overflow: hidden
}

.brand-grid {
    display: flex;
    padding: 28px 10px 30px;
    transition: transform .45s ease;
    will-change: transform
}

.brand-item {
    height: 113px;
    flex: 0 0 calc(100% / 6);
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff
}

    .brand-item img {
        display: block;
        width: 100%;
        height: 113px;
        padding: 8px;
        border: 1px solid #ddd;
        object-fit: contain
    }

.showroom-cta {
    padding: 70px 0;
    background: #151515 url("../customer-template/images/category-bg.jpg") center/cover;
    color: #fff;
    text-align: center
}

    .showroom-cta h2 {
        font: 500 46px "Teko",Arial,sans-serif;
        text-transform: uppercase
    }

    .showroom-cta p {
        margin-bottom: 25px
    }

.customer-footer {
    background: #111;
    color: #aaa;
    padding: 55px 0 0
}

    .customer-footer > .container {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        gap: 40px
    }

    .customer-footer img {
        max-width: 185px
    }

    .customer-footer h4 {
        color: #fff
    }

    .customer-footer a {
        display: block;
        color: #aaa;
        margin: 8px 0
    }

.copyright {
    border-top: 1px solid #333;
    text-align: center;
    margin-top: 35px;
    padding: 18px
}
/* Harrier informative footer */
.harrier-footer {
    margin: 0;
    background: #080808;
    color: #bbb;
    font-size: 13px
}

    .harrier-footer .our-features-box {
        background: #fff;
        border: 0;
        padding: 29px 0 !important;
        margin: 0 !important
    }

        .harrier-footer .our-features-box ul {
            display: grid !important;
            grid-template-columns: repeat(4,1fr);
            gap: 35px;
            margin: 0 !important;
            padding: 0 !important;
            list-style: none
        }

        .harrier-footer .our-features-box li {
            float: none !important;
            width: auto !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important
        }

    .harrier-footer .feature-box {
        display: flex !important;
        align-items: center;
        gap: 18px;
        padding: 0 !important
    }

        .harrier-footer .feature-box > div:first-child {
            width: 44px;
            min-width: 44px;
            text-align: center
        }

        .harrier-footer .feature-box img {
            max-width: 44px;
            max-height: 48px
        }

        .harrier-footer .feature-box h6 {
            margin: 0 0 3px !important;
            color: #1c1c1c !important;
            font: 600 26px/1 "Saira Condensed",Arial,sans-serif !important;
            text-transform: none !important
        }

        .harrier-footer .feature-box p {
            margin: 0 !important;
            color: #999 !important;
            font-size: 13px !important
        }

    .harrier-footer .newsletter-row {
        width: min(100% - 32px,1370px);
        min-height: 250px;
        margin: 0 auto !important;
        padding: 0 !important;
        background: linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.6)),url("../customer-template/images/newsletter-bg.jpg") center/cover no-repeat !important;
        display: flex;
        align-items: center
    }

    .harrier-footer .newsletter-wrap {
        float: none !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 35px 0 !important;
        text-align: center
    }

        .harrier-footer .newsletter-wrap h5 {
            margin: 0 0 7px;
            color: var(--harrier-lime) !important;
            font: 500 26px/1 "Teko",Arial,sans-serif !important;
            text-transform: uppercase
        }

        .harrier-footer .newsletter-wrap h4 {
            margin: 0 0 22px !important;
            color: #fff !important;
            font: 500 30px/1 "Teko",Arial,sans-serif !important;
            text-transform: uppercase
        }

.newsletter-form {
    display: flex;
    width: min(100%,560px);
    height: 59px;
    margin: 0 auto
}

    .newsletter-form input {
        flex: 1;
        min-width: 0;
        border: 0 !important;
        background: #fff !important;
        padding: 0 20px !important;
        color: #555 !important;
        font-size: 13px !important;
        height: 59px !important
    }

    .newsletter-form button {
        width: 162px;
        border: 0;
        background: var(--harrier-lime);
        color: #111;
        font: 600 18px "Saira Condensed",Arial,sans-serif;
        text-transform: uppercase
    }

        .newsletter-form button i {
            margin-right: 8px
        }

.harrier-footer .footer-columns {
    display: grid;
    grid-template-columns: 1.45fr repeat(3,1fr);
    gap: 75px;
    padding-top: 38px;
    padding-bottom: 42px
}

    .harrier-footer .footer-columns:before, .harrier-footer .footer-columns:after, .footer-bottom-inner:before, .footer-bottom-inner:after {
        display: none !important;
        content: none !important
    }

    .harrier-footer .footer-columns h4 {
        position: relative;
        margin: 0 0 20px !important;
        padding: 0 !important;
        color: #fff !important;
        font: 600 21px/1 "Saira Condensed",Arial,sans-serif !important;
        text-transform: uppercase
    }

.harrier-footer address {
    font-style: normal;
    color: #bbb !important;
    line-height: 1.55
}

    .harrier-footer address p {
        margin: 0 0 13px;
        color: #bbb !important
    }

.harrier-footer a {
    color: #bbb;
    text-decoration: none
}

    .harrier-footer a:hover {
        color: var(--harrier-lime)
    }

.footer-link-column ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none
}

.footer-link-column li {
    margin: 0 0 9px !important;
    padding: 0 !important;
    border: 0 !important
}

.footer-bottom {
    border-top: 1px solid #272727;
    background: #080808;
    padding: 21px 0
}

.footer-bottom-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center
}

    .footer-bottom-inner > p {
        margin: 0;
        text-align: center;
        color: #aaa
    }

.footer-socials {
    display: flex;
    gap: 6px
}

    .footer-socials a {
        display: flex;
        width: 34px;
        height: 34px;
        align-items: center;
        justify-content: center;
        background: #335b9d;
        color: #fff !important;
        font-size: 15px
    }

        .footer-socials a:nth-child(2) {
            background: #2daae1
        }

        .footer-socials a:nth-child(3) {
            background: #d84a36
        }

        .footer-socials a:nth-child(4) {
            background: #1476a8
        }

        .footer-socials a:nth-child(5) {
            background: #e62117
        }

.harrier-footer .payment-accept {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px
}

    .harrier-footer .payment-accept img {
        display: block;
        max-height: 35px;
        width: auto
    }

    .harrier-footer .payment-accept span {
        color: #bbb;
        font-size: 12px;
        text-align: right
    }

    .harrier-footer .payment-accept i {
        margin-right: 7px;
        color: var(--harrier-lime)
    }

.alerts {
    padding-top: 16px
}

    .alerts:empty, .alerts:not(:has(.alert)) {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important
    }

.page-banner {
    background: #292929 url("../customer-template/images/category-bg.jpg") center/cover;
    color: #fff;
    padding: 45px 0
}

    .page-banner h1 {
        font: 500 48px "Teko",Arial,sans-serif;
        text-transform: uppercase
    }

    .page-banner a {
        color: var(--harrier-lime)
    }

.filter-panel {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 16px;
    align-items: end;
    background: #f3f3f3;
    padding: 20px;
    margin-bottom: 20px
}

    .filter-panel label, .auth-card label {
        display: block;
        font-weight: 600
    }

    .filter-panel input, .filter-panel select {
        width: 100%;
        height: 44px;
        border: 1px solid #ddd;
        padding: 8px
    }

.car-details {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 40px
}

.gallery > img {
    width: 100%;
    height: 460px;
    object-fit: cover
}

.thumbnails {
    display: flex;
    gap: 10px;
    margin-top: 10px
}

    .thumbnails button {
        border: 2px solid transparent;
        background: none;
        padding: 0
    }

    .thumbnails img {
        width: 90px;
        height: 65px;
        object-fit: cover
    }

.specs {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    border-top: 1px solid #eee
}

    .specs dt, .specs dd {
        padding: 10px;
        border-bottom: 1px solid #eee;
        margin: 0
    }

.customer-table {
    width: 100%;
    border-collapse: collapse
}

    .customer-table th, .customer-table td {
        padding: 14px;
        border-bottom: 1px solid #ddd
    }

.form-card, .auth-card {
    max-width: 800px
}

.form-card {
    border: 1px solid #eee;
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 30px
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

    .form-grid label, .auth-card label {
        display: grid;
        gap: 6px
    }

.auth-card form {
    display: grid;
    gap: 15px
}

.confirmation, .error-page {
    text-align: center
}

    .confirmation i, .error-page i {
        font-size: 70px;
        color: #198754
    }

.error-page {
    padding: 90px 20px
}

    .error-page img {
        max-width: 520px;
        width: 100%
    }

.info-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px
}

.grid-hero-banner {
    background: url("../customer-template/images/category-bg.jpg") center bottom/cover no-repeat;
    min-height: 0;
    margin: 0 !important;
    padding: 70px 0;
    color: #fff;
    text-align: center
}

    .grid-hero-banner .page-title {
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important
    }

        .grid-hero-banner .page-title h2 {
            margin: 0 !important;
            padding: 0 !important;
            color: #fff;
            text-align: center !important
        }

.grid-breadcrumbs {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 15px
}

    .grid-breadcrumbs li {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #fff
    }

    .grid-breadcrumbs a {
        color: #fff;
        text-decoration: none
    }

    .grid-breadcrumbs strong {
        font-weight: 600
    }

.grid-listing-layout {
    padding: 38px 0 50px;
    background: #f3f3f3
}

    .grid-listing-layout .toolbar {
        margin-bottom: 14px
    }

.grid-sale-shift {
    left: auto !important;
    right: 18px;
    top: 0
}

.grid-filter-box {
    background: #3e6274;
    padding: 40px;
    position: relative;
    box-shadow: 0 3px 5px 0 rgba(36,39,44,.1)
}

    .grid-filter-box:before {
        content: "";
        display: block;
        background: url("../customer-template/images/pattern.svg") repeat 0 0;
        position: absolute;
        inset: 0;
        opacity: .1
    }

    .grid-filter-box > * {
        position: relative;
        z-index: 1
    }

.grid-filter-title {
    height: auto;
    background: none;
    clip-path: none;
    display: block;
    padding: 0;
    margin: 0 0 32px
}

    .grid-filter-title h2 {
        margin: 0;
        color: #fff;
        font: 500 28px/1 "Saira Condensed",Arial,sans-serif;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-align: center
    }

.grid-filter-form {
    padding: 0;
    display: grid;
    gap: 14px
}

    .grid-filter-form select, .grid-filter-form input {
        width: 100%;
        height: 61px;
        border: 0;
        background: #fff;
        color: #777;
        padding: 0 20px;
        font: 400 16px Arial,sans-serif
    }

    .grid-filter-form button {
        height: 53px;
        border: 0;
        background: var(--harrier-lime);
        color: #1b2430;
        font: 600 24px "Saira Condensed",Arial,sans-serif;
        text-transform: uppercase
    }

.grid-listing-layout .category-products .products-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px
}

    .grid-listing-layout .category-products .products-grid > li.item {
        float: none;
        padding: 0 15px;
        margin-bottom: 30px
    }

.grid-listing-layout .item-inner {
    background: #fff
}

.grid-listing-layout .item-img {
    margin-bottom: 0
}

.grid-listing-layout .item-img-info {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
    background: #fff
}

.grid-listing-layout .car-card-slider {
    position: relative;
    width: 100%;
    height: 260px;
    margin: 0 auto;
    background: #fff
}

.grid-listing-layout .item-img-info .product-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 260px;
    padding: 0;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease;
    pointer-events: none
}

    .grid-listing-layout .item-img-info .product-image.is-active {
        z-index: 1;
        opacity: 1;
        visibility: visible;
        pointer-events: auto
    }

    .grid-listing-layout .item-img-info .product-image img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 260px;
        object-fit: cover;
        object-position: center 54%;
        background: #fff;
        transform: none
    }

.grid-listing-layout .item:hover .item-img-info .car-card-slide img {
    transform: none
}

.grid-listing-layout .car-card-slider-nav {
    position: absolute;
    z-index: 20;
    top: 50%;
    display: flex;
    width: 38px;
    height: 46px;
    align-items: center;
    justify-content: center;
    margin-top: -23px;
    padding: 0;
    border: 0;
    background: rgba(255,255,255,.9);
    box-shadow: 0 2px 8px rgba(0,0,0,.16);
    color: #3e6274;
    font-size: 25px;
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
    transition: opacity .2s ease,visibility .2s ease,background .2s ease,transform .2s ease;
    pointer-events: none
}

.grid-listing-layout .car-card-slider-prev {
    left: 7px
}

.grid-listing-layout .car-card-slider-next {
    right: 7px
}

.grid-listing-layout .car-card-slider:hover .car-card-slider-nav, .grid-listing-layout .car-card-slider:focus-within .car-card-slider-nav, .grid-listing-layout .car-card-slider-nav:focus-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

.grid-listing-layout .car-card-slider-nav:hover, .grid-listing-layout .car-card-slider-nav:focus-visible {
    background: var(--harrier-lime);
    color: #26333a;
    outline: 0;
    transform: scale(1.05)
}

.grid-listing-layout .car-card-slider-dots {
    position: absolute;
    z-index: 20;
    right: 0;
    bottom: 9px;
    left: 0;
    display: flex;
    justify-content: center;
    gap: 5px;
    pointer-events: none
}

.grid-listing-layout .car-card-slider-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 1px solid #3e6274;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    pointer-events: auto
}

    .grid-listing-layout .car-card-slider-dot.is-active {
        background: var(--harrier-lime);
        border-color: #879900
    }

.grid-listing-layout .item-title a {
    min-height: 0;
    display: block
}

.grid-listing-layout .item-info {
    padding: 0
}

.grid-listing-layout .info-inner {
    padding: 0 18px 0
}

.grid-listing-layout .item-content {
    padding: 0
}

.grid-listing-layout .item-price .price {
    font-family: "Teko",Arial,sans-serif;
    font-size: 28px
}

.grid-listing-layout .other-info {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    text-align: center
}

    .grid-listing-layout .other-info > div {
        padding-top: 2px
    }

.grid-listing-layout .view-mode {
    display: flex;
    gap: 5px
}

    .grid-listing-layout .view-mode button, .grid-listing-layout .view-mode a {
        border: 1px #ddd solid;
        border-radius: 0;
        height: 34px;
        line-height: 34px;
        display: inline-block;
        vertical-align: top;
        font-size: 0;
        color: #333;
        background-color: #fff;
        background-repeat: no-repeat
    }

    .grid-listing-layout .view-mode .button-grid {
        width: 48px;
        background-image: url("../customer-template/images/icon_grid_over.png");
        background-position: 10px 9px
    }

    .grid-listing-layout .view-mode .button-list {
        width: 48px;
        background-image: url("../customer-template/images/icon_list.png");
        background-position: 12px 8px
    }

    .grid-listing-layout .view-mode .button-active.button-grid {
        background-color: #d9eb3d;
        border-color: #d9eb3d
    }

    .grid-listing-layout .view-mode .button-active.button-list {
        background-color: #d9eb3d;
        border-color: #d9eb3d
    }

.grid-listing-layout .pagination li.disabled a {
    pointer-events: none;
    opacity: .45
}

.grid-listing-layout ol.products-list {
    float: none;
    width: 100%
}

.grid-listing-layout .products-list .product-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: initial
}

.grid-listing-layout .products-list .product-shop {
    min-height: 0
}

/* Independent list page spacing: do not inherit grid/detail card dimensions. */
.list-listing-page .toolbar, .grid-listing-layout article:has(ol.products-list) .toolbar {
    margin-bottom: 0 !important
}

.list-listing-page .category-products, .grid-listing-layout article:has(ol.products-list) .category-products {
    margin: 0 !important;
    padding: 0 13px !important;
    overflow: hidden
}

.list-listing-page ol.products-list, .grid-listing-layout article:has(ol.products-list) ol.products-list {
    display: block;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important
}

.list-listing-page .products-list > li.item, .grid-listing-layout article:has(ol.products-list) .products-list > li.item {
    display: block;
    clear: both;
    width: 100%;
    margin: 0 !important;
    padding: 20px 0 25px !important
}

    .list-listing-page .products-list > li.item:first-child, .grid-listing-layout article:has(ol.products-list) .products-list > li.item:first-child {
        padding-top: 0 !important
    }

.list-listing-page .products-list .product-image, .grid-listing-layout article:has(ol.products-list) .products-list .product-image {
    float: left;
    width: 28%;
    margin: 0 !important;
    padding: 0 !important
}

.list-listing-page .products-list .product-shop, .grid-listing-layout article:has(ol.products-list) .products-list .product-shop {
    float: right;
    width: 68%;
    min-height: 0;
    margin-left: 0 !important;
    padding: 0 !important
}

.list-listing-page .products-list .product-image img, .grid-listing-layout article:has(ol.products-list) .products-list .product-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: initial
}

@media(max-width:1199px) {
    .harrier-logo-panel {
        width: max(320px,calc((100vw - 960px)/2 + 300px));
        padding-right: 62px
    }

    .harrier-nav-inner {
        padding-left: 285px
    }

    .harrier-menu a {
        padding: 0 9px !important;
        font-size: 16px
    }

    .harrier-top-content {
        padding-left: 55px
    }
}

@media(max-width:991px) {
    .harrier-logo-panel {
        width: 285px;
        padding-right: 62px
    }

    .harrier-nav-inner {
        padding-left: 253px
    }

    .harrier-contact span:first-child {
        display: none
    }

    .harrier-menu a {
        padding: 0 7px !important;
        font-size: 14px
    }

    .harrier-actions {
        gap: 14px
    }

    .harrier-hero-slider, .harrier-hero {
        height: 530px
    }

    .harrier-hero-content {
        padding-top: 100px
    }

    .harrier-hero h1 {
        font-size: 64px
    }

    .car-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .showcase-timer {
        margin-left: 20px
    }

        .showcase-timer span {
            min-width: 64px
        }

    .showcase-cars {
        grid-template-columns: repeat(2,1fr)
    }

    .showcase-car:nth-child(2) {
        border-right: 0
    }

    .showcase-car {
        border-bottom: 1px solid #ddd
    }

    .brand-grid {
        grid-template-columns: repeat(3,1fr)
    }

    .harrier-footer .footer-columns {
        grid-template-columns: 1.3fr repeat(3,1fr);
        gap: 25px
    }

    .harrier-footer .our-features-box ul {
        gap: 15px
    }

    .harrier-footer .feature-box {
        gap: 10px
    }

    .grid-hero-banner {
        min-height: 230px;
        padding: 68px 0 50px
    }

    .grid-filter-title {
        height: 68px;
        padding: 0 26px
    }

        .grid-filter-title h2 {
            font-size: 26px
        }

    .grid-filter-form {
        padding: 0 20px
    }

    .grid-listing-layout .category-products .products-grid > li.item {
        width: 50%
    }
}

@media(max-width:767px) {
    .harrier-header {
        height: 34px !important;
        min-height: 34px !important
    }

    .harrier-logo-panel {
        width: 58%;
        height: 88px;
        justify-content: flex-start;
        padding-left: 24px;
        padding-right: 0
    }

        .harrier-logo-panel img {
            width: 145px
        }

    .harrier-top-strip {
        margin-left: 48%;
        height: 34px
    }

    .harrier-top-content {
        height: 34px;
        width: 100%;
        padding: 0 10px;
        justify-content: flex-end
    }

        .harrier-top-content p, .harrier-contact span:first-child {
            display: none
        }

    .harrier-contact {
        font-size: 12px
    }

    .harrier-nav {
        height: 54px
    }

    .harrier-nav-inner {
        height: 54px;
        padding-left: 59%;
        width: 100%;
        padding-right: 12px
    }

    .nav-toggle {
        display: block
    }

    .nav-toggle-desktop {
        display: block
    }

    .desktop-side-trigger {
        height: 54px
    }

    .desktop-side-panel {
        top: 54px;
        right: 0;
        left: auto;
        width: min(100vw - 24px,260px)
    }

    .harrier-menu {
        display: none;
        position: absolute;
        top: 54px;
        left: 0;
        right: 0;
        height: auto;
        background: #fff;
        box-shadow: 0 10px 20px rgba(0,0,0,.15);
        flex-direction: column
    }

        .harrier-menu.open {
            display: flex
        }

        .harrier-menu li, .harrier-menu a {
            display: block !important
        }

        .harrier-menu a {
            padding: 14px 20px !important;
            border-bottom: 1px solid #eee !important
        }

    .mobile-only-link {
        display: block !important
    }

    .harrier-actions {
        height: 54px;
        gap: 16px
    }

        .harrier-actions > a {
            display: block
        }

    .harrier-hero-slider, .harrier-hero {
        height: 460px
    }

    .harrier-hero {
        background-position: 58% center
    }

    .harrier-hero-content {
        padding: 82px 62px 0
    }

    .harrier-kicker {
        font-size: 24px
    }

    .harrier-hero h1 {
        font-size: 53px
    }

        .harrier-hero h1 span {
            font-size: 43px
        }

    .harrier-subtitle {
        font-size: 18px;
        max-width: 260px
    }

    .hero-slider-arrow {
        width: 44px;
        height: 44px;
        margin-top: -22px;
        font-size: 22px
    }

    .hero-slider-prev {
        left: 8px
    }

    .hero-slider-next {
        right: 8px
    }

    .harrier-search-wrap {
        margin-top: -45px;
        padding: 0 15px
    }

    .harrier-search-panel {
        padding: 25px 20px
    }

    .harrier-search-form {
        grid-template-columns: 1fr
    }

        .harrier-search-form button {
            grid-column: auto
        }

    .harrier-price-preview {
        display: none
    }

    .harrier-promos, .car-grid, .customer-footer > .container, .form-grid, .info-grid, .car-details {
        grid-template-columns: 1fr
    }

    .harrier-promos {
        padding: 35px 15px 0
    }

    .filter-panel {
        grid-template-columns: 1fr
    }

    .gallery > img {
        height: 300px
    }

    .showcase-heading h2, .brands-heading h2 {
        width: 220px;
        font-size: 23px
    }

    .showcase-timer {
        display: none
    }

    .showcase-cars {
        grid-template-columns: 1fr
    }

    .showcase-car {
        border-right: 0
    }

    .brand-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 12px;
        padding: 18px 12px
    }

    .harrier-reviews {
        background-attachment: scroll;
        padding-left: 15px;
        padding-right: 15px
    }

    .harrier-footer .our-features-box ul {
        grid-template-columns: 1fr 1fr;
        gap: 22px
    }

    .harrier-footer .footer-columns {
        grid-template-columns: 1fr 1fr;
        gap: 32px
    }

    .newsletter-form {
        height: auto
    }

        .newsletter-form input {
            height: 52px !important
        }

        .newsletter-form button {
            height: 52px;
            width: 130px
        }

    .footer-bottom-inner {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .footer-socials, .harrier-footer .payment-accept {
        justify-content: center
    }

    .grid-hero-banner {
        min-height: 180px;
        padding: 42px 0 30px
    }

    .grid-breadcrumbs {
        font-size: 12px;
        gap: 6px
    }

    .grid-listing-layout {
        padding: 25px 0 35px
    }

        .grid-listing-layout .col-main, .grid-listing-layout .col-left {
            float: none !important;
            width: 100% !important;
            left: auto !important;
            right: auto !important
        }

    .grid-filter-box {
        margin-bottom: 25px
    }

    .grid-filter-title {
        height: 60px;
        padding: 0 22px
    }

        .grid-filter-title h2 {
            font-size: 24px
        }

    .grid-filter-form select, .grid-filter-form input {
        height: 52px;
        font-size: 15px
    }

    .grid-filter-form button {
        height: 48px;
        font-size: 21px
    }

    .grid-listing-layout .category-products .products-grid > li.item {
        width: 100%
    }

    .grid-listing-layout .other-info {
        grid-template-columns: repeat(3,1fr)
    }
}

@media(max-width:991px) {
    .showcase-car {
        flex-basis: 50%
    }

    .brand-item {
        flex-basis: calc(100% / 3)
    }

    .harrier-reviews {
        height: 500px;
        padding: 45px 15px 245px;
        background-position: center bottom
    }
}

@media(max-width:767px) {
    .showcase-car {
        flex-basis: 100%;
        border-right: 0
    }

    .brand-grid {
        gap: 0;
        padding: 18px 6px
    }

    .brand-item {
        flex-basis: 50%;
        padding: 0 6px
    }

    .harrier-reviews {
        height: 430px;
        padding: 35px 15px 190px;
        background-position: center bottom
    }

    .review-card > p {
        font-size: 13px;
        line-height: 1.5
    }
}

/* Car detail page matching original template */
.detail-hero-banner {
    background: url("../customer-template/images/category-bg.jpg") center/cover no-repeat;
    min-height: 190px;
    padding: 42px 0 34px;
    color: #fff;
    text-align: center
}

.detail-breadcrumbs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 14px;
    font: 400 15px/1 "Open Sans",Arial,sans-serif
}

    .detail-breadcrumbs a, .detail-breadcrumbs span {
        color: #fff;
        text-decoration: none
    }

.detail-page-title {
    margin: 0;
    color: #fff;
    font: 500 62px/1 "Teko",Arial,sans-serif;
    text-transform: uppercase
}

.detail-page-wrap {
    background: #f3f3f3;
    padding: 30px 0 55px
}

    .detail-page-wrap .product-essential {
        background: #fff;
        padding: 28px
    }

.product-img-box {
    position: relative
}

    .product-img-box .new-label, .product-img-box .sale-label {
        position: absolute;
        top: 18px;
        z-index: 3;
        padding: 6px 12px;
        border-radius: 2px;
        color: #fff;
        font: 600 11px/1 "Open Sans",Arial,sans-serif;
        text-transform: uppercase
    }

    .product-img-box .new-label {
        left: 18px;
        background: #ef6164
    }

    .product-img-box .sale-label {
        left: 96px;
        background: #53aef1
    }

.detail-page-wrap .product-image {
    background: #f8f8f8
}

.detail-image-slider {
    position: relative;
    width: 100%;
    height: 370px;
    overflow: hidden;
    background: #f8f8f8
}

.detail-image-slide {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 370px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .45s ease
}

    .detail-image-slide.is-active {
        z-index: 1;
        opacity: 1;
        visibility: visible;
        pointer-events: auto
    }

.detail-page-wrap .product-image img {
    display: block;
    width: 100%;
    height: 370px;
    object-fit: cover;
    object-position: center 54%
}

.detail-image-nav {
    position: absolute;
    z-index: 20;
    top: 50%;
    display: flex;
    width: 45px;
    height: 56px;
    align-items: center;
    justify-content: center;
    margin-top: -28px;
    padding: 0;
    border: 0;
    background: rgba(255,255,255,.92);
    box-shadow: 0 3px 12px rgba(0,0,0,.18);
    color: #3e6274;
    font-size: 30px;
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
    pointer-events: none;
    transition: opacity .2s ease,visibility .2s ease,background .2s ease,transform .2s ease
}

.detail-image-prev {
    left: 12px
}

.detail-image-next {
    right: 12px
}

.detail-image-slider:hover .detail-image-nav, .detail-image-slider:focus-within .detail-image-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

.detail-image-nav:hover, .detail-image-nav:focus-visible {
    background: var(--harrier-lime);
    color: #26333a;
    outline: 0;
    transform: scale(1.05)
}

.more-views {
    padding: 18px 0 26px
}

.product-image-thumbs {
    display: flex;
    align-items: center;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0 0 7px;
    overflow-x: auto;
    scrollbar-width: thin
}

    .product-image-thumbs li {
        margin: 0
    }

.detail-thumb-btn {
    display: block;
    border: 2px solid transparent;
    background: none;
    padding: 0;
    opacity: .72;
    transition: border-color .2s ease,opacity .2s ease
}

    .detail-thumb-btn.is-active {
        border-color: var(--harrier-lime);
        opacity: 1
    }

    .detail-thumb-btn:hover, .detail-thumb-btn:focus-visible {
        opacity: 1;
        outline: 0
    }

    .detail-thumb-btn img {
        display: block;
        width: 76px;
        max-width: none;
        height: 82px;
        object-fit: cover;
        object-position: center;
        background: #fff
    }

.detail-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    margin: 0 0 18px;
    text-decoration: none !important;
    color: #fff;
    font: 600 22px/1 "Saira Condensed",Arial,sans-serif;
    text-transform: uppercase
}

    .detail-cta i {
        margin-right: 10px
    }

.detail-cta-call {
    background: #63c85d
}

.detail-cta-question {
    background: #ef6164
}

.detail-cta-finance {
    background: #3e6274
}

.product-shop .brand {
    margin: 4px 0 10px;
    color: #686868;
    font-size: 14px;
    text-transform: uppercase
}

.product-shop .product-name {
    margin: 0 0 12px;
    color: #3b3b3b;
    font: 600 42px/1.15 "Saira Condensed",Arial,sans-serif
}

.ratings-block {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid #e4e4e4;
    color: #979797;
    font-size: 13px
}

    .ratings-block a {
        color: #979797;
        text-decoration: none
    }

.detail-stars {
    color: #ffd43a;
    font-size: 13px;
    line-height: 1
}

.price-block {
    padding: 4px 0 28px;
    color: #f15e55;
    font: 500 31px/1 "Teko",Arial,sans-serif
}

.spec-row {
    border: 1px solid #e6e6e6;
    margin-bottom: 20px
}

.spec-title {
    display: flex;
    align-items: center;
    width: 290px;
    height: 68px;
    padding: 0 24px;
    background: var(--harrier-lime);
    clip-path: polygon(0 0,100% 0,85% 100%,0 100%);
    color: #27333b;
    font: 500 31px/1 "Teko",Arial,sans-serif;
    text-transform: uppercase
}

.spec-table {
    width: 100%;
    border-collapse: collapse
}

    .spec-table td {
        padding: 16px 14px;
        border-top: 1px solid #ededed;
        color: #666;
        font-size: 15px
    }

        .spec-table td:nth-child(odd) {
            width: 20%;
            color: #4b4b4b
        }

        .spec-table td:nth-child(even) {
            width: 30%
        }

.email-addto-box ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0 0 18px;
    padding: 0
}

.email-addto-box a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #f3f3f3;
    color: #505050;
    text-decoration: none;
    font: 600 17px/1 "Saira Condensed",Arial,sans-serif;
    text-transform: uppercase
}

.detail-booking-action {
    margin-bottom: 18px
}

.detail-social {
    margin: 0 0 20px
}

    .detail-social .link {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        list-style: none;
        margin: 0;
        padding: 0
    }

        .detail-social .link li {
            float: none !important
        }

        .detail-social .link a {
            display: flex;
            width: 39px;
            height: 39px;
            align-items: center;
            justify-content: center;
            background: #fff;
            border: 1px solid #d9d9d9;
            color: #8a8a8a;
            text-decoration: none;
            font-size: 23px;
            line-height: 1
        }

            .detail-social .link a:hover, .detail-social .link a:focus-visible {
                color: #666;
                border-color: #c9c9c9;
                outline: 0
            }

.shipping-pro {
    list-style: none;
    margin: 0;
    padding: 0
}

    .shipping-pro li {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 0 10px;
        color: #555;
        font-size: 15px
    }

    .shipping-pro i {
        color: #111;
        font-size: 8px
    }

.detail-tabs-wrap {
    margin-top: 28px
}

.detail-tabs {
    border-bottom: 1px solid #ddd
}

    .detail-tabs > li > a {
        border: 0 !important;
        border-radius: 0 !important;
        margin-right: 0 !important;
        padding: 16px 20px !important;
        color: #323232 !important;
        font: 600 18px/1 "Saira Condensed",Arial,sans-serif;
        text-transform: uppercase;
        background: #f5f5f5
    }

    .detail-tabs > li.active > a, .detail-tabs > li.active > a:focus, .detail-tabs > li.active > a:hover {
        background: var(--harrier-lime) !important;
        color: #27333b !important
    }

.detail-tab-content {
    background: #fff;
    border: 1px solid #e7e7e7;
    border-top: 0;
    padding: 24px
}

    .detail-tab-content p {
        color: #666;
        font-size: 15px;
        line-height: 1.8
    }

.spec-table-full td:nth-child(odd) {
    width: 20%
}

.spec-table-full td:nth-child(even) {
    width: 30%
}

.detail-check-list {
    columns: 2;
    gap: 30px;
    padding-left: 20px;
    color: #555
}

    .detail-check-list li {
        margin-bottom: 10px
    }

.detail-review-box {
    padding: 10px 0
}

    .detail-review-box h4 {
        margin: 0 0 10px;
        color: #2d2d2d;
        font: 600 22px/1 "Saira Condensed",Arial,sans-serif;
        text-transform: uppercase
    }

/* SMG Japan company information pages */
.company-page {
    background: #f3f3f3
}

.company-intro {
    max-width: 920px;
    margin: 0 auto 38px;
    text-align: center
}

.company-eyebrow {
    margin: 0 0 8px;
    color: #607800;
    font: 600 18px/1 "Saira Condensed",Arial,sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase
}

.company-intro h2, .bank-details-heading h2 {
    margin: 0 0 15px;
    color: #20272b;
    font: 600 38px/1.1 "Saira Condensed",Arial,sans-serif;
    text-transform: uppercase
}

.company-intro > p:last-child {
    margin: 0;
    color: #626970;
    font-size: 15px;
    line-height: 1.8
}

.company-card-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 24px
}

.company-info-card {
    min-height: 285px;
    padding: 30px;
    background: #fff;
    border-bottom: 4px solid var(--harrier-lime);
    box-shadow: 0 5px 20px rgba(0,0,0,.06)
}

    .company-info-card > i {
        display: flex;
        width: 52px;
        height: 52px;
        align-items: center;
        justify-content: center;
        margin-bottom: 18px;
        background: var(--harrier-lime);
        color: #25333b;
        font-size: 23px
    }

    .company-info-card h3 {
        margin: 0 0 18px;
        color: #25333b;
        font: 600 25px/1 "Saira Condensed",Arial,sans-serif;
        text-transform: uppercase
    }

    .company-info-card p, .company-info-card address, .company-info-card dd, .company-info-card li {
        color: #626970;
        font-size: 14px;
        line-height: 1.7
    }

    .company-info-card address {
        font-style: normal
    }

    .company-info-card a {
        color: #3f6679;
        text-decoration: none
    }

        .company-info-card a:hover {
            color: #607800
        }

    .company-info-card dl {
        display: grid;
        grid-template-columns: 115px 1fr;
        gap: 9px 12px;
        margin: 0
    }

    .company-info-card dt {
        color: #252b2f;
        font-size: 13px;
        font-weight: 600
    }

    .company-info-card dd {
        margin: 0
    }

.company-service-list {
    margin: 0;
    padding: 0;
    list-style: none
}

    .company-service-list li {
        position: relative;
        padding-left: 21px;
        margin-bottom: 7px
    }

        .company-service-list li:before {
            content: "";
            position: absolute;
            left: 0;
            top: 2px;
            color: #68bd61;
            font-family: FontAwesome
        }

.bank-details-panel {
    margin-top: 32px;
    padding: 34px;
    background: #fff;
    border-top: 5px solid var(--harrier-blue);
    box-shadow: 0 5px 20px rgba(0,0,0,.06)
}

.identity-section {
    padding: 60px 0;
    background: #f3f3f3
}

.identity-card {
    width: min(100%,620px);
    margin: 0 auto;
    padding: 42px;
    background: #fff;
    border-top: 5px solid var(--harrier-lime);
    box-shadow: 0 8px 28px rgba(0,0,0,.08)
}

.identity-card-wide {
    width: min(100%,820px)
}

.identity-step {
    display: inline-block;
    margin-bottom: 15px;
    padding: 6px 12px;
    background: var(--harrier-blue);
    color: #fff;
    font: 500 14px "Saira Condensed",Arial,sans-serif;
    text-transform: uppercase;
    letter-spacing: .06em
}

.identity-card h2 {
    margin: 0 0 8px;
    color: #222;
    font: 500 37px/1 "Teko",Arial,sans-serif;
    text-transform: uppercase
}

.identity-card > p {
    color: #666;
    line-height: 1.65
}

.identity-card form:not(.identity-resend) {
    display: grid;
    gap: 9px;
    margin-top: 24px
}

.identity-card label {
    margin-top: 8px;
    color: #333;
    font-weight: 600
}

.identity-card .form-control {
    width: 100%;
    height: 50px;
    border: 1px solid #ddd;
    border-radius: 0;
    background: #fff;
    padding: 10px 14px;
    font-size: 15px
}

.identity-card .verified-email {
    background: #f2f2f2;
    color: #555
}
/*.identity-submit{width:100%;margin-top:14px;border:0}*/
.identity-card .identity-submit {
    display: block;
    width: 100%;
    min-height: 52px;
    margin-top: 18px;
    padding: 13px 24px;
    border: 0;
    border-radius: 0;
    background: #dfff00;
    color: #233f4c;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

    .identity-card .identity-submit:hover, .identity-card .identity-submit:focus {
        background: #365f70;
        color: #ffffff;
        text-decoration: none;
        outline: none;
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.18);
    }

    .identity-card .identity-submit:focus-visible {
        outline: 3px solid rgba(223, 255, 0, 0.45);
        outline-offset: 2px;
    }

    .identity-card .identity-submit:active {
        transform: translateY(1px);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.14);
    }

    .identity-card .identity-submit:disabled {
        opacity: 0.65;
        cursor: not-allowed;
    }

.identity-validation:not(:empty), .identity-message {
    margin: 0 0 12px;
    padding: 12px 14px;
    border-left: 4px solid #ef6262;
    background: #fff0f0;
    color: #8b2424
}

.identity-message {
    border-left-color: var(--harrier-blue);
    background: #eef6fa;
    color: #294c5d
}

.identity-validation ul {
    margin: 0;
    padding-left: 18px
}

.field-validation-error {
    display: block;
    min-height: 16px;
    color: #bd3030;
    font-size: 12px
}

.identity-code {
    text-align: center;
    font-size: 26px !important;
    font-weight: 700;
    letter-spacing: 10px
}

.identity-resend {
    margin-top: 12px;
    text-align: center
}

.identity-secondary-button, .panel-account-button, .nav-account-button {
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    font: inherit
}

.identity-secondary-button {
    color: #3f6679;
    text-decoration: underline
}

.identity-links {
    margin: 20px 0 0 !important;
    text-align: center
}

    .identity-links a {
        color: #3f6679;
        font-weight: 600
    }

.identity-links-split {
    display: flex;
    justify-content: space-between;
    gap: 20px
}

.identity-checkbox {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-weight: 400 !important
}

    .identity-checkbox input {
        width: 17px;
        height: 17px;
        margin: 0
    }

.identity-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px
}

.identity-field {
    display: grid;
    gap: 5px
}

.identity-field-full {
    grid-column: 1/-1
}

.desktop-side-panel .panel-account-button {
    display: block;
    width: 100%;
    padding: 4px 0;
    text-align: left
}

.harrier-menu .nav-account-button {
    display: block;
    width: 100%;
    padding: 22px 20px;
    text-align: left;
    text-transform: uppercase;
    font: 600 16px/1 "Saira Condensed",Arial,sans-serif
}

@media(max-width:767px) {
    .identity-section {
        padding: 32px 14px
    }

    .identity-card {
        padding: 28px 22px
    }

    .identity-form-grid {
        grid-template-columns: 1fr
    }

    .identity-field-full {
        grid-column: auto
    }

    .identity-links-split {
        flex-direction: column;
        gap: 8px
    }

    .identity-card h2 {
        font-size: 31px
    }
}

.bank-details-heading {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 25px
}

    .bank-details-heading > i {
        display: flex;
        width: 62px;
        height: 62px;
        align-items: center;
        justify-content: center;
        background: var(--harrier-blue);
        color: #fff;
        font-size: 27px
    }

    .bank-details-heading h2 {
        margin: 0
    }

.bank-details-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1px;
    margin: 0;
    background: #e4e4e4;
    border: 1px solid #e4e4e4
}

    .bank-details-grid > div {
        padding: 18px 20px;
        background: #fafafa
    }

    .bank-details-grid dt {
        margin-bottom: 5px;
        color: #777;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .5px
    }

    .bank-details-grid dd {
        margin: 0;
        color: #20272b;
        font: 600 21px/1.2 "Saira Condensed",Arial,sans-serif
    }

.bank-note {
    margin: 20px 0 0;
    padding: 13px 16px;
    background: #f3f7e7;
    color: #566118;
    font-size: 13px
}

    .bank-note i {
        margin-right: 8px
    }

/* Customer booking cart */
.detail-booking-action {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px
}

    .detail-booking-action form {
        margin: 0
    }

    .detail-booking-action .template-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 48px;
        border: 0
    }

.detail-book-now {
    background: #3e6274 !important;
    color: #fff !important
}

.detail-booking-note {
    margin: 10px 0 0;
    color: #6b6b6b;
    font-size: 13px
}

.list-cart-form {
    display: inline-block;
    margin: 0
}



.booking-cart-empty {
    padding: 65px 30px;
    background: #fff;
    text-align: center;
    box-shadow: 0 4px 18px rgba(0,0,0,.05)
}

    .booking-cart-empty > i {
        color: var(--harrier-lime);
        font-size: 58px
    }

    .booking-cart-empty h2 {
        margin: 18px 0 10px;
        font: 600 36px/1 "Saira Condensed",Arial,sans-serif;
        text-transform: uppercase
    }

    .booking-cart-empty p {
        margin: 0 auto 25px;
        max-width: 590px;
        color: #666
    }

.booking-cart-layout {
    display: grid;
    grid-template-columns: minmax(0,2fr) minmax(290px,1fr);
    gap: 28px;
    align-items: start
}

.booking-cart-items {
    display: grid;
    gap: 16px
}

.booking-cart-item {
    position: relative;
    display: grid;
    grid-template-columns: 220px minmax(0,1fr) auto;
    gap: 22px;
    align-items: center;
    padding: 18px;
    background: #fff;
    border: 1px solid #e8e8e8
}

.booking-cart-image {
    display: flex;
    width: 220px;
    height: 145px;
    align-items: center;
    justify-content: center;
    background: #fff
}

    .booking-cart-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain
    }

.booking-cart-copy h3 {
    margin: 7px 0 5px;
    font: 600 25px/1.1 "Saira Condensed",Arial,sans-serif
}

    .booking-cart-copy h3 a {
        color: #252a2d
    }

.booking-cart-copy p {
    margin: 0 0 10px;
    color: #777
}

.booking-cart-copy > strong {
    display: block;
    color: #222;
    font: 600 25px/1 "Teko",Arial,sans-serif
}

.booking-cart-copy > small {
    display: block;
    margin-top: 7px;
    color: #6a6a6a
}

.booking-status {
    display: inline-block;
    padding: 4px 9px;
    color: #fff;
    font-size: 11px;
    text-transform: uppercase
}

    .booking-status.is-available {
        background: #58bd68
    }

    .booking-status.is-unavailable {
        background: #ef6262
    }

.booking-cart-remove button, .booking-clear {
    border: 0;
    background: none;
    color: #a14444
}

    .booking-cart-remove button:hover, .booking-clear:hover {
        text-decoration: underline
    }











.booking-continue, .booking-clear {
    display: block;
    margin-top: 14px;
    text-align: center
}

.booking-warning {
    padding: 12px;
    background: #fff0f0;
    color: #9b3030
}

.booking-direct {
    display: grid;
    grid-template-columns: minmax(300px,1fr) minmax(360px,1fr);
    gap: 28px;
    align-items: start
}

.booking-direct-car {
    padding: 25px;
    background: #fff;
    text-align: center
}

    .booking-direct-car img {
        width: 100%;
        height: 310px;
        object-fit: contain
    }

    .booking-direct-car h2 {
        font: 600 32px/1 "Saira Condensed",Arial,sans-serif
    }

    .booking-direct-car strong {
        font: 600 30px/1 "Teko",Arial,sans-serif
    }



/* Bootstrap 3 clearfix pseudo-elements otherwise become invisible CSS-grid items. */
.booking-cart-layout::before, .booking-cart-layout::after {
    display: none !important;
    content: none !important
}

@media(max-width:991px) {
    .showcase-image, .showcase-image-slider, .showcase-image-slide, .showcase-image img {
        height: 235px
    }

    .booking-cart-layout {
        grid-template-columns: 1fr
    }



    .booking-direct {
        grid-template-columns: 1fr
    }

    .detail-page-wrap .product-essential {
        padding: 20px
    }

    .detail-image-slider, .detail-image-slide, .detail-page-wrap .product-image img {
        height: 320px
    }

    .detail-thumb-btn img {
        width: 140px;
        height: 80px
    }

    .product-shop .product-name {
        font-size: 34px
    }

    .spec-title {
        width: 240px;
        font-size: 27px
    }

    .company-card-grid {
        grid-template-columns: 1fr 1fr
    }

    .company-info-card:last-child {
        grid-column: 1/-1
    }

    .bank-details-grid {
        grid-template-columns: 1fr 1fr
    }
}

.ajax-toast-host {
    position: fixed;
    z-index: 9999;
    top: 18px;
    right: 18px;
    display: grid;
    gap: 10px;
    width: min(390px,calc(100vw - 36px))
}

.ajax-toast {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-left: 4px solid #56bd68;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
    opacity: 0;
    transform: translateY(-10px);
    transition: .2s
}

    .ajax-toast.is-visible {
        opacity: 1;
        transform: none
    }

.ajax-toast-error {
    border-left-color: #ef6262
}

.ajax-toast-icon {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #56bd68
}

.ajax-toast-error .ajax-toast-icon {
    background: #ef6262
}

.ajax-toast button {
    border: 0;
    background: none;
    color: #666;
    font-size: 20px
}

.is-ajax-loading {
    position: relative;
    pointer-events: none;
    opacity: .58
}

.ajax-button-loading:after {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    content: "";
    vertical-align: -2px;
    animation: ajax-spin .7s linear infinite
}

.input-validation-error {
    border-color: #c83232 !important
}

.ajax-field-error {
    display: block;
    margin-top: 5px;
    color: #b42318;
    font-size: 12px
}

@keyframes ajax-spin {
    to {
        transform: rotate(360deg)
    }
}

.grid-listing-layout #sort-by, .grid-listing-layout #limiter {
    display: flex;
    align-items: center;
    gap: 7px
}

    .grid-listing-layout #sort-by select, .grid-listing-layout #limiter select {
        height: 42px;
        padding: 0 28px 0 10px;
        border: 1px solid #ddd;
        background-color: #fff;
        color: #666;
        font-size: 13px;
        line-height: 42px
    }

    .grid-listing-layout #sort-by label, .grid-listing-layout #limiter label {
        margin: 0;
        white-space: nowrap
    }

.grid-listing-layout #sort-by {
    width: auto
}

.grid-listing-layout #limiter {
    float: none;
    width: auto
}

@media(max-width:767px) {
    .showcase-image, .showcase-image-slider, .showcase-image-slide, .showcase-image img {
        height: 255px
    }

    .showcase-image-nav {
        opacity: 1;
        visibility: visible;
        pointer-events: auto
    }



    .booking-cart-item {
        grid-template-columns: 100px 1fr;
        gap: 14px
    }

    .booking-cart-image {
        width: 100px;
        height: 90px
    }

    .booking-cart-remove {
        grid-column: 1/-1;
        text-align: right
    }



    .booking-direct-car img {
        height: 230px
    }

    .detail-booking-action {
        display: grid
    }

        .detail-booking-action form, .detail-booking-action .template-btn {
            width: 100%
        }

    .grid-listing-layout .item-img-info, .grid-listing-layout .car-card-slider, .grid-listing-layout .item-img-info .product-image {
        height: 245px
    }

        .grid-listing-layout .item-img-info .product-image img {
            max-height: 245px
        }

    .grid-listing-layout .car-card-slider-nav {
        opacity: 1;
        visibility: visible;
        pointer-events: auto
    }

    .detail-hero-banner {
        min-height: 160px;
        padding: 34px 0 28px
    }

    .detail-page-title {
        font-size: 46px
    }

    .detail-page-wrap {
        padding: 20px 0 35px
    }

        .detail-page-wrap .product-essential {
            padding: 15px
        }

        .detail-image-slider, .detail-image-slide, .detail-page-wrap .product-image img {
            height: 250px
        }

    .detail-image-nav {
        width: 39px;
        height: 48px;
        margin-top: -24px;
        font-size: 25px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto
    }

    .detail-image-prev {
        left: 7px
    }

    .detail-image-next {
        right: 7px
    }

    .product-image-thumbs {
        gap: 10px
    }

    .detail-thumb-btn img {
        width: 96px;
        height: 60px
    }

    .detail-cta {
        height: 50px;
        font-size: 19px
    }

    .product-shop .product-name {
        font-size: 29px
    }

    .price-block {
        font-size: 26px
    }

    .spec-title {
        width: 210px;
        height: 60px;
        font-size: 24px
    }

    .spec-table td {
        display: block;
        width: 100% !important;
        padding: 10px 12px
    }

    .detail-tabs > li {
        float: none;
        width: 100%
    }

        .detail-tabs > li > a {
            display: block
        }

    .detail-check-list {
        columns: 1
    }

    .smg-brand {
        font-size: 31px;
        letter-spacing: 1px
    }

    .company-card-grid, .bank-details-grid {
        grid-template-columns: 1fr
    }

    .company-info-card:last-child {
        grid-column: auto
    }

    .company-info-card {
        min-height: 0
    }

    .company-intro h2, .bank-details-heading h2 {
        font-size: 30px
    }

    .bank-details-panel {
        padding: 22px
    }

    .bank-details-heading {
        align-items: flex-start
    }

    .company-info-card dl {
        grid-template-columns: 1fr
    }

    .company-info-card dt {
        margin-top: 4px
    }
}

/* =========================================================
   SMG Japan Customer Navbar Logo
   Uses the horizontal dark-navy logo on the lime header panel.
   Expected file:
   /images/branding/customer/smg-japan-navbar.svg
   ========================================================= */

.harrier-logo-panel .smg-brand-link {
    position: relative;
    z-index: 2;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 8px 0;
    line-height: 1;
    text-decoration: none !important;
}

    .harrier-logo-panel .smg-brand-link:hover, .harrier-logo-panel .smg-brand-link:focus {
        text-decoration: none !important;
        outline: none;
    }

.harrier-logo-panel .smg-customer-navbar-logo {
    display: block;
    width: 372px;
    max-width: 100%;
    height: auto;
    max-height: 243px;
    object-fit: contain;
    object-position: right center;
    filter: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.harrier-logo-panel .smg-brand-link:hover .smg-customer-navbar-logo {
    opacity: 0.96;
    transform: scale(1.012);
}

.harrier-logo-panel .smg-brand-link:focus-visible {
    outline: 2px solid var(--harrier-dark);
    outline-offset: 3px;
}

/* Medium desktop */
@media (max-width: 1199px) {
    .harrier-logo-panel .smg-customer-navbar-logo {
        width: 250px;
        max-height: 155px;
    }
}

/* Tablet */
@media (max-width: 991px) {
    .harrier-logo-panel .smg-customer-navbar-logo {
        width: 250px;
        max-height: 155px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .harrier-logo-panel .smg-brand-link {
        justify-content: flex-start;
        padding: 7px 0;
    }

    .harrier-logo-panel .smg-customer-navbar-logo {
        width: 217px;
        max-width: calc(100% - 6px);
        max-height: 155px;
        object-position: left center;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .harrier-logo-panel .smg-customer-navbar-logo {
        width: 145px;
        max-height: 44px;
    }
}

/* All three diamond buttons */
.showcase-hover-actions .showcase-action {
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
}

/* First cart form and its actual button */
.showcase-hover-actions .showcase-cart-form {
    width: 42px;
    height: 42px;
    margin: 0;
}

    .showcase-hover-actions .showcase-cart-form .showcase-action-cart {
        width: 42px !important;
        height: 42px !important;
    }

/* Icons */
.showcase-hover-actions .showcase-action i {
    font-size: 16px !important;
}

/* Cart glyph slightly smaller */
.showcase-hover-actions .showcase-action-cart i {
    font-size: 13px !important;
}

/* =========================================================
   Professional Vehicle Details Page
   Namespaced to avoid affecting other customer pages.
   ========================================================= */

.vehicle-detail-page, .vehicle-detail-page *, .vehicle-detail-page *::before, .vehicle-detail-page *::after, .vehicle-detail-hero, .vehicle-detail-hero *, .vehicle-detail-hero *::before, .vehicle-detail-hero *::after {
    box-sizing: border-box;
}

/* Compact page banner */

.vehicle-detail-hero {
    position: relative;
    overflow: hidden;
    min-height: 0;
    padding: 29px 0 31px;
    background: linear-gradient( 90deg, rgba(12, 18, 22, 0.94), rgba(22, 40, 49, 0.82) ), url("../customer-template/images/category-bg.jpg") center 54% / cover no-repeat;
    color: #ffffff;
}

    .vehicle-detail-hero::after {
        position: absolute;
        right: -80px;
        bottom: -120px;
        width: 340px;
        height: 220px;
        border: 54px solid rgba(218, 250, 29, 0.08);
        border-radius: 50%;
        content: "";
        pointer-events: none;
    }

    .vehicle-detail-hero .container {
        position: relative;
        z-index: 1;
    }

.vehicle-detail-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
}

    .vehicle-detail-breadcrumbs a {
        color: rgba(255, 255, 255, 0.82);
        text-decoration: none;
    }

        .vehicle-detail-breadcrumbs a:hover {
            color: var(--harrier-lime);
        }

    .vehicle-detail-breadcrumbs i {
        color: rgba(255, 255, 255, 0.42);
    }

    .vehicle-detail-breadcrumbs span {
        color: #ffffff;
        font-weight: 600;
    }

.vehicle-detail-hero-content {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
}

.vehicle-detail-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--harrier-lime);
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.25px;
    text-transform: uppercase;
}

.vehicle-detail-hero h1 {
    margin: 0 0 5px;
    color: #ffffff;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 35px;
    font-weight: 650;
    line-height: 1.1;
}

.vehicle-detail-hero p {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    line-height: 1.55;
}

.vehicle-back-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

    .vehicle-back-link:hover, .vehicle-back-link:focus {
        border-color: var(--harrier-lime);
        background: var(--harrier-lime);
        color: var(--harrier-dark);
        text-decoration: none;
    }

/* Main layout */

.vehicle-detail-page {
    padding: 34px 0 52px;
    background: #f3f5f7;
}

.vehicle-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
    gap: 24px;
    align-items: start;
}

.vehicle-gallery-card, .vehicle-summary-card, .vehicle-information-card {
    border: 1px solid #e1e6eb;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(26, 38, 47, 0.055);
}

.vehicle-gallery-card {
    overflow: hidden;
}

.vehicle-card-header, .vehicle-information-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 18px;
    border-bottom: 1px solid #e7ebef;
    background: #fbfcfd;
}

.vehicle-card-kicker {
    display: block;
    margin-bottom: 2px;
    color: #7e8b95;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.vehicle-card-header h2, .vehicle-information-header h2 {
    margin: 0;
    color: #17232c;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 19px;
    font-weight: 650;
    line-height: 1.2;
}

.vehicle-image-count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 29px;
    padding: 5px 9px;
    border: 1px solid #dde4ea;
    background: #ffffff;
    color: #64727d;
    font-size: 9px;
    font-weight: 700;
}

/* Gallery */

.vehicle-main-image {
    position: relative;
    height: 470px;
    overflow: hidden;
    background: #edf0f2;
}

    .vehicle-main-image .detail-image-slide {
        height: 470px;
    }

        .vehicle-main-image .detail-image-slide img {
            display: block;
            width: 100%;
            height: 470px;
            object-fit: cover;
            object-position: center;
        }

.vehicle-availability-badge {
    position: absolute;
    z-index: 25;
    top: 15px;
    left: 15px;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 3px;
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.14);
}

    .vehicle-availability-badge.is-available {
        background: #43ad57;
    }

    .vehicle-availability-badge.is-unavailable {
        background: #c84b52;
    }

.vehicle-main-image .detail-image-nav {
    width: 38px;
    height: 48px;
    margin-top: -24px;
    font-size: 24px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}

.vehicle-main-image .detail-image-prev {
    left: 13px;
}

.vehicle-main-image .detail-image-next {
    right: 13px;
}

.vehicle-thumbnail-strip {
    padding: 13px 14px 14px;
    border-top: 1px solid #e4e9ed;
    background: #ffffff;
}

.vehicle-thumbnails {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 0 0 3px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: thin;
}

    .vehicle-thumbnails li {
        flex: 0 0 auto;
        margin: 0;
    }

    .vehicle-thumbnails .detail-thumb-btn {
        display: block;
        width: 76px !important;
        height: 58px !important;
        padding: 2px !important;
        border: 2px solid transparent !important;
        border-radius: 3px !important;
        background: #ffffff !important;
        opacity: 0.62;
    }

        .vehicle-thumbnails .detail-thumb-btn.is-active {
            border-color: var(--harrier-lime) !important;
            opacity: 1;
        }

        .vehicle-thumbnails .detail-thumb-btn img {
            display: block;
            width: 100% !important;
            height: 100% !important;
            border-radius: 1px;
            object-fit: cover;
        }

/* Summary */

.vehicle-summary-card {
    padding: 20px;
}

.vehicle-summary-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e9ed;
}

.vehicle-company {
    display: block;
    margin-bottom: 3px;
    color: #6e7b85;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.vehicle-summary-top h2 {
    margin: 0 0 2px;
    color: #17232c;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 32px;
    font-weight: 650;
    line-height: 1.05;
}

.vehicle-model-line {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: #7b8790;
    font-size: 10px;
}

.vehicle-summary-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 27px;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

    .vehicle-summary-status.is-available {
        background: #e7f7ea;
        color: #23833a;
    }

    .vehicle-summary-status.is-unavailable {
        background: #fdeced;
        color: #b43640;
    }

.vehicle-price-block {
    padding: 18px 0 16px;
}

    .vehicle-price-block > span {
        display: block;
        margin-bottom: 2px;
        color: #7d8992;
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 0.55px;
        text-transform: uppercase;
    }

    .vehicle-price-block strong {
        display: block;
        margin-bottom: 4px;
        color: #e9524c;
        font-family: "Teko", Arial, sans-serif;
        font-size: 36px;
        font-weight: 500;
        line-height: 1;
    }

    .vehicle-price-block small {
        display: block;
        color: #8b959d;
        font-size: 8.5px;
        line-height: 1.45;
    }

/* Key specifications */

.vehicle-key-specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

    .vehicle-key-specs article {
        min-width: 0;
        min-height: 75px;
        padding: 10px;
        border: 1px solid #e3e8ec;
        background: #fbfcfd;
    }

    .vehicle-key-specs i {
        display: block;
        margin-bottom: 6px;
        color: #4b7183;
        font-size: 14px;
    }

    .vehicle-key-specs span {
        display: block;
        margin-bottom: 2px;
        color: #8a949c;
        font-size: 7.5px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .vehicle-key-specs strong {
        display: block;
        overflow: hidden;
        color: #25323a;
        font-size: 9px;
        font-weight: 750;
        line-height: 1.3;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* Booking panel */

.vehicle-booking-panel {
    margin-bottom: 13px;
    padding: 14px;
    border: 1px solid #dce5c0;
    border-left: 4px solid var(--harrier-lime);
    background: #fbfdec;
}

.vehicle-booking-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 7px;
}

.vehicle-booking-icon {
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    background: var(--harrier-lime);
    color: #28333a;
    font-size: 13px;
}

.vehicle-booking-heading span:not(.vehicle-booking-icon) {
    display: block;
    margin-bottom: 1px;
    color: #6d786c;
    font-size: 7.5px;
    font-weight: 700;
    text-transform: uppercase;
}

.vehicle-booking-heading strong {
    display: block;
    color: #1c2930;
    font-size: 13px;
    font-weight: 800;
}

.vehicle-booking-panel > p {
    margin: 0 0 11px;
    color: #69756c;
    font-size: 8.5px;
    line-height: 1.5;
}

.vehicle-booking-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

    .vehicle-booking-actions form {
        margin: 0;
    }

.vehicle-primary-button, .vehicle-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 0;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.vehicle-primary-button {
    border-color: var(--harrier-lime);
    background: var(--harrier-lime);
    color: #1b252b;
}

.vehicle-secondary-button {
    border-color: #3f6679;
    background: #3f6679;
    color: #ffffff;
}

.vehicle-primary-button:hover, .vehicle-primary-button:focus {
    border-color: #bfdc00;
    background: #bfdc00;
    color: #1b252b;
    text-decoration: none;
}

.vehicle-secondary-button:hover, .vehicle-secondary-button:focus {
    border-color: #2e5365;
    background: #2e5365;
    color: #ffffff;
}

.vehicle-unavailable-panel {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 13px;
    padding: 13px;
    border: 1px solid #efd7d9;
    background: #fff5f6;
    color: #9f343c;
}

    .vehicle-unavailable-panel i {
        margin-top: 2px;
        font-size: 15px;
    }

    .vehicle-unavailable-panel strong, .vehicle-unavailable-panel span {
        display: block;
    }

    .vehicle-unavailable-panel strong {
        margin-bottom: 2px;
        font-size: 10px;
    }

    .vehicle-unavailable-panel span {
        color: #996a6e;
        font-size: 8.5px;
        line-height: 1.45;
    }

/* Contact and assurance */

.vehicle-contact-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 13px;
}

    .vehicle-contact-actions > a {
        display: flex;
        align-items: center;
        gap: 9px;
        min-height: 51px;
        padding: 9px 10px;
        border: 1px solid #e0e5e9;
        background: #ffffff;
        color: #28353d;
        text-decoration: none;
    }

        .vehicle-contact-actions > a:hover {
            border-color: #b8c9d2;
            background: #f8fafb;
            color: #28353d;
            text-decoration: none;
        }

    .vehicle-contact-actions i {
        flex: 0 0 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #edf4f7;
        color: #3f6679;
        font-size: 12px;
    }

    .vehicle-contact-actions span {
        min-width: 0;
        color: #233139;
        font-size: 9px;
        font-weight: 750;
        line-height: 1.25;
    }

    .vehicle-contact-actions small {
        display: block;
        margin-bottom: 2px;
        color: #8a949b;
        font-size: 7px;
        font-weight: 600;
    }

.vehicle-assurance-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 0;
    padding: 11px 0 0;
    border-top: 1px solid #e6eaed;
    list-style: none;
}

    .vehicle-assurance-list li {
        display: flex;
        align-items: center;
        gap: 7px;
        color: #65727a;
        font-size: 8.5px;
    }

    .vehicle-assurance-list i {
        color: #35a951;
    }

/* Information area */

.vehicle-information-card {
    margin-top: 24px;
    overflow: hidden;
}

.vehicle-information-header {
    padding: 15px 18px;
}

.vehicle-information-tabs {
    display: flex;
    margin: 0;
    padding: 0 18px;
    border-bottom: 1px solid #dfe5e9;
    background: #ffffff;
}

    .vehicle-information-tabs > li {
        float: none;
        margin: 0 3px 0 0;
    }

        .vehicle-information-tabs > li > a {
            display: flex;
            align-items: center;
            gap: 7px;
            min-height: 46px;
            margin: 0;
            padding: 10px 14px;
            border: 0 !important;
            border-bottom: 3px solid transparent !important;
            border-radius: 0;
            background: transparent !important;
            color: #66747d;
            font-family: "Saira Condensed", Arial, sans-serif;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
        }

            .vehicle-information-tabs > li > a:hover, .vehicle-information-tabs > li.active > a, .vehicle-information-tabs > li.active > a:hover, .vehicle-information-tabs > li.active > a:focus {
                border-bottom-color: var(--harrier-lime) !important;
                background: transparent !important;
                color: #17232c;
            }

                .vehicle-information-tabs > li.active > a i {
                    color: #718700;
                }

.vehicle-information-content {
    min-height: 235px;
    padding: 22px;
}

.vehicle-overview-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.65fr);
    gap: 28px;
}

    .vehicle-overview-layout h3 {
        margin: 0 0 10px;
        color: #1e2b33;
        font-family: "Saira Condensed", Arial, sans-serif;
        font-size: 20px;
        font-weight: 650;
    }

.vehicle-description, .vehicle-description p {
    color: #5f6c74;
    font-size: 11px;
    line-height: 1.75;
}

.vehicle-description {
    white-space: pre-line;
}

.vehicle-company-note {
    margin: 15px 0 0;
    padding: 11px 13px;
    border-left: 3px solid var(--harrier-lime);
    background: #f8fafb;
    color: #637079;
    font-size: 9px;
    line-height: 1.55;
}

.vehicle-overview-highlight {
    padding: 15px;
    border: 1px solid #e0e6ea;
    background: #f8fafb;
}

    .vehicle-overview-highlight > span {
        display: block;
        margin-bottom: 8px;
        color: #76838c;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 0.6px;
        text-transform: uppercase;
    }

    .vehicle-overview-highlight dl {
        margin: 0;
    }

        .vehicle-overview-highlight dl > div {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 8px 0;
            border-bottom: 1px solid #e2e7ea;
        }

            .vehicle-overview-highlight dl > div:last-child {
                border-bottom: 0;
            }

    .vehicle-overview-highlight dt, .vehicle-overview-highlight dd {
        margin: 0;
        font-size: 9px;
    }

    .vehicle-overview-highlight dt {
        color: #7c8890;
        font-weight: 600;
    }

    .vehicle-overview-highlight dd {
        color: #26343c;
        font-weight: 750;
        text-align: right;
    }

.vehicle-specification-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid #e3e8ec;
    border-left: 1px solid #e3e8ec;
}

    .vehicle-specification-grid > div {
        min-width: 0;
        padding: 13px 14px;
        border-right: 1px solid #e3e8ec;
        border-bottom: 1px solid #e3e8ec;
        background: #ffffff;
    }

    .vehicle-specification-grid span {
        display: block;
        margin-bottom: 3px;
        color: #87929a;
        font-size: 7.5px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .vehicle-specification-grid strong {
        display: block;
        overflow: hidden;
        color: #27343c;
        font-size: 9.5px;
        font-weight: 750;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.vehicle-process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

    .vehicle-process-grid article {
        position: relative;
        min-height: 180px;
        padding: 17px;
        border: 1px solid #e1e6ea;
        background: #fbfcfd;
    }

        .vehicle-process-grid article > span {
            position: absolute;
            top: 12px;
            right: 13px;
            color: #dce3e7;
            font-family: "Teko", Arial, sans-serif;
            font-size: 30px;
            line-height: 1;
        }

    .vehicle-process-grid i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 39px;
        height: 39px;
        margin-bottom: 12px;
        border-radius: 7px;
        background: #eef4f7;
        color: #3f6679;
        font-size: 15px;
    }

    .vehicle-process-grid h3 {
        margin: 0 0 5px;
        color: #223038;
        font-family: "Saira Condensed", Arial, sans-serif;
        font-size: 16px;
        font-weight: 700;
    }

    .vehicle-process-grid p {
        margin: 0;
        color: #748088;
        font-size: 9px;
        line-height: 1.55;
    }

.vehicle-process-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 13px;
    padding: 11px 13px;
    border: 1px solid #dbe4e9;
    background: #f6f9fa;
}

    .vehicle-process-note i {
        margin-top: 2px;
        color: #3f6679;
        font-size: 14px;
    }

    .vehicle-process-note p {
        margin: 0;
        color: #68757d;
        font-size: 9px;
        line-height: 1.55;
    }

/* Responsive */

@media (max-width: 1199px) {
    .vehicle-detail-grid {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
    }

    .vehicle-main-image, .vehicle-main-image .detail-image-slide, .vehicle-main-image .detail-image-slide img {
        height: 420px;
    }

    .vehicle-key-specs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .vehicle-detail-grid {
        grid-template-columns: 1fr;
    }

    .vehicle-summary-card {
        padding: 18px;
    }

    .vehicle-key-specs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .vehicle-overview-layout {
        grid-template-columns: 1fr;
    }

    .vehicle-specification-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .vehicle-detail-hero {
        padding: 23px 0 25px;
    }

    .vehicle-detail-hero-content {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .vehicle-detail-hero h1 {
        font-size: 29px;
    }

    .vehicle-back-link {
        min-height: 36px;
    }

    .vehicle-detail-page {
        padding: 22px 0 36px;
    }

    .vehicle-card-header, .vehicle-information-header {
        padding: 13px 14px;
    }

    .vehicle-main-image, .vehicle-main-image .detail-image-slide, .vehicle-main-image .detail-image-slide img {
        height: 340px;
    }

        .vehicle-main-image .detail-image-nav {
            width: 34px;
            height: 44px;
            margin-top: -22px;
        }

    .vehicle-summary-top {
        flex-direction: column;
    }

    .vehicle-key-specs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vehicle-booking-actions, .vehicle-contact-actions {
        grid-template-columns: 1fr;
    }

    .vehicle-information-tabs {
        padding: 0 10px;
        overflow-x: auto;
        white-space: nowrap;
    }

        .vehicle-information-tabs > li > a {
            min-height: 43px;
            padding: 9px 11px;
            font-size: 11px;
        }

    .vehicle-information-content {
        padding: 16px;
    }

    .vehicle-specification-grid, .vehicle-process-grid {
        grid-template-columns: 1fr;
    }

        .vehicle-process-grid article {
            min-height: 0;
        }
}

@media (max-width: 480px) {
    .vehicle-detail-breadcrumbs {
        font-size: 9px;
    }

    .vehicle-detail-hero h1 {
        font-size: 25px;
    }

    .vehicle-main-image, .vehicle-main-image .detail-image-slide, .vehicle-main-image .detail-image-slide img {
        height: 285px;
    }

    .vehicle-thumbnails .detail-thumb-btn {
        width: 66px !important;
        height: 51px !important;
    }

    .vehicle-summary-card {
        padding: 14px;
    }

    .vehicle-summary-top h2 {
        font-size: 28px;
    }

    .vehicle-price-block strong {
        font-size: 32px;
    }

    .vehicle-key-specs {
        grid-template-columns: 1fr 1fr;
    }

        .vehicle-key-specs article {
            min-height: 70px;
        }
}

/* =========================================================
   Vehicle Details — Final Responsive Corrections
   Keep this block at the END of customer-overrides.css.
   ========================================================= */

/* Use one predictable content width instead of inheriting
   conflicting template container widths. */
.vehicle-detail-hero > .container, .vehicle-detail-page > .container {
    width: min(calc(100% - 32px), 1320px) !important;
    max-width: 1320px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Prevent grid children, long text and controls from forcing
   the page wider than the browser viewport. */
.vehicle-detail-hero-content, .vehicle-detail-hero-content > div, .vehicle-detail-grid, .vehicle-detail-grid > *, .vehicle-summary-card, .vehicle-information-card, .vehicle-overview-layout, .vehicle-overview-layout > *, .vehicle-information-content, .vehicle-process-grid, .vehicle-specification-grid {
    min-width: 0;
}

    .vehicle-detail-hero h1, .vehicle-detail-hero p, .vehicle-description, .vehicle-company-note, .vehicle-process-grid p, .vehicle-process-note p {
        overflow-wrap: anywhere;
        word-break: normal;
    }

.vehicle-back-link {
    max-width: 100%;
    white-space: nowrap;
}

/* The image now scales by aspect ratio instead of fixed
   desktop heights, so it remains proportional at every width. */
.vehicle-main-image {
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 10;
}

    .vehicle-main-image .detail-image-slide {
        width: 100%;
        height: 100% !important;
    }

        .vehicle-main-image .detail-image-slide img {
            width: 100%;
            height: 100% !important;
            object-fit: cover;
            object-position: center;
        }

/* Force Bootstrap/template tab rules to use the complete card width. */
.vehicle-information-tabs {
    display: flex !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

    .vehicle-information-tabs::before, .vehicle-information-tabs::after {
        display: none !important;
        content: none !important;
    }

    .vehicle-information-tabs > li {
        float: none !important;
    }

.vehicle-information-content, .vehicle-information-content > .tab-pane {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
}

/* Keep the lower information section inside its own boundaries. */
.vehicle-information-card {
    position: relative;
    clear: both;
    width: 100%;
    overflow: hidden;
}

.vehicle-overview-highlight {
    min-width: 0;
    overflow: hidden;
}

    .vehicle-overview-highlight dd {
        max-width: 62%;
        overflow-wrap: anywhere;
    }

/* Better desktop proportions. */
@media (min-width: 1200px) {
    .vehicle-detail-grid {
        grid-template-columns: minmax(0, 1.12fr) minmax(420px, 0.88fr);
    }
}

/* Switch to a single-column layout before the two cards become
   compressed. This also covers smaller laptops and browser zoom. */
@media (max-width: 1199px) {
    .vehicle-detail-hero > .container, .vehicle-detail-page > .container {
        width: min(calc(100% - 28px), 1040px) !important;
    }

    .vehicle-detail-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .vehicle-gallery-card, .vehicle-summary-card {
        width: 100%;
    }

    .vehicle-main-image {
        aspect-ratio: 16 / 9;
    }

    .vehicle-key-specs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .vehicle-overview-layout {
        grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr);
    }
}

/* Tablet */
@media (max-width: 991px) {
    .vehicle-detail-hero-content {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .vehicle-back-link {
        align-self: flex-start;
    }

    .vehicle-main-image {
        aspect-ratio: 16 / 10;
    }

    .vehicle-overview-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .vehicle-process-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 767px) {
    .vehicle-detail-hero > .container, .vehicle-detail-page > .container {
        width: calc(100% - 24px) !important;
    }

    .vehicle-detail-breadcrumbs {
        max-width: 100%;
        overflow-x: auto;
        padding-bottom: 3px;
        white-space: nowrap;
        scrollbar-width: none;
    }

        .vehicle-detail-breadcrumbs::-webkit-scrollbar {
            display: none;
        }

    .vehicle-detail-hero h1 {
        font-size: 27px;
    }

    .vehicle-detail-hero p {
        font-size: 11px;
    }

    .vehicle-main-image {
        aspect-ratio: 4 / 3;
    }

    .vehicle-card-header {
        align-items: flex-start;
    }

    .vehicle-key-specs {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .vehicle-contact-actions, .vehicle-booking-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .vehicle-information-tabs {
        justify-content: flex-start;
        overflow-x: auto;
        padding: 0 10px !important;
        white-space: nowrap;
        scrollbar-width: thin;
    }

        .vehicle-information-tabs > li {
            flex: 0 0 auto;
        }

    .vehicle-information-content {
        padding: 15px !important;
    }

    .vehicle-specification-grid, .vehicle-process-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .vehicle-overview-highlight dd {
        max-width: 58%;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .vehicle-detail-hero > .container, .vehicle-detail-page > .container {
        width: calc(100% - 20px) !important;
    }

    .vehicle-detail-hero h1 {
        font-size: 24px;
    }

    .vehicle-main-image {
        aspect-ratio: 1 / 1;
    }

    .vehicle-card-header, .vehicle-information-header, .vehicle-summary-card {
        padding-right: 12px;
        padding-left: 12px;
    }

    .vehicle-key-specs {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .vehicle-summary-top {
        gap: 10px;
    }

    .vehicle-summary-status {
        align-self: flex-start;
    }

    .vehicle-price-block strong {
        font-size: 30px;
    }

    .vehicle-thumbnails .detail-thumb-btn {
        width: 62px !important;
        height: 48px !important;
    }

    .vehicle-information-tabs > li > a {
        padding-right: 9px;
        padding-left: 9px;
        font-size: 10px;
    }

    .vehicle-overview-highlight dl > div {
        align-items: flex-start;
    }
}

/* =========================================================
   Customer Home Page — Scoped Layout Restoration
   This block prevents vehicle-detail responsive rules from
   changing the public home page.
   ========================================================= */

.customer-home-page {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    background: #f3f3f3;
}

    .customer-home-page *, .customer-home-page *::before, .customer-home-page *::after {
        box-sizing: border-box;
    }

    /* Hero slider */

    .customer-home-page .home-slider5, .customer-home-page .home-slider5 .thmg-slideshow, .customer-home-page .home-slider5 .rev_slider_wrapper, .customer-home-page .home-slider5 .rev_slider {
        width: 100% !important;
        max-width: none !important;
    }

    .customer-home-page .home-slider5 {
        overflow: hidden;
    }

        .customer-home-page .home-slider5 .container {
            width: min(calc(100% - 32px), 1170px) !important;
            max-width: 1170px !important;
            margin-right: auto !important;
            margin-left: auto !important;
            padding-right: 15px !important;
            padding-left: 15px !important;
        }

        .customer-home-page .home-slider5 .content_slideshow, .customer-home-page .home-slider5 .content_slideshow .row, .customer-home-page .home-slider5 .content_slideshow .info {
            min-width: 0;
            max-width: 100%;
        }

            .customer-home-page .home-slider5 .content_slideshow .info {
                margin-left: 0 !important;
            }

        .customer-home-page .home-slider5 .tp-caption {
            max-width: min(620px, calc(100vw - 96px)) !important;
            white-space: normal !important;
        }

    .customer-home-page .home-slide-title-line {
        display: block;
        font-weight: normal;
    }

    /* Search panel */

    .customer-home-page .harrier-search-wrap {
        width: 100%;
        padding-right: 16px;
        padding-left: 16px;
    }

    .customer-home-page .harrier-search-panel {
        width: min(100%, 1170px) !important;
        max-width: 1170px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .customer-home-page .harrier-search-form > * {
        min-width: 0;
    }

    /* Product showcases */

    .customer-home-page .harrier-product-section {
        width: 100%;
        padding-right: 16px;
        padding-left: 16px;
    }

        .customer-home-page .harrier-product-section > .container {
            width: min(100%, 1170px) !important;
            max-width: 1170px !important;
            margin-right: auto !important;
            margin-left: auto !important;
            padding-right: 0 !important;
            padding-left: 0 !important;
        }

    .customer-home-page .showcase-heading {
        overflow: hidden;
    }

    .customer-home-page .showcase-cars {
        min-width: 100%;
    }

    /* One database vehicle should not sit against the far-left
   with an empty three-card area. */
    .customer-home-page .showcase-car:only-child {
        flex: 0 0 320px;
        width: 320px;
        max-width: 100%;
        margin-right: auto;
        margin-left: auto;
        border-right: 1px solid #dddddd;
        border-left: 1px solid #dddddd;
    }

    /* Two cards are centred without changing carousel behaviour
   when four or more vehicles are available. */
    .customer-home-page .showcase-car:first-child:nth-last-child(2) {
        margin-left: auto;
    }

    .customer-home-page .showcase-car:nth-child(2):last-child {
        margin-right: auto;
    }

    /* Reviews */

    .customer-home-page .harrier-reviews > .container {
        width: min(calc(100% - 32px), 1170px) !important;
        max-width: 1170px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

/* Vehicle detail mobile tabs — no horizontal scrollbar. */

@media (max-width: 767px) {
    .vehicle-information-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100% !important;
        padding: 0 8px !important;
        overflow: visible !important;
        white-space: normal !important;
    }

        .vehicle-information-tabs > li {
            float: none !important;
            width: auto !important;
            min-width: 0 !important;
            margin: 0 !important;
        }

            .vehicle-information-tabs > li > a {
                display: flex !important;
                align-items: center;
                justify-content: center;
                gap: 5px;
                width: 100%;
                min-height: 52px;
                padding: 8px 5px !important;
                font-size: 9px !important;
                line-height: 1.25;
                text-align: center;
                white-space: normal !important;
            }
}

/* Home page responsive behaviour */

@media (max-width: 1199px) {
    .customer-home-page .home-slider5 .container, .customer-home-page .harrier-search-panel, .customer-home-page .harrier-product-section > .container, .customer-home-page .harrier-reviews > .container {
        max-width: 970px !important;
    }

    .customer-home-page .showcase-timer {
        margin-left: 40px;
    }
}

@media (max-width: 991px) {
    .customer-home-page .home-slider5 .container, .customer-home-page .harrier-search-panel, .customer-home-page .harrier-product-section > .container, .customer-home-page .harrier-reviews > .container {
        max-width: 750px !important;
    }

    .customer-home-page .home-slider5 .tp-caption {
        max-width: min(520px, calc(100vw - 72px)) !important;
    }

    .customer-home-page .showcase-timer {
        margin-left: 16px;
    }
}

@media (max-width: 767px) {
    .customer-home-page .home-slider5 .container {
        width: calc(100% - 20px) !important;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    .customer-home-page .home-slider5 .tp-caption {
        max-width: calc(100vw - 68px) !important;
    }

    .customer-home-page .harrier-search-wrap {
        padding-right: 12px;
        padding-left: 12px;
    }

    .customer-home-page .harrier-search-panel {
        width: 100% !important;
    }

    .customer-home-page .harrier-product-section {
        padding: 30px 12px;
    }

    .customer-home-page .showcase-heading {
        height: auto;
        min-height: 62px;
    }

        .customer-home-page .showcase-heading h2 {
            width: min(230px, 68%);
            min-height: 62px;
            padding-right: 30px;
            padding-left: 18px;
        }

    .customer-home-page .showcase-arrows {
        padding-right: 10px;
    }

    .customer-home-page .showcase-car:only-child {
        flex-basis: min(100%, 360px);
        width: min(100%, 360px);
    }
}

@media (max-width: 480px) {
    .customer-home-page .home-slider5 .tp-caption {
        max-width: calc(100vw - 52px) !important;
    }

    .customer-home-page .harrier-search-panel {
        padding: 22px 14px;
    }

        .customer-home-page .harrier-search-panel h2 {
            margin-bottom: 20px;
            font-size: 27px;
        }

    .customer-home-page .showcase-heading h2 {
        width: 70%;
        font-size: 21px;
    }
}

/* =========================================================
   Vehicle Catalogue — Grid & List Views
   Fully scoped so Home and Vehicle Details remain unchanged.
   ========================================================= */

.vehicle-catalog-hero, .vehicle-catalog-hero *, .vehicle-catalog-page, .vehicle-catalog-page *, .vehicle-catalog-page *::before, .vehicle-catalog-page *::after {
    box-sizing: border-box;
}

.vehicle-catalog-container {
    width: min(calc(100% - 32px), 1320px);
    max-width: 1320px;
    margin-right: auto;
    margin-left: auto;
}

/* Hero */

.vehicle-catalog-hero {
    position: relative;
    overflow: hidden;
    padding: 31px 0 34px;
    background: linear-gradient( 90deg, rgba(11, 18, 23, 0.95), rgba(30, 54, 65, 0.82) ), url("../customer-template/images/category-bg.jpg") center 57% / cover no-repeat;
    color: #ffffff;
}

    .vehicle-catalog-hero::after {
        position: absolute;
        right: -90px;
        bottom: -145px;
        width: 390px;
        height: 260px;
        border: 58px solid rgba(218, 250, 29, 0.07);
        border-radius: 50%;
        content: "";
        pointer-events: none;
    }

.vehicle-catalog-breadcrumbs {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
}

    .vehicle-catalog-breadcrumbs a {
        color: rgba(255, 255, 255, 0.82);
        text-decoration: none;
    }

        .vehicle-catalog-breadcrumbs a:hover {
            color: var(--harrier-lime);
        }

.vehicle-catalog-eyebrow {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 3px;
    color: var(--harrier-lime);
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.15px;
    text-transform: uppercase;
}

.vehicle-catalog-hero h1 {
    position: relative;
    z-index: 1;
    margin: 0 0 5px;
    color: #ffffff;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 35px;
    font-weight: 650;
    line-height: 1.08;
}

.vehicle-catalog-hero p {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    line-height: 1.55;
}

/* Main shell */

.vehicle-catalog-page {
    padding: 30px 0 48px;
    background: #f3f5f7;
}

.vehicle-catalog-shell {
    display: grid;
    grid-template-columns: 288px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.vehicle-catalog-results {
    min-width: 0;
}

/* Filter card */

.vehicle-filter-card {
    position: sticky;
    top: 18px;
    overflow: hidden;
    border: 1px solid #dfe5ea;
    background: #ffffff;
    box-shadow: 0 7px 22px rgba(24, 40, 50, 0.055);
}

.vehicle-filter-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid #dfe6ea;
    background: #3f6679;
    color: #ffffff;
}

.vehicle-filter-icon {
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--harrier-lime);
    color: #25343c;
    font-size: 13px;
}

.vehicle-filter-header span:not(.vehicle-filter-icon) {
    display: block;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.65px;
    text-transform: uppercase;
}

.vehicle-filter-header h2 {
    margin: 0 0 3px;
    color: #ffffff;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 20px;
    font-weight: 650;
}

.vehicle-filter-header p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 8px;
    line-height: 1.45;
}

.vehicle-filter-form {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.vehicle-filter-field {
    min-width: 0;
}

    .vehicle-filter-field label {
        display: block;
        margin-bottom: 5px;
        color: #344054;
        font-size: 9px;
        font-weight: 700;
    }

    .vehicle-filter-field input, .vehicle-filter-field select {
        width: 100%;
        height: 40px;
        margin: 0;
        padding: 8px 11px;
        border: 1px solid #d6dde4;
        border-radius: 0;
        background: #ffffff;
        color: #475467;
        font-size: 10px;
        box-shadow: none;
    }

        .vehicle-filter-field input:focus, .vehicle-filter-field select:focus {
            border-color: #7d9600;
            outline: 0;
            box-shadow: 0 0 0 3px rgba(218, 250, 29, 0.19);
        }

.vehicle-filter-search, .vehicle-price-input {
    position: relative;
}

    .vehicle-filter-search > i {
        position: absolute;
        top: 50%;
        left: 12px;
        color: #98a2b3;
        font-size: 11px;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .vehicle-filter-search input {
        padding-left: 34px;
    }

.vehicle-filter-price-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.vehicle-price-input {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
}

    .vehicle-price-input > span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #d6dde4;
        border-right: 0;
        background: #f7f9fa;
        color: #667085;
        font-size: 7px;
        font-weight: 800;
    }

    .vehicle-price-input input {
        min-width: 0;
    }

.vehicle-filter-actions {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 8px;
    padding-top: 3px;
}

.vehicle-filter-clear, .vehicle-filter-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid transparent;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

.vehicle-filter-clear {
    border-color: #cfd7de;
    background: #ffffff;
    color: #56636d;
}

.vehicle-filter-submit {
    border-color: var(--harrier-lime);
    background: var(--harrier-lime);
    color: #1d2930;
}

.vehicle-filter-clear:hover, .vehicle-filter-clear:focus {
    border-color: #3f6679;
    color: #3f6679;
    text-decoration: none;
}

.vehicle-filter-submit:hover, .vehicle-filter-submit:focus {
    border-color: #bfdc00;
    background: #bfdc00;
}

/* Toolbar */

.vehicle-catalog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 13px 15px;
    border: 1px solid #dfe5ea;
    border-top: 3px solid var(--harrier-lime);
    background: #ffffff;
    box-shadow: 0 5px 18px rgba(24, 40, 50, 0.045);
}

.vehicle-catalog-toolbar-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.vehicle-catalog-toolbar-icon {
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: #eef4f7;
    color: #3f6679;
    font-size: 13px;
}

.vehicle-catalog-toolbar h2 {
    margin: 0 0 1px;
    color: #1e2b33;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 17px;
    font-weight: 650;
}

.vehicle-catalog-toolbar p {
    margin: 0;
    color: #84919a;
    font-size: 8px;
}

.vehicle-catalog-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 13px;
    min-width: 0;
}

.vehicle-catalog-control-group {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.vehicle-catalog-control-label {
    margin: 0;
    color: #667085;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.45px;
    text-transform: uppercase;
    white-space: nowrap;
}

.vehicle-catalog-control-group select {
    width: auto;
    min-width: 70px;
    height: 36px;
    margin: 0;
    padding: 6px 28px 6px 9px;
    border: 1px solid #d5dce3;
    border-radius: 0;
    background: #ffffff;
    color: #475467;
    font-size: 9px;
}

.vehicle-sort-group select {
    min-width: 100px;
}

.vehicle-view-switcher {
    display: inline-flex;
    gap: 5px;
}

.vehicle-view-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #d5dce3;
    background: #ffffff;
    color: #3f6679;
    font-size: 13px;
    text-decoration: none;
}

    .vehicle-view-button:hover, .vehicle-view-button:focus, .vehicle-view-button.is-active {
        border-color: var(--harrier-lime);
        background: var(--harrier-lime);
        color: #26343c;
        text-decoration: none;
    }

/* Grid */

.vehicle-catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.vehicle-catalog-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dfe5ea;
    background: #ffffff;
    box-shadow: 0 5px 18px rgba(24, 40, 50, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

    .vehicle-catalog-card:hover {
        border-color: #c8d2d9;
        box-shadow: 0 10px 26px rgba(24, 40, 50, 0.09);
        transform: translateY(-2px);
    }

.vehicle-catalog-media, .vehicle-list-media {
    position: relative;
    overflow: hidden;
    background: #e9edef;
}

.vehicle-catalog-media {
    aspect-ratio: 4 / 3;
}

.vehicle-catalog-slide {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

    .vehicle-catalog-slide.is-active {
        opacity: 1;
        visibility: visible;
    }

    .vehicle-catalog-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

.vehicle-catalog-status {
    position: absolute;
    z-index: 8;
    top: 11px;
    left: 11px;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    background: #3f6679;
    color: #ffffff;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

    .vehicle-catalog-status.available {
        background: #39a852;
    }

    .vehicle-catalog-status.booked {
        background: #c38b14;
    }

    .vehicle-catalog-status.sold, .vehicle-catalog-status.unavailable {
        background: #bd424b;
    }

.vehicle-catalog-image-nav {
    position: absolute;
    z-index: 10;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 38px;
    margin-top: -19px;
    padding: 0;
    border: 0;
    background: rgba(255, 255, 255, 0.92);
    color: #3f6679;
    font-size: 18px;
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
    transition: opacity 0.18s ease, visibility 0.18s ease, background-color 0.18s ease;
}

    .vehicle-catalog-image-nav.is-previous {
        left: 8px;
    }

    .vehicle-catalog-image-nav.is-next {
        right: 8px;
    }

.vehicle-catalog-media:hover .vehicle-catalog-image-nav, .vehicle-list-media:hover .vehicle-catalog-image-nav, .vehicle-catalog-media:focus-within .vehicle-catalog-image-nav, .vehicle-list-media:focus-within .vehicle-catalog-image-nav {
    opacity: 1;
    visibility: visible;
}

.vehicle-catalog-image-nav:hover {
    background: var(--harrier-lime);
}

.vehicle-catalog-dots {
    position: absolute;
    z-index: 10;
    right: 8px;
    bottom: 9px;
    left: 8px;
    display: flex;
    justify-content: center;
    gap: 4px;
}

    .vehicle-catalog-dots .car-card-slider-dot {
        width: 7px;
        height: 7px;
        min-width: 7px;
        padding: 0;
        border: 1px solid #ffffff;
        border-radius: 50%;
        background: rgba(63, 102, 121, 0.82);
    }

        .vehicle-catalog-dots .car-card-slider-dot.is-active {
            border-color: var(--harrier-lime);
            background: var(--harrier-lime);
        }

.vehicle-catalog-hover-actions {
    position: absolute;
    z-index: 12;
    top: 50%;
    left: 50%;
    display: flex;
    gap: 7px;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.vehicle-catalog-media:hover .vehicle-catalog-hover-actions, .vehicle-catalog-media:focus-within .vehicle-catalog-hover-actions {
    opacity: 1;
    visibility: visible;
}

.vehicle-catalog-hover-actions form {
    margin: 0;
}

.vehicle-catalog-hover-actions a, .vehicle-catalog-hover-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: #ffffff;
    color: #202c33;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 4px 13px rgba(0, 0, 0, 0.15);
}

.vehicle-catalog-hover-actions button {
    background: var(--harrier-lime);
}

.vehicle-catalog-card-body {
    padding: 14px 14px 12px;
    text-align: center;
}

.vehicle-catalog-company {
    display: block;
    margin-bottom: 2px;
    color: #7c8992;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.55px;
    text-transform: uppercase;
}

.vehicle-catalog-card h3, .vehicle-list-card h3 {
    margin: 0;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-weight: 650;
}

.vehicle-catalog-card h3 {
    font-size: 19px;
}

    .vehicle-catalog-card h3 a, .vehicle-list-card h3 a {
        color: #1e2b33;
        text-decoration: none;
    }

        .vehicle-catalog-card h3 a:hover, .vehicle-list-card h3 a:hover {
            color: #5e7800;
        }

.vehicle-catalog-model {
    margin: 2px 0 8px;
    color: #87929a;
    font-size: 8px;
}

.vehicle-catalog-price {
    display: block;
    margin-bottom: 12px;
    color: #e9524c;
    font-family: "Teko", Arial, sans-serif;
    font-size: 25px;
    font-weight: 500;
    line-height: 1;
}

.vehicle-catalog-specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid #e6eaed;
}

    .vehicle-catalog-specs > span {
        min-width: 0;
        padding: 9px 5px 0;
        border-right: 1px solid #e8ecef;
    }

        .vehicle-catalog-specs > span:last-child {
            border-right: 0;
        }

    .vehicle-catalog-specs i {
        display: block;
        margin-bottom: 4px;
        color: #80909a;
        font-size: 11px;
    }

    .vehicle-catalog-specs small {
        display: block;
        margin-bottom: 2px;
        color: #99a2a9;
        font-size: 6.5px;
        text-transform: uppercase;
    }

    .vehicle-catalog-specs strong {
        display: block;
        overflow: hidden;
        color: #5f6b73;
        font-size: 7.5px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.vehicle-catalog-card-footer {
    border-top: 1px solid #e6eaed;
}

    .vehicle-catalog-card-footer a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 37px;
        padding: 8px 13px;
        color: #3f6679;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 0.35px;
        text-decoration: none;
        text-transform: uppercase;
    }

        .vehicle-catalog-card-footer a:hover {
            background: #f7f9fa;
            color: #26343c;
        }

/* List */

.vehicle-catalog-list {
    display: grid;
    gap: 14px;
}

.vehicle-list-card {
    display: grid;
    grid-template-columns: minmax(250px, 31%) minmax(0, 1fr);
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dfe5ea;
    background: #ffffff;
    box-shadow: 0 5px 18px rgba(24, 40, 50, 0.04);
}

.vehicle-list-media {
    min-height: 245px;
}

.vehicle-list-content {
    min-width: 0;
    padding: 17px;
}

.vehicle-list-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 11px;
    border-bottom: 1px solid #e7ebee;
}

.vehicle-list-card h3 {
    font-size: 24px;
}

.vehicle-list-heading p {
    margin: 2px 0 0;
    color: #87929a;
    font-size: 8px;
}

.vehicle-list-price {
    flex: 0 0 auto;
    color: #e9524c;
    font-family: "Teko", Arial, sans-serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
}

.vehicle-list-description {
    margin: 11px 0;
    color: #69757d;
    font-size: 9px;
    line-height: 1.55;
}

.vehicle-list-card .vehicle-catalog-specs {
    max-width: 500px;
    margin-bottom: 14px;
    border: 1px solid #e5eaed;
    background: #fafbfc;
}

    .vehicle-list-card .vehicle-catalog-specs > span {
        padding: 9px;
        text-align: center;
    }

.vehicle-list-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .vehicle-list-actions form {
        margin: 0;
    }

.vehicle-details-button, .vehicle-cart-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid transparent;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

.vehicle-details-button {
    border-color: #3f6679;
    background: #3f6679;
    color: #ffffff;
}

.vehicle-cart-button {
    border-color: var(--harrier-lime);
    background: var(--harrier-lime);
    color: #1d2930;
}

.vehicle-details-button:hover, .vehicle-details-button:focus {
    border-color: #2e5365;
    background: #2e5365;
    color: #ffffff;
    text-decoration: none;
}

.vehicle-cart-button:hover, .vehicle-cart-button:focus {
    border-color: #bfdc00;
    background: #bfdc00;
}

/* Empty state */

.vehicle-catalog-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 330px;
    flex-direction: column;
    padding: 40px 20px;
    border: 1px solid #dfe5ea;
    background: #ffffff;
    text-align: center;
}

.vehicle-catalog-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: #eef4f7;
    color: #3f6679;
    font-size: 25px;
}

.vehicle-catalog-empty-eyebrow {
    margin-bottom: 3px;
    color: #7f8b94;
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.vehicle-catalog-empty h3 {
    margin: 0 0 7px;
    color: #1f2d35;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 23px;
    font-weight: 650;
}

.vehicle-catalog-empty p {
    max-width: 510px;
    margin: 0 0 14px;
    color: #7b8790;
    font-size: 9px;
    line-height: 1.55;
}

.vehicle-catalog-empty a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 13px;
    background: var(--harrier-lime);
    color: #1f2c33;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
}

/* Pagination */

.vehicle-catalog-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 17px;
    padding: 11px 13px;
    border: 1px solid #dfe5ea;
    background: #ffffff;
}

    .vehicle-catalog-pagination a, .vehicle-catalog-pagination > span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 34px;
        padding: 7px 10px;
        border: 1px solid #d6dde3;
        background: #ffffff;
        color: #3f6679;
        font-size: 8px;
        font-weight: 800;
        text-decoration: none;
        text-transform: uppercase;
    }

        .vehicle-catalog-pagination a:hover {
            border-color: var(--harrier-lime);
            background: var(--harrier-lime);
            color: #26343c;
        }

        .vehicle-catalog-pagination > span.is-disabled {
            background: #f5f6f7;
            color: #b0b8bf;
        }

    .vehicle-catalog-pagination > strong {
        color: #66737c;
        font-size: 8px;
    }

/* Responsive */

@media (max-width: 1199px) {
    .vehicle-catalog-container {
        width: min(calc(100% - 28px), 1040px);
    }

    .vehicle-catalog-shell {
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 18px;
    }

    .vehicle-catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vehicle-catalog-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .vehicle-catalog-controls {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 991px) {
    .vehicle-catalog-shell {
        grid-template-columns: 1fr;
    }

    .vehicle-filter-card {
        position: static;
    }

    .vehicle-filter-form {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .vehicle-filter-price-grid {
        grid-column: span 2;
    }

    .vehicle-filter-actions {
        align-self: end;
    }

    .vehicle-list-card {
        grid-template-columns: minmax(250px, 38%) minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .vehicle-catalog-container {
        width: calc(100% - 24px);
    }

    .vehicle-catalog-hero {
        padding: 24px 0 27px;
    }

        .vehicle-catalog-hero h1 {
            font-size: 28px;
        }

    .vehicle-filter-form {
        grid-template-columns: 1fr;
    }

    .vehicle-filter-price-grid {
        grid-column: auto;
    }

    .vehicle-filter-actions {
        grid-template-columns: 1fr 1.4fr;
    }

    .vehicle-catalog-controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }

    .vehicle-sort-group {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    }

        .vehicle-sort-group select {
            width: 100%;
            min-width: 0;
        }

    .vehicle-catalog-grid {
        grid-template-columns: 1fr;
    }

    .vehicle-list-card {
        grid-template-columns: 1fr;
    }

    .vehicle-list-media {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .vehicle-list-heading {
        flex-direction: column;
        gap: 8px;
    }

    .vehicle-list-actions {
        align-items: stretch;
        flex-direction: column;
    }

        .vehicle-list-actions form, .vehicle-details-button, .vehicle-cart-button {
            width: 100%;
        }

    .vehicle-catalog-image-nav {
        opacity: 1;
        visibility: visible;
    }

    .vehicle-catalog-pagination {
        gap: 7px;
    }
}

@media (max-width: 480px) {
    .vehicle-catalog-container {
        width: calc(100% - 20px);
    }

    .vehicle-catalog-hero h1 {
        font-size: 25px;
    }

    .vehicle-filter-price-grid, .vehicle-filter-actions, .vehicle-catalog-controls {
        grid-template-columns: 1fr;
    }

    .vehicle-sort-group {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .vehicle-catalog-control-group {
        justify-content: space-between;
    }

    .vehicle-catalog-card-body {
        padding-right: 12px;
        padding-left: 12px;
    }

    .vehicle-catalog-specs {
        grid-template-columns: 1fr;
    }

        .vehicle-catalog-specs > span {
            display: grid;
            grid-template-columns: 20px 1fr auto;
            align-items: center;
            gap: 5px;
            padding: 8px;
            border-right: 0;
            border-bottom: 1px solid #e8ecef;
            text-align: left;
        }

            .vehicle-catalog-specs > span:last-child {
                border-bottom: 0;
            }

        .vehicle-catalog-specs i, .vehicle-catalog-specs small, .vehicle-catalog-specs strong {
            margin: 0;
        }

    .vehicle-catalog-pagination {
        flex-wrap: wrap;
    }

        .vehicle-catalog-pagination > strong {
            order: -1;
            width: 100%;
            text-align: center;
        }
}

/* =========================================================
   SMG Japan Public Footer — Final Professional Version
   The markup uses unique smg-footer-* classes so old template
   footer rules cannot disturb this section.
   ========================================================= */

/*.smg-public-footer, .smg-public-footer *, .smg-public-footer *::before, .smg-public-footer *::after {
    box-sizing: border-box;
}

.smg-public-footer {
    clear: both;
    width: 100%;
    margin: 0 !important;
    overflow: hidden;
    background: #10171d;
    color: #b7c0c7;
    font-family: "Open Sans", Arial, sans-serif;
}

.smg-footer-container {
    width: min(calc(100% - 32px), 1320px);
    max-width: 1320px;
    margin-right: auto;
    margin-left: auto;
}*/

/* ---------------------------------------------------------
   Trust strip
   --------------------------------------------------------- */

/*.smg-footer-trust {
    position: relative;
    padding: 24px 0;
    border-top: 1px solid #e2e7ea;
    border-bottom: 1px solid #dfe5e8;
    background: linear-gradient( 180deg, #ffffff 0%, #f7f9fa 100% );
}

.smg-footer-trust-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.smg-footer-trust-item {
    position: relative;
    display: flex !important;
    align-items: center;
    min-width: 0;
    min-height: 94px;
    gap: 13px;
    margin: 0 !important;
    padding: 16px !important;
    border: 1px solid #e0e6e9 !important;
    background: #ffffff;
    box-shadow: 0 5px 16px rgba(26, 43, 53, 0.045);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

    .smg-footer-trust-item::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 3px;
        background: var(--harrier-lime);
        content: "";
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .smg-footer-trust-item:hover {
        border-color: #cbd5da !important;
        box-shadow: 0 10px 24px rgba(26, 43, 53, 0.08);
        transform: translateY(-2px);
    }

        .smg-footer-trust-item:hover::after {
            opacity: 1;
        }

.smg-footer-trust-icon {
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #eef4f6;
    color: var(--harrier-blue);
    font-size: 18px;
}

.smg-footer-trust-content {
    min-width: 0;
}

.smg-footer-trust-eyebrow {
    display: block;
    margin-bottom: 2px;
    color: #8a969e;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.65px;
    line-height: 1.2;
    text-transform: uppercase;
}

.smg-footer-trust-content h3 {
    margin: 0 0 3px !important;
    color: #1d2930 !important;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 19px !important;
    font-weight: 650 !important;
    line-height: 1.05 !important;
    text-transform: none !important;
}

.smg-footer-trust-content p {
    margin: 0 !important;
    color: #7b878f !important;
    font-size: 8.5px !important;
    line-height: 1.45 !important;
}*/

/* ---------------------------------------------------------
   Main footer
   --------------------------------------------------------- */

/*.smg-footer-main {
    position: relative;
    padding: 44px 0 40px;
    border-top: 4px solid var(--harrier-lime);
    background: radial-gradient( circle at 92% 8%, rgba(63, 102, 121, 0.24), transparent 30% ), linear-gradient( 135deg, #111a21 0%, #0c1217 100% );
}

    .smg-footer-main::before {
        position: absolute;
        inset: 0;
        background: linear-gradient( rgba(255, 255, 255, 0.018) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px );
        background-size: 36px 36px;
        content: "";
        pointer-events: none;
    }

.smg-footer-main-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(280px, 1.42fr) minmax(150px, 0.72fr) minmax(170px, 0.8fr) minmax(230px, 1fr);
    gap: 46px;
    align-items: start;
}

.smg-footer-section-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--harrier-lime);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.smg-footer-company h2 {
    margin: 0 0 12px !important;
    color: #ffffff !important;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 27px !important;
    font-weight: 650 !important;
    line-height: 1.05 !important;
    text-transform: uppercase !important;
}

.smg-footer-company-copy {
    max-width: 415px;
    margin: 0 0 20px !important;
    color: #95a3ad !important;
    font-size: 9.5px !important;
    line-height: 1.7 !important;
}

.smg-footer-contact-list {
    display: grid;
    gap: 11px;
    margin: 0 !important;
    color: #b8c1c8;
    font-style: normal;
}

.smg-footer-contact-item {
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
}

    .smg-footer-contact-item > span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 29px;
        height: 29px;
        border: 1px solid rgba(218, 250, 29, 0.26);
        background: rgba(218, 250, 29, 0.075);
        color: var(--harrier-lime);
        font-size: 11px;
    }

    .smg-footer-contact-item p, .smg-footer-contact-item a {
        align-self: center;
        margin: 0 !important;
        color: #b8c1c8 !important;
        font-size: 9px !important;
        line-height: 1.55 !important;
        text-decoration: none !important;
    }

        .smg-footer-contact-item a:hover {
            color: var(--harrier-lime) !important;
        }

.smg-footer-representative {
    margin: 17px 0 0 !important;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    color: #7f8d96 !important;
    font-size: 8px !important;
}

    .smg-footer-representative strong {
        color: #cbd3d8;
        font-weight: 600;
    }

.smg-footer-column h3 {
    position: relative;
    margin: 2px 0 17px !important;
    padding-bottom: 11px !important;
    color: #ffffff !important;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 19px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

    .smg-footer-column h3::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 34px;
        height: 2px;
        background: var(--harrier-lime);
        content: "";
    }

.smg-footer-column ul {
    display: grid;
    gap: 9px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.smg-footer-column li {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

    .smg-footer-column li a {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: #aab5bc !important;
        font-size: 9px !important;
        line-height: 1.45;
        text-decoration: none !important;
        transition: color 0.18s ease, transform 0.18s ease;
    }

        .smg-footer-column li a::before {
            color: #607480;
            font-family: "FontAwesome";
            font-size: 8px;
            content: "";
        }

        .smg-footer-column li a:hover {
            color: var(--harrier-lime) !important;
            transform: translateX(3px);
        }

.smg-footer-information {
    min-width: 0;
}

.smg-footer-info-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.035);
}

.smg-footer-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(63, 102, 121, 0.28);
    color: #d9e4e9;
    font-size: 13px;
}

.smg-footer-info-card small {
    display: block;
    margin-bottom: 1px;
    color: #71828d;
    font-size: 6.5px;
    font-weight: 800;
    letter-spacing: 0.55px;
    text-transform: uppercase;
}

.smg-footer-info-card strong {
    display: block;
    margin-bottom: 1px;
    color: #e8edf0;
    font-size: 9px;
    font-weight: 650;
}

.smg-footer-info-card p {
    margin: 0 !important;
    color: #9aa8b1 !important;
    font-size: 8px !important;
    line-height: 1.4 !important;
}

.smg-footer-support-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 38px;
    margin-top: 2px;
    padding: 8px 11px;
    border: 1px solid var(--harrier-lime);
    background: var(--harrier-lime);
    color: #1d2a31 !important;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 11px !important;
    font-weight: 700;
    text-decoration: none !important;
    text-transform: uppercase;
}

    .smg-footer-support-link:hover {
        border-color: #bfdc00;
        background: #bfdc00;
        color: #111a1f !important;
    }*/

/* ---------------------------------------------------------
   Footer bottom
   --------------------------------------------------------- */

/*.smg-footer-bottom {
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: #080d11;
}

.smg-footer-bottom-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: center;
}

.smg-footer-socials {
    display: flex;
    gap: 6px;
}

    .smg-footer-socials a {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 31px;
        height: 31px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.045);
        color: #c8d1d6 !important;
        font-size: 11px;
        text-decoration: none !important;
        transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
    }

        .smg-footer-socials a:hover {
            border-color: var(--harrier-lime);
            background: var(--harrier-lime);
            color: #1b282f !important;
        }

.smg-footer-copyright {
    margin: 0 !important;
    color: #88969f !important;
    font-size: 8px !important;
    text-align: center;
    white-space: nowrap;
}

.smg-footer-secure-note {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    color: #7f8d96;
    font-size: 8px;
    text-align: right;
}

    .smg-footer-secure-note i {
        color: var(--harrier-lime);
    }*/

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

/*@media (max-width: 1199px) {
    .smg-footer-container {
        width: min(calc(100% - 28px), 1040px);
    }

    .smg-footer-trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .smg-footer-main-grid {
        grid-template-columns: minmax(270px, 1.2fr) repeat(3, minmax(145px, 0.8fr));
        gap: 28px;
    }
}

@media (max-width: 991px) {
    .smg-footer-main-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 40px;
    }

    .smg-footer-company {
        grid-column: 1 / -1;
    }

    .smg-footer-company-copy {
        max-width: 650px;
    }

    .smg-footer-information {
        grid-column: span 1;
    }
}

@media (max-width: 767px) {
    .smg-footer-container {
        width: calc(100% - 24px);
    }

    .smg-footer-trust {
        padding: 16px 0;
    }

    .smg-footer-trust-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .smg-footer-trust-item {
        min-height: 80px;
        padding: 13px !important;
    }

    .smg-footer-main {
        padding: 34px 0 30px;
    }

    .smg-footer-main-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .smg-footer-company, .smg-footer-information {
        grid-column: auto;
    }

    .smg-footer-bottom-inner {
        grid-template-columns: 1fr;
        gap: 11px;
        justify-items: center;
    }

    .smg-footer-socials {
        justify-content: center;
    }

    .smg-footer-copyright {
        order: 2;
        white-space: normal;
    }

    .smg-footer-secure-note {
        order: 1;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .smg-footer-container {
        width: calc(100% - 20px);
    }

    .smg-footer-trust-item {
        align-items: flex-start;
    }

    .smg-footer-trust-icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    .smg-footer-company h2 {
        font-size: 24px !important;
    }

    .smg-footer-info-card {
        grid-template-columns: 33px minmax(0, 1fr);
        padding: 9px;
    }

    .smg-footer-info-icon {
        width: 33px;
        height: 33px;
    }
}*/

/* =========================================================
   SMG Japan Public Footer — Compact, Responsive Final Version
   Keep this file/block after the original template footer CSS.
   ========================================================= */

.smg-public-footer {
    --smg-footer-lime: var(--harrier-lime, #dafa1d);
    --smg-footer-blue: var(--harrier-blue, #3f6679);
    --smg-footer-bg: #0d151b;
    --smg-footer-bg-deep: #080d11;
    --smg-footer-text: #b8c2c9;
    --smg-footer-muted: #87959e;
    --smg-footer-border: rgba(255, 255, 255, 0.1);
    position: relative !important;
    clear: both !important;
    isolation: isolate;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    background: var(--smg-footer-bg) !important;
    color: var(--smg-footer-text) !important;
    font-family: "Open Sans", Arial, sans-serif;
}

    .smg-public-footer,
    .smg-public-footer *,
    .smg-public-footer *::before,
    .smg-public-footer *::after {
        box-sizing: border-box;
    }

        /* Neutralise conflicting legacy footer/template rules. */
        .smg-public-footer :where(section, nav, address, div, ul, li, p, h2, h3, span, a) {
            max-width: none;
        }

        .smg-public-footer :where(section, nav, address, ul, li) {
            float: none !important;
            clear: none !important;
        }

        .smg-public-footer :where(ul, li) {
            margin: 0 !important;
            padding: 0 !important;
            list-style: none !important;
        }

        .smg-public-footer :where(a, p, h2, h3, small, strong, span) {
            word-break: normal;
            overflow-wrap: anywhere;
        }

.smg-footer-container {
    width: min(calc(100% - 40px), 1360px) !important;
    max-width: 1360px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* ---------------------------------------------------------
   Trust / services strip
   --------------------------------------------------------- */

.smg-footer-trust {
    position: relative;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 18px 0 !important;
    border: 0 !important;
    border-top: 1px solid #e0e5e8 !important;
    border-bottom: 1px solid #d9e0e4 !important;
    background: #f8fafb !important;
}

.smg-footer-trust-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    width: 100% !important;
}

.smg-footer-trust-item {
    position: relative;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    min-width: 0;
    min-height: 78px;
    padding: 13px 14px !important;
    border: 1px solid #dfe6e9 !important;
    background: #ffffff !important;
    box-shadow: 0 3px 12px rgba(28, 45, 55, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

    .smg-footer-trust-item::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 3px;
        background: var(--smg-footer-lime);
        content: "";
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .smg-footer-trust-item:hover {
        border-color: #c8d2d7 !important;
        box-shadow: 0 7px 18px rgba(28, 45, 55, 0.075);
        transform: translateY(-2px);
    }

        .smg-footer-trust-item:hover::after {
            opacity: 1;
        }

.smg-footer-trust-icon {
    display: inline-flex !important;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: #edf3f5;
    color: var(--smg-footer-blue);
    font-size: 16px;
}

.smg-footer-trust-content {
    min-width: 0;
}

.smg-footer-trust-eyebrow {
    display: block;
    margin: 0 0 2px !important;
    color: #77858e !important;
    font-size: 9px !important;
    font-weight: 800;
    letter-spacing: 0.75px;
    line-height: 1.2;
    text-transform: uppercase;
}

.smg-footer-trust-content h3 {
    margin: 0 0 3px !important;
    padding: 0 !important;
    color: #1d2930 !important;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    text-transform: none !important;
}

.smg-footer-trust-content p {
    margin: 0 !important;
    color: #6f7d85 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
}

/* ---------------------------------------------------------
   Main footer
   --------------------------------------------------------- */

.smg-footer-main {
    position: relative;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 30px 0 26px !important;
    border: 0 !important;
    border-top: 4px solid var(--smg-footer-lime) !important;
    background: radial-gradient(circle at 92% 8%, rgba(63, 102, 121, 0.2), transparent 31%), linear-gradient(135deg, #111a21 0%, #0b1217 100%) !important;
}

    .smg-footer-main::before {
        position: absolute;
        inset: 0;
        z-index: 0;
        background: linear-gradient(rgba(255, 255, 255, 0.016) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px);
        background-size: 36px 36px;
        content: "";
        pointer-events: none;
    }

.smg-footer-main-grid {
    position: relative;
    z-index: 1;
    display: grid !important;
    grid-template-columns: minmax(300px, 1.42fr) minmax(145px, 0.65fr) minmax(165px, 0.74fr) minmax(235px, 0.95fr);
    gap: 26px;
    align-items: start;
    width: 100% !important;
    height: auto !important;
}

.smg-footer-company,
.smg-footer-column,
.smg-footer-information {
    position: relative;
    display: block;
    min-width: 0;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.smg-footer-section-eyebrow {
    display: block;
    margin: 0 0 5px !important;
    color: var(--smg-footer-lime) !important;
    font-size: 10px !important;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1.25;
    text-transform: uppercase;
}

.smg-footer-company h2 {
    margin: 0 0 10px !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 27px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    text-transform: uppercase !important;
}

.smg-footer-company-copy {
    max-width: 440px !important;
    margin: 0 0 15px !important;
    color: #a8b3ba !important;
    font-size: 12px !important;
    line-height: 1.62 !important;
}

.smg-footer-contact-list {
    display: grid !important;
    gap: 9px;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--smg-footer-text);
    font-style: normal;
}

.smg-footer-contact-item {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

    .smg-footer-contact-item > span {
        display: inline-flex !important;
        width: 34px;
        height: 34px;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(218, 250, 29, 0.32);
        background: rgba(218, 250, 29, 0.07);
        color: var(--smg-footer-lime) !important;
        font-size: 12px;
    }

    .smg-footer-contact-item p,
    .smg-footer-contact-item a {
        min-width: 0;
        margin: 0 !important;
        padding: 0 !important;
        color: #c1c9ce !important;
        font-size: 11.5px !important;
        line-height: 1.55 !important;
        text-decoration: none !important;
        white-space: normal !important;
    }

        .smg-footer-contact-item a:hover,
        .smg-footer-contact-item a:focus-visible {
            color: var(--smg-footer-lime) !important;
        }

.smg-footer-representative {
    margin: 13px 0 0 !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    color: #909da5 !important;
    font-size: 10.5px !important;
    line-height: 1.45;
}

    .smg-footer-representative strong {
        color: #d2d9dd !important;
        font-weight: 700;
    }

.smg-footer-column h3 {
    position: relative;
    margin: 2px 0 14px !important;
    padding: 0 0 9px !important;
    color: #ffffff !important;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    text-transform: uppercase !important;
}

    .smg-footer-column h3::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 34px;
        height: 2px;
        background: var(--smg-footer-lime);
        content: "";
    }

.smg-footer-column ul {
    display: grid !important;
    gap: 8px;
    width: 100% !important;
}

.smg-footer-column li {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border: 0 !important;
}

    .smg-footer-column li a {
        position: relative;
        display: inline-flex !important;
        max-width: 100%;
        align-items: flex-start;
        gap: 7px;
        margin: 0 !important;
        padding: 0 !important;
        color: #b4bec4 !important;
        font-size: 11.5px !important;
        line-height: 1.45 !important;
        text-decoration: none !important;
        white-space: normal !important;
        transition: color 0.18s ease, transform 0.18s ease;
    }

        .smg-footer-column li a::before {
            flex: 0 0 auto;
            margin-top: 1px;
            color: #68808d;
            font-family: "FontAwesome";
            font-size: 9px;
            content: "\f105";
        }

        .smg-footer-column li a:hover,
        .smg-footer-column li a:focus-visible {
            color: var(--smg-footer-lime) !important;
            transform: translateX(3px);
        }

.smg-footer-information {
    min-width: 0;
}

.smg-footer-info-card {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 9px !important;
    padding: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.035) !important;
}

.smg-footer-info-icon {
    display: inline-flex !important;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    background: rgba(63, 102, 121, 0.3);
    color: #e3ebef !important;
    font-size: 13px;
}

.smg-footer-info-card > div {
    min-width: 0;
}

.smg-footer-info-card small {
    display: block;
    margin: 0 0 2px !important;
    color: #8d9ba4 !important;
    font-size: 8.5px !important;
    font-weight: 800;
    letter-spacing: 0.65px;
    line-height: 1.25;
    text-transform: uppercase;
}

.smg-footer-info-card strong {
    display: block;
    margin: 0 0 1px !important;
    color: #eef2f4 !important;
    font-size: 11.5px !important;
    font-weight: 700;
    line-height: 1.35;
}

.smg-footer-info-card p {
    margin: 0 !important;
    color: #aab5bc !important;
    font-size: 10.5px !important;
    line-height: 1.4 !important;
}

.smg-footer-support-link {
    display: inline-flex !important;
    width: 100% !important;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 1px 0 0 !important;
    padding: 8px 10px !important;
    border: 1px solid var(--smg-footer-lime) !important;
    background: var(--smg-footer-lime) !important;
    color: #172229 !important;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 12px !important;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    text-transform: uppercase;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

    .smg-footer-support-link:hover,
    .smg-footer-support-link:focus-visible {
        border-color: #bfdc00 !important;
        background: #bfdc00 !important;
        color: #111a1f !important;
    }

/* ---------------------------------------------------------
   Footer bottom
   --------------------------------------------------------- */

.smg-footer-bottom {
    position: relative;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: var(--smg-footer-bg-deep) !important;
}

.smg-footer-bottom-inner {
    display: grid !important;
    grid-template-columns: minmax(120px, 1fr) auto minmax(180px, 1fr);
    gap: 18px;
    align-items: center;
    width: 100% !important;
    height: auto !important;
}

.smg-footer-socials {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

    .smg-footer-socials a {
        display: inline-flex !important;
        width: 30px;
        height: 30px;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(255, 255, 255, 0.13) !important;
        background: rgba(255, 255, 255, 0.045) !important;
        color: #d0d8dc !important;
        font-size: 11px;
        text-decoration: none !important;
        transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
    }

        .smg-footer-socials a:hover,
        .smg-footer-socials a:focus-visible {
            border-color: var(--smg-footer-lime) !important;
            background: var(--smg-footer-lime) !important;
            color: #172229 !important;
        }

.smg-footer-copyright {
    margin: 0 !important;
    padding: 0 !important;
    color: #98a5ad !important;
    font-size: 9.5px !important;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
}

.smg-footer-secure-note {
    display: inline-flex !important;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    color: #98a5ad !important;
    font-size: 9.5px !important;
    line-height: 1.35;
    text-align: right;
    white-space: normal;
}

    .smg-footer-secure-note i {
        flex: 0 0 auto;
        color: var(--smg-footer-lime) !important;
    }

/* ---------------------------------------------------------
   Large tablet / compact desktop
   --------------------------------------------------------- */

@media (max-width: 1199px) {
    .smg-footer-container {
        width: min(calc(100% - 32px), 1080px) !important;
    }

    .smg-footer-trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .smg-footer-main-grid {
        grid-template-columns: minmax(280px, 1.25fr) minmax(140px, 0.65fr) minmax(155px, 0.72fr) minmax(220px, 0.92fr);
        gap: 22px;
    }
}

/* ---------------------------------------------------------
   Tablet
   Company first, links side-by-side, information full width.
   --------------------------------------------------------- */

@media (max-width: 991px) {
    .smg-footer-main {
        padding: 26px 0 22px !important;
    }

    .smg-footer-main-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 30px;
    }

    .smg-footer-company {
        grid-column: 1 / -1;
    }

    .smg-footer-company-copy {
        max-width: 650px !important;
    }

    .smg-footer-information {
        display: grid !important;
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px 12px;
    }

        .smg-footer-information > h3,
        .smg-footer-information > .smg-footer-support-link {
            grid-column: 1 / -1;
        }

    .smg-footer-info-card {
        height: 100% !important;
        margin: 0 !important;
    }

    .smg-footer-bottom-inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 14px;
    }
}

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 767px) {
    .smg-footer-container {
        width: calc(100% - 24px) !important;
    }

    .smg-footer-trust {
        padding: 13px 0 !important;
    }

    .smg-footer-trust-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .smg-footer-trust-item {
        min-height: 68px;
        padding: 11px 12px !important;
    }

    .smg-footer-main {
        padding: 24px 0 20px !important;
    }

    .smg-footer-main-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .smg-footer-company,
    .smg-footer-column,
    .smg-footer-information {
        grid-column: auto;
    }

        .smg-footer-column h3 {
            margin-bottom: 11px !important;
        }

        .smg-footer-column ul {
            gap: 7px;
        }

    .smg-footer-information {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 8px;
    }

        .smg-footer-information > h3,
        .smg-footer-information > .smg-footer-support-link {
            grid-column: auto;
        }

    .smg-footer-support-link {
        width: 100% !important;
    }

    .smg-footer-bottom {
        padding: 12px 0 !important;
    }

    .smg-footer-bottom-inner {
        grid-template-columns: 1fr;
        gap: 9px;
        justify-items: center;
    }

    .smg-footer-socials {
        justify-content: center;
    }

    .smg-footer-secure-note {
        justify-content: center;
        text-align: center;
    }

    .smg-footer-copyright {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .smg-footer-container {
        width: calc(100% - 20px) !important;
    }

    .smg-footer-trust-item {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 10px;
    }

    .smg-footer-trust-icon {
        width: 38px;
        height: 38px;
    }

    .smg-footer-company h2 {
        font-size: 24px !important;
    }

    .smg-footer-company-copy {
        font-size: 11.5px !important;
    }

    .smg-footer-contact-item {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 9px;
    }

        .smg-footer-contact-item > span {
            width: 32px;
            height: 32px;
        }

    .smg-footer-info-card {
        grid-template-columns: 34px minmax(0, 1fr);
        padding: 9px !important;
    }

    .smg-footer-info-icon {
        width: 34px;
        height: 34px;
    }
}


/* =========================================================
   SMG Japan About Page — Professional Scoped Layout
   ========================================================= */

.smg-about-hero, .smg-about-hero *, .smg-about-page, .smg-about-page *, .smg-about-page *::before, .smg-about-page *::after {
    box-sizing: border-box;
}

.smg-about-container {
    width: min(calc(100% - 32px), 1240px);
    max-width: 1240px;
    margin-right: auto;
    margin-left: auto;
}

/* Hero */

.smg-about-hero {
    position: relative;
    overflow: hidden;
    padding: 32px 0 38px;
    background: linear-gradient( 90deg, rgba(10, 18, 23, 0.96), rgba(30, 56, 67, 0.82) ), url("../customer-template/images/category-bg.jpg") center 57% / cover no-repeat;
    color: #ffffff;
}

    .smg-about-hero::after {
        position: absolute;
        right: -95px;
        bottom: -170px;
        width: 390px;
        height: 300px;
        border: 62px solid rgba(218, 250, 29, 0.07);
        border-radius: 50%;
        content: "";
        pointer-events: none;
    }

.smg-about-breadcrumbs {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 11px;
}

    .smg-about-breadcrumbs a {
        color: rgba(255, 255, 255, 0.82);
        text-decoration: none;
    }

        .smg-about-breadcrumbs a:hover {
            color: var(--harrier-lime);
        }

.smg-about-hero-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.smg-about-hero-eyebrow, .smg-about-section-eyebrow {
    display: block;
    color: var(--harrier-lime);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.smg-about-hero-eyebrow {
    margin-bottom: 5px;
}

.smg-about-hero h1 {
    margin: 0 0 8px;
    color: #ffffff;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 38px;
    font-weight: 650;
    line-height: 1.06;
    text-transform: uppercase;
}

.smg-about-hero-content > p {
    max-width: 690px;
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 11px;
    line-height: 1.65;
}

.smg-about-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

    .smg-about-hero-facts span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 32px;
        padding: 7px 10px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.07);
        color: rgba(255, 255, 255, 0.88);
        font-size: 8px;
    }

    .smg-about-hero-facts i {
        color: var(--harrier-lime);
    }

/* Page */

.smg-about-page {
    padding: 34px 0 52px;
    background: #f3f5f7;
}

/* Introduction */

.smg-about-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(320px, 0.78fr);
    gap: 24px;
    align-items: stretch;
}

.smg-about-intro-copy, .smg-about-profile-card {
    border: 1px solid #dfe5e9;
    background: #ffffff;
    box-shadow: 0 7px 22px rgba(24, 40, 50, 0.055);
}

.smg-about-intro-copy {
    padding: 28px 30px;
}

.smg-about-section-eyebrow {
    margin-bottom: 6px;
    color: #698000;
}

.smg-about-intro-copy h2, .smg-about-section-heading h2, .smg-about-office-copy h2 {
    margin: 0;
    color: #1e2b33;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-weight: 650;
    line-height: 1.12;
    text-transform: uppercase;
}

.smg-about-intro-copy h2 {
    max-width: 660px;
    margin-bottom: 14px;
    font-size: 31px;
}

.smg-about-intro-copy > p {
    max-width: 720px;
    margin: 0 0 11px;
    color: #65727b;
    font-size: 10px;
    line-height: 1.75;
}

.smg-about-intro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 20px;
}

.smg-about-primary-button, .smg-about-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid transparent;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

.smg-about-primary-button {
    border-color: var(--harrier-lime);
    background: var(--harrier-lime);
    color: #1d2a31;
}

.smg-about-secondary-button {
    border-color: #3f6679;
    background: #ffffff;
    color: #3f6679;
}

.smg-about-primary-button:hover {
    border-color: #bfdc00;
    background: #bfdc00;
    color: #172128;
    text-decoration: none;
}

.smg-about-secondary-button:hover {
    background: #3f6679;
    color: #ffffff;
    text-decoration: none;
}

/* Profile card */

.smg-about-profile-card {
    padding: 21px;
}

.smg-about-card-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 17px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e5eaed;
}

.smg-about-card-icon {
    flex: 0 0 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    background: #eef4f6;
    color: #3f6679;
    font-size: 14px;
}

.smg-about-card-heading span:not(.smg-about-card-icon) {
    display: block;
    margin-bottom: 2px;
    color: #8b969d;
    font-size: 6.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.smg-about-card-heading h3 {
    margin: 0;
    color: #1f2c33;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 20px;
    font-weight: 650;
    text-transform: uppercase;
}

.smg-about-profile-list {
    display: grid;
    gap: 0;
    margin: 0;
}

    .smg-about-profile-list > div {
        display: grid;
        grid-template-columns: 108px minmax(0, 1fr);
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid #edf0f2;
    }

        .smg-about-profile-list > div:last-child {
            border-bottom: 0;
        }

    .smg-about-profile-list dt {
        color: #35434c;
        font-size: 8px;
        font-weight: 700;
    }

    .smg-about-profile-list dd {
        margin: 0;
        color: #6d7981;
        font-size: 8.5px;
        line-height: 1.5;
    }

/* Business */

.smg-about-business {
    margin-top: 24px;
    padding: 27px;
    border: 1px solid #dfe5e9;
    background: #ffffff;
    box-shadow: 0 7px 22px rgba(24, 40, 50, 0.045);
}

.smg-about-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5eaed;
}

    .smg-about-section-heading h2, .smg-about-office-copy h2 {
        margin: 0 0 4px;
        font-size: 26px;
    }

    .smg-about-section-heading p, .smg-about-office-copy > p {
        margin: 0;
        color: #7a868e;
        font-size: 8.5px;
        line-height: 1.55;
    }

.smg-about-business-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 11px;
}

.smg-about-business-card {
    min-width: 0;
    min-height: 152px;
    padding: 16px;
    border: 1px solid #e1e7ea;
    background: #fafbfc;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

    .smg-about-business-card:hover {
        border-color: #ccd6db;
        box-shadow: 0 7px 17px rgba(24, 40, 50, 0.07);
        transform: translateY(-2px);
    }

    .smg-about-business-card > span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        margin-bottom: 11px;
        background: rgba(218, 250, 29, 0.55);
        color: #35444d;
        font-size: 14px;
    }

    .smg-about-business-card h3 {
        margin: 0 0 6px;
        color: #26343c;
        font-family: "Saira Condensed", Arial, sans-serif;
        font-size: 17px;
        font-weight: 650;
        line-height: 1.1;
    }

    .smg-about-business-card p {
        margin: 0;
        color: #7a858d;
        font-size: 7.7px;
        line-height: 1.55;
    }

/* Office */

.smg-about-office {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 0;
    margin-top: 24px;
    overflow: hidden;
    border: 1px solid #dfe5e9;
    background: #ffffff;
    box-shadow: 0 7px 22px rgba(24, 40, 50, 0.05);
}

.smg-about-office-copy {
    padding: 27px 30px;
}

    .smg-about-office-copy address {
        display: grid;
        gap: 10px;
        margin: 20px 0 0;
        font-style: normal;
    }

        .smg-about-office-copy address > div {
            display: grid;
            grid-template-columns: 31px minmax(0, 1fr);
            gap: 9px;
            align-items: start;
        }

        .smg-about-office-copy address span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 31px;
            height: 31px;
            background: #eef4f6;
            color: #3f6679;
            font-size: 11px;
        }

        .smg-about-office-copy address p, .smg-about-office-copy address a {
            align-self: center;
            margin: 0;
            color: #69767e;
            font-size: 8.5px;
            line-height: 1.55;
            text-decoration: none;
        }

            .smg-about-office-copy address a:hover {
                color: #607800;
            }

.smg-about-office-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    flex-direction: column;
    padding: 28px;
    background: linear-gradient( 145deg, rgba(25, 43, 52, 0.96), rgba(54, 91, 108, 0.9) ), url("../customer-template/images/category-bg.jpg") center / cover no-repeat;
    color: #ffffff;
    text-align: center;
}

.smg-about-office-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
    border: 1px solid rgba(218, 250, 29, 0.5);
    background: rgba(218, 250, 29, 0.12);
    color: var(--harrier-lime);
    font-size: 20px;
}

.smg-about-office-label {
    color: var(--harrier-lime);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.smg-about-office-panel strong {
    margin-top: 4px;
    color: #ffffff;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 25px;
    font-weight: 650;
}

.smg-about-office-panel p {
    margin: 1px 0 15px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 8.5px;
}

.smg-about-office-panel a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    color: #ffffff;
    font-size: 8px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
}

    .smg-about-office-panel a:hover {
        border-color: var(--harrier-lime);
        background: var(--harrier-lime);
        color: #1d2930;
    }

/* Responsive */

@media (max-width: 1199px) {
    .smg-about-container {
        width: min(calc(100% - 28px), 1040px);
    }

    .smg-about-business-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .smg-about-business-card:last-child {
        grid-column: span 2;
    }
}

@media (max-width: 991px) {
    .smg-about-intro, .smg-about-office {
        grid-template-columns: 1fr;
    }

    .smg-about-office-panel {
        min-height: 220px;
    }

    .smg-about-business-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .smg-about-business-card:last-child {
        grid-column: auto;
    }
}

@media (max-width: 767px) {
    .smg-about-container {
        width: calc(100% - 24px);
    }

    .smg-about-hero {
        padding: 25px 0 29px;
    }

        .smg-about-hero h1 {
            font-size: 30px;
        }

    .smg-about-hero-facts {
        align-items: stretch;
        flex-direction: column;
    }

        .smg-about-hero-facts span {
            width: 100%;
        }

    .smg-about-page {
        padding: 24px 0 36px;
    }

    .smg-about-intro-copy, .smg-about-profile-card, .smg-about-business, .smg-about-office-copy {
        padding: 20px;
    }

        .smg-about-intro-copy h2 {
            font-size: 27px;
        }

    .smg-about-intro-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .smg-about-primary-button, .smg-about-secondary-button {
        width: 100%;
    }

    .smg-about-business-grid {
        grid-template-columns: 1fr;
    }

    .smg-about-business-card {
        min-height: 0;
    }

    .smg-about-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .smg-about-container {
        width: calc(100% - 20px);
    }

    .smg-about-hero h1 {
        font-size: 27px;
    }

    .smg-about-profile-list > div {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .smg-about-office-panel {
        min-height: 200px;
        padding: 22px;
    }
}

/* =========================================================
   About Page — Readability & Typography Correction
   Keeps the approved layout unchanged.
   ========================================================= */

.smg-about-hero-content > p {
    max-width: 760px;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 14px !important;
    font-weight: 400;
    line-height: 1.65 !important;
}

.smg-about-hero-facts span {
    color: rgba(255, 255, 255, 0.94) !important;
    font-size: 11px !important;
    font-weight: 600;
}

.smg-about-intro-copy > p {
    color: #475467 !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
}

.smg-about-card-heading span:not(.smg-about-card-icon) {
    color: #667085 !important;
    font-size: 9px !important;
}

.smg-about-profile-list dt {
    color: #1f2937 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.smg-about-profile-list dd {
    color: #475467 !important;
    font-size: 12px !important;
    font-weight: 500;
    line-height: 1.55 !important;
}

.smg-about-section-heading p, .smg-about-office-copy > p {
    color: #5f6b76 !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
}

.smg-about-business-card p {
    color: #5f6b76 !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
}

.smg-about-office-copy address p, .smg-about-office-copy address a {
    color: #475467 !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
}

.smg-about-office-panel p {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 11px !important;
}

@media (max-width: 767px) {
    .smg-about-hero-content > p, .smg-about-intro-copy > p {
        font-size: 13px !important;
    }

    .smg-about-profile-list dt, .smg-about-profile-list dd, .smg-about-section-heading p, .smg-about-office-copy > p, .smg-about-business-card p, .smg-about-office-copy address p, .smg-about-office-copy address a {
        font-size: 12px !important;
    }
}

/* =========================================================
   Public Footer — Readability & Contrast Correction
   Keeps the approved footer layout unchanged.
   ========================================================= */

/* Trust cards above the footer */
.smg-footer-trust-eyebrow {
    color: #65737c !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.7px;
}

.smg-footer-trust-content h3 {
    color: #16242c !important;
    font-size: 21px !important;
    line-height: 1.12 !important;
}

.smg-footer-trust-content p {
    color: #4f5f69 !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
}

/* Company information */
.smg-footer-section-eyebrow {
    font-size: 10px !important;
    letter-spacing: 1px;
}

.smg-footer-company-copy {
    color: #c0cbd2 !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
}

.smg-footer-contact-item p, .smg-footer-contact-item a {
    color: #d1d9de !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
}

.smg-footer-representative {
    color: #aab6bd !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
}

    .smg-footer-representative strong {
        color: #eef2f4 !important;
    }

/* Footer navigation */
.smg-footer-column li a {
    color: #c3cdd3 !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
}

    .smg-footer-column li a::before {
        color: #8ea0aa !important;
        font-size: 10px !important;
    }

/* Information cards */
.smg-footer-info-card small {
    color: #91a3ae !important;
    font-size: 9px !important;
    letter-spacing: 0.65px;
}

.smg-footer-info-card strong {
    color: #f3f6f7 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

.smg-footer-info-card p {
    color: #bdc8ce !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
}

.smg-footer-support-link {
    font-size: 12px !important;
}

/* Footer bottom */
.smg-footer-copyright {
    color: #b8c3c9 !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
}

.smg-footer-secure-note {
    color: #b8c3c9 !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
}

/* Slightly improve card padding after increasing text size. */
.smg-footer-trust-item {
    min-height: 108px;
    padding: 18px !important;
}

.smg-footer-info-card {
    padding: 13px;
}

@media (max-width: 767px) {
    .smg-footer-trust-content p, .smg-footer-company-copy {
        font-size: 12px !important;
    }

    .smg-footer-contact-item p, .smg-footer-contact-item a, .smg-footer-column li a, .smg-footer-info-card strong {
        font-size: 12px !important;
    }

    .smg-footer-info-card p, .smg-footer-representative, .smg-footer-copyright, .smg-footer-secure-note {
        font-size: 11px !important;
    }
}

/* =========================================================
   SMG Japan Contact Page — Professional Scoped Layout
   ========================================================= */

.smg-contact-hero, .smg-contact-hero *, .smg-contact-page, .smg-contact-page *, .smg-contact-page *::before, .smg-contact-page *::after {
    box-sizing: border-box;
}

.smg-contact-container {
    width: min(calc(100% - 32px), 1240px);
    max-width: 1240px;
    margin-right: auto;
    margin-left: auto;
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

.smg-contact-hero {
    position: relative;
    overflow: hidden;
    padding: 31px 0 38px;
    background: linear-gradient( 90deg, rgba(8, 17, 22, 0.97), rgba(32, 61, 73, 0.82) ), url("../customer-template/images/category-bg.jpg") center 57% / cover no-repeat;
    color: #ffffff;
}

    .smg-contact-hero::after {
        position: absolute;
        right: -95px;
        bottom: -165px;
        width: 390px;
        height: 300px;
        border: 62px solid rgba(218, 250, 29, 0.07);
        border-radius: 50%;
        content: "";
        pointer-events: none;
    }

.smg-contact-breadcrumbs {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
}

    .smg-contact-breadcrumbs a {
        color: rgba(255, 255, 255, 0.88);
        text-decoration: none;
    }

        .smg-contact-breadcrumbs a:hover {
            color: var(--harrier-lime);
        }

.smg-contact-hero-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.smg-contact-hero-eyebrow, .smg-contact-section-eyebrow {
    display: block;
    color: var(--harrier-lime);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.smg-contact-hero-eyebrow {
    margin-bottom: 5px;
}

.smg-contact-hero h1 {
    margin: 0 0 9px;
    color: #ffffff;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 38px;
    font-weight: 650;
    line-height: 1.06;
    text-transform: uppercase;
}

.smg-contact-hero-content > p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 1.68;
}

.smg-contact-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

.smg-contact-hero-primary, .smg-contact-hero-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid transparent;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
}

.smg-contact-hero-primary {
    border-color: var(--harrier-lime);
    background: var(--harrier-lime);
    color: #1d2a31;
}

.smg-contact-hero-secondary {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.smg-contact-hero-primary:hover {
    border-color: #bfdc00;
    background: #bfdc00;
    color: #172128;
    text-decoration: none;
}

.smg-contact-hero-secondary:hover {
    border-color: var(--harrier-lime);
    color: var(--harrier-lime);
    text-decoration: none;
}

/* ---------------------------------------------------------
   Page
   --------------------------------------------------------- */

.smg-contact-page {
    padding: 34px 0 52px;
    background: #f3f5f7;
}

.smg-contact-intro {
    max-width: 820px;
    margin: 0 auto 25px;
    text-align: center;
}

    .smg-contact-intro .smg-contact-section-eyebrow {
        margin-bottom: 6px;
        color: #657c00;
    }

    .smg-contact-intro h2, .smg-contact-guidance-copy h2, .smg-bank-panel-header h2 {
        margin: 0;
        color: #1e2b33;
        font-family: "Saira Condensed", Arial, sans-serif;
        font-weight: 650;
        line-height: 1.12;
        text-transform: uppercase;
    }

    .smg-contact-intro h2 {
        margin-bottom: 10px;
        font-size: 31px;
    }

    .smg-contact-intro p {
        margin: 0;
        color: #53616b;
        font-size: 14px;
        line-height: 1.72;
    }

/* ---------------------------------------------------------
   Contact cards
   --------------------------------------------------------- */

.smg-contact-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.smg-contact-card {
    position: relative;
    min-width: 0;
    min-height: 250px;
    padding: 24px;
    border: 1px solid #dfe5e9;
    border-bottom: 4px solid var(--harrier-lime);
    background: #ffffff;
    box-shadow: 0 7px 22px rgba(24, 40, 50, 0.055);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

    .smg-contact-card:hover {
        border-color: #ccd6db;
        border-bottom-color: var(--harrier-lime);
        box-shadow: 0 11px 26px rgba(24, 40, 50, 0.09);
        transform: translateY(-2px);
    }

.smg-contact-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    background: var(--harrier-lime);
    color: #24323a;
    font-size: 18px;
}

.smg-contact-card-label {
    display: block;
    margin-bottom: 5px;
    color: #77848c;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.smg-contact-card h3 {
    margin: 0 0 15px;
    color: #24313a;
    font-family: "Saira Condensed", Arial, sans-serif;
    font-size: 23px;
    font-weight: 650;
    line-height: 1.1;
    text-transform: uppercase;
}

.smg-contact-card p, .smg-contact-card address, .smg-contact-card small {
    color: #52616b;
    font-size: 13px;
    line-height: 1.7;
}

.smg-contact-card p, .smg-contact-card address {
    margin: 0;
    font-style: normal;
}

.smg-contact-card small {
    display: block;
    margin-top: 10px;
    color: #7a868e;
    font-size: 12px;
}

.smg-contact-card-links {
    display: grid;
    gap: 10px;
}

    .smg-contact-card-links a {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 39px;
        padding: 8px 10px;
        border: 1px solid #e2e7ea;
        background: #f8fafb;
        color: #3d5968;
        font-size: 13px;
        text-decoration: none;
    }

        .smg-contact-card-links a i {
            width: 16px;
            color: #607800;
            text-align: center;
        }

        .smg-contact-card-links a:hover {
            border-color: #cbd6db;
            background: #f1f5f6;
            color: #1f3946;
        }

/* ---------------------------------------------------------
   Guidance
   --------------------------------------------------------- */

.smg-contact-guidance {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
    gap: 24px;
    align-items: center;
    margin-top: 24px;
    padding: 25px 27px;
    border: 1px solid #dfe5e9;
    background: #ffffff;
    box-shadow: 0 7px 22px rgba(24, 40, 50, 0.045);
}

.smg-contact-guidance-copy .smg-contact-section-eyebrow {
    margin-bottom: 5px;
    color: #657c00;
}

.smg-contact-guidance-copy h2 {
    margin-bottom: 9px;
    font-size: 25px;
}

.smg-contact-guidance-copy p {
    margin: 0;
    color: #596872;
    font-size: 13px;
    line-height: 1.7;
}

.smg-contact-guidance-list {
    display: grid;
    gap: 9px;
}

    .smg-contact-guidance-list > div {
        display: grid;
        grid-template-columns: 35px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        min-height: 45px;
        padding: 8px 10px;
        border: 1px solid #e2e7ea;
        background: #f8fafb;
    }

    .smg-contact-guidance-list i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 35px;
        height: 35px;
        background: #eaf1f4;
        color: #3f6679;
        font-size: 13px;
    }

    .smg-contact-guidance-list span {
        color: #44535d;
        font-size: 12px;
        font-weight: 600;
    }

/* ---------------------------------------------------------
   Bank panel
   --------------------------------------------------------- */

.smg-bank-panel {
    margin-top: 24px;
    padding: 28px;
    border: 1px solid #dfe5e9;
    border-top: 4px solid #3f6679;
    background: #ffffff;
    box-shadow: 0 7px 22px rgba(24, 40, 50, 0.055);
}

.smg-bank-panel-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 21px;
}

.smg-bank-panel-icon {
    flex: 0 0 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: #3f6679;
    color: #ffffff;
    font-size: 20px;
}

.smg-bank-panel-header .smg-contact-section-eyebrow {
    margin-bottom: 5px;
    color: #657c00;
}

.smg-bank-panel-header h2 {
    margin-bottom: 5px;
    font-size: 30px;
}

.smg-bank-panel-header p {
    margin: 0;
    color: #68757e;
    font-size: 13px;
    line-height: 1.6;
}

.smg-bank-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid #dfe5e9;
    border-left: 1px solid #dfe5e9;
}

    .smg-bank-details-grid > div {
        min-width: 0;
        padding: 17px 19px;
        border-right: 1px solid #dfe5e9;
        border-bottom: 1px solid #dfe5e9;
        background: #fbfcfd;
    }

    .smg-bank-details-grid dt {
        margin-bottom: 5px;
        color: #69767f;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.6px;
        text-transform: uppercase;
    }

    .smg-bank-details-grid dd {
        margin: 0;
        color: #202e36;
        font-family: "Saira Condensed", Arial, sans-serif;
        font-size: 21px;
        font-weight: 650;
        line-height: 1.2;
    }

.smg-bank-security-note {
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    margin-top: 17px;
    padding: 12px 14px;
    border: 1px solid #e2e7c1;
    background: #f6f8e7;
}

    .smg-bank-security-note > span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 35px;
        height: 35px;
        background: #e8efbd;
        color: #607500;
        font-size: 14px;
    }

    .smg-bank-security-note p {
        margin: 0;
        color: #55620f;
        font-size: 12px;
        line-height: 1.6;
    }

    .smg-bank-security-note strong {
        color: #3f4908;
    }

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 991px) {
    .smg-contact-card-grid {
        grid-template-columns: 1fr;
    }

    .smg-contact-card {
        min-height: 0;
    }

    .smg-contact-guidance {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .smg-contact-container {
        width: calc(100% - 24px);
    }

    .smg-contact-hero {
        padding: 25px 0 29px;
    }

        .smg-contact-hero h1 {
            font-size: 30px;
        }

    .smg-contact-hero-content > p {
        font-size: 13px;
    }

    .smg-contact-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .smg-contact-hero-primary, .smg-contact-hero-secondary {
        width: 100%;
    }

    .smg-contact-page {
        padding: 25px 0 38px;
    }

    .smg-contact-intro h2 {
        font-size: 27px;
    }

    .smg-contact-intro p {
        font-size: 13px;
    }

    .smg-contact-card, .smg-contact-guidance, .smg-bank-panel {
        padding: 20px;
    }

    .smg-bank-panel-header {
        flex-direction: column;
    }

    .smg-bank-details-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .smg-contact-container {
        width: calc(100% - 20px);
    }

    .smg-contact-hero h1 {
        font-size: 27px;
    }

    .smg-contact-card {
        padding: 18px;
    }

    .smg-bank-panel-header h2 {
        font-size: 26px;
    }

    .smg-bank-details-grid dd {
        font-size: 19px;
    }
}

/* =========================================================
   FINAL OVERRIDE — Footer Contact Icon Alignment
   This block must remain at the very end of the stylesheet.
   ========================================================= */

.smg-footer-contact-list {
    display: grid !important;
    gap: 16px !important;
}

.smg-footer-contact-item {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    align-items: center !important;
    min-height: 44px;
}

    .smg-footer-contact-item > span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(218, 250, 29, 0.38) !important;
        background: rgba(63, 102, 121, 0.26) !important;
        color: #dafa1d !important;
        font-size: 16px !important;
        line-height: 1 !important;
        box-shadow: none !important;
    }

        .smg-footer-contact-item > span i {
            display: block !important;
            margin: 0 !important;
            padding: 0 !important;
            color: inherit !important;
            font-size: 16px !important;
            line-height: 1 !important;
            transform: none !important;
        }

    .smg-footer-contact-item p, .smg-footer-contact-item a {
        align-self: center !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #d1d9de !important;
        font-size: 12px !important;
        line-height: 1.65 !important;
        text-decoration: none !important;
    }

    .smg-footer-contact-item:first-child {
        align-items: start !important;
    }

        .smg-footer-contact-item:first-child > span {
            margin-top: 2px !important;
        }

        .smg-footer-contact-item:first-child p {
            align-self: start !important;
        }

    .smg-footer-contact-item a:hover {
        color: #dafa1d !important;
    }

/* Footer-bottom action icons */
.smg-footer-socials {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

    .smg-footer-socials a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        background: rgba(255, 255, 255, 0.055) !important;
        color: #d5dde2 !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

        .smg-footer-socials a i {
            margin: 0 !important;
            padding: 0 !important;
            font-size: 14px !important;
            line-height: 1 !important;
        }

        .smg-footer-socials a:hover {
            border-color: #dafa1d !important;
            background: #dafa1d !important;
            color: #16232a !important;
        }

@media (max-width: 767px) {
    .smg-footer-contact-item {
        grid-template-columns: 42px minmax(0, 1fr) !important;
        column-gap: 11px !important;
        min-height: 42px;
    }

        .smg-footer-contact-item > span {
            width: 42px !important;
            min-width: 42px !important;
            height: 42px !important;
        }

    .smg-footer-socials a {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
    }
}

/* =========================================================
   FINAL OVERRIDE — All Vehicles Catalogue Readability
   Applies to both Grid and List views only.
   Keep this block at the end of customer-overrides.css.
   ========================================================= */

/* Hero */
.vehicle-catalog-breadcrumbs {
    color: rgba(255, 255, 255, 0.86);
    font-size: 12px;
    line-height: 1.5;
}

    .vehicle-catalog-breadcrumbs a {
        color: #ffffff;
    }

.vehicle-catalog-eyebrow {
    font-size: 12px;
    letter-spacing: 1px;
}

.vehicle-catalog-hero h1 {
    font-size: 38px;
}

.vehicle-catalog-hero p {
    max-width: 760px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    line-height: 1.65;
}

/* Filter heading */
.vehicle-filter-header {
    gap: 12px;
    padding: 18px;
}

.vehicle-filter-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    font-size: 15px;
}

.vehicle-filter-header span:not(.vehicle-filter-icon) {
    margin-bottom: 3px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 10px;
    letter-spacing: 0.7px;
}

.vehicle-filter-header h2 {
    margin-bottom: 5px;
    font-size: 24px;
    line-height: 1.1;
}

.vehicle-filter-header p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    line-height: 1.55;
}

/* Filter form */
.vehicle-filter-form {
    gap: 15px;
    padding: 18px;
}

.vehicle-filter-field label {
    margin-bottom: 7px;
    color: #25313a;
    font-size: 12px;
    font-weight: 700;
}

.vehicle-filter-field input, .vehicle-filter-field select {
    height: 46px;
    padding: 10px 13px;
    border-color: #cbd4dc;
    color: #27343d;
    font-size: 13px;
}

    .vehicle-filter-field input::placeholder {
        color: #78858e;
        opacity: 1;
    }

.vehicle-filter-search > i {
    left: 13px;
    color: #60717c;
    font-size: 13px;
}

.vehicle-filter-search input {
    padding-left: 38px;
}

.vehicle-price-input {
    grid-template-columns: 43px minmax(0, 1fr);
}

    .vehicle-price-input > span {
        border-color: #cbd4dc;
        background: #f2f5f7;
        color: #344651;
        font-size: 10px;
        letter-spacing: 0.25px;
    }

.vehicle-filter-actions {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
    padding-top: 5px;
}

.vehicle-filter-clear, .vehicle-filter-submit {
    min-height: 44px;
    padding: 9px 12px;
    font-size: 14px;
    letter-spacing: 0.15px;
}

/* Toolbar */
.vehicle-catalog-toolbar {
    padding: 15px 17px;
}

.vehicle-catalog-toolbar-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    font-size: 15px;
}

.vehicle-catalog-toolbar h2 {
    margin-bottom: 3px;
    font-size: 21px;
    line-height: 1.1;
}

.vehicle-catalog-toolbar p {
    color: #5e6c75;
    font-size: 12px;
    line-height: 1.45;
}

.vehicle-catalog-control-label {
    color: #3f4f59;
    font-size: 10px;
    letter-spacing: 0.5px;
}

.vehicle-catalog-control-group select {
    min-width: 76px;
    height: 40px;
    padding: 7px 30px 7px 11px;
    border-color: #cbd4dc;
    color: #263640;
    font-size: 12px;
}

.vehicle-sort-group select {
    min-width: 112px;
}

.vehicle-view-button {
    width: 40px;
    height: 40px;
    font-size: 14px;
}

/* Shared vehicle card information */
.vehicle-catalog-status {
    min-height: 27px;
    padding: 5px 9px;
    font-size: 9px;
    letter-spacing: 0.35px;
}

.vehicle-catalog-company {
    margin-bottom: 4px;
    color: #53636d;
    font-size: 10px;
    letter-spacing: 0.65px;
}

.vehicle-catalog-card h3 {
    font-size: 23px;
    line-height: 1.15;
}

    .vehicle-catalog-card h3 a, .vehicle-list-card h3 a {
        color: #14232c;
    }

.vehicle-catalog-model {
    margin: 4px 0 10px;
    color: #5e6c75;
    font-size: 12px;
    line-height: 1.45;
}

.vehicle-catalog-price {
    margin-bottom: 15px;
    font-size: 30px;
}

.vehicle-catalog-specs > span {
    padding: 11px 6px 2px;
}

.vehicle-catalog-specs i {
    margin-bottom: 5px;
    color: #536a77;
    font-size: 14px;
}

.vehicle-catalog-specs small {
    margin-bottom: 4px;
    color: #66757f;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.25px;
}

.vehicle-catalog-specs strong {
    color: #26343d;
    font-size: 11px;
    line-height: 1.4;
}

.vehicle-catalog-card-footer a {
    min-height: 43px;
    padding: 10px 14px;
    color: #315a6d;
    font-size: 11px;
    letter-spacing: 0.45px;
}

/* List view */
.vehicle-list-content {
    padding: 20px;
}

.vehicle-list-card h3 {
    font-size: 28px;
    line-height: 1.12;
}

.vehicle-list-heading p {
    margin-top: 4px;
    color: #5e6c75;
    font-size: 12px;
    line-height: 1.45;
}

.vehicle-list-price {
    font-size: 32px;
}

.vehicle-list-description {
    margin: 14px 0;
    max-width: 760px;
    color: #465761;
    font-size: 13px;
    line-height: 1.7;
}

.vehicle-list-card .vehicle-catalog-specs {
    max-width: 560px;
    margin-bottom: 17px;
}

    .vehicle-list-card .vehicle-catalog-specs > span {
        padding: 11px 10px;
    }

.vehicle-details-button, .vehicle-cart-button {
    min-height: 42px;
    padding: 9px 15px;
    font-size: 13px;
    letter-spacing: 0.15px;
}

/* Empty state and pagination */
.vehicle-catalog-empty p {
    color: #52616b;
    font-size: 13px;
    line-height: 1.65;
}

.vehicle-catalog-empty a {
    font-size: 13px;
}

.vehicle-catalog-pagination a, .vehicle-catalog-pagination > span {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 11px;
}

.vehicle-catalog-pagination > strong {
    color: #34454f;
    font-size: 11px;
}

/* Tablet */
@media (max-width: 991px) {
    .vehicle-filter-header p {
        font-size: 12px;
    }

    .vehicle-filter-field label {
        font-size: 11px;
    }

    .vehicle-filter-field input, .vehicle-filter-field select {
        font-size: 13px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .vehicle-catalog-hero h1 {
        font-size: 31px;
    }

    .vehicle-catalog-hero p {
        font-size: 13px;
    }

    .vehicle-catalog-toolbar h2 {
        font-size: 20px;
    }

    .vehicle-catalog-toolbar p {
        font-size: 11px;
    }

    .vehicle-catalog-control-label {
        font-size: 10px;
    }

    .vehicle-catalog-control-group select {
        font-size: 12px;
    }

    .vehicle-list-card h3 {
        font-size: 26px;
    }

    .vehicle-list-description {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .vehicle-catalog-hero h1 {
        font-size: 28px;
    }

    .vehicle-filter-header h2 {
        font-size: 22px;
    }

    .vehicle-catalog-card h3 {
        font-size: 22px;
    }

    .vehicle-catalog-specs > span {
        padding: 10px;
    }

    .vehicle-catalog-specs small {
        font-size: 9px;
    }

    .vehicle-catalog-specs strong {
        font-size: 11px;
    }
}

/* =========================================================
   FINAL OVERRIDE — Vehicle Details Page Readability
   Applies only to the professional vehicle details page.
   Keep this block at the very end of customer-overrides.css.
   ========================================================= */

/* Hero */
.vehicle-detail-breadcrumbs {
    color: rgba(255, 255, 255, 0.84);
    font-size: 12px;
    line-height: 1.5;
}

    .vehicle-detail-breadcrumbs a {
        color: rgba(255, 255, 255, 0.94);
    }

.vehicle-detail-eyebrow {
    font-size: 12px;
}

.vehicle-detail-hero h1 {
    font-size: 38px;
}

.vehicle-detail-hero p {
    max-width: 760px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 1.65;
}

.vehicle-back-link {
    min-height: 40px;
    padding: 9px 14px;
    font-size: 12px;
}

/* Shared card headings */
.vehicle-card-kicker {
    margin-bottom: 4px;
    color: #687782;
    font-size: 10px;
    letter-spacing: 0.75px;
}

.vehicle-card-header h2, .vehicle-information-header h2 {
    color: #17232c;
    font-size: 22px;
    line-height: 1.2;
}

.vehicle-image-count {
    min-height: 33px;
    padding: 6px 10px;
    color: #4f606b;
    font-size: 11px;
}

/* Summary card */
.vehicle-summary-card {
    padding: 22px;
}

.vehicle-company {
    margin-bottom: 5px;
    color: #556670;
    font-size: 11px;
    letter-spacing: 0.75px;
}

.vehicle-summary-top h2 {
    font-size: 36px;
}

.vehicle-model-line {
    color: #5e6d77;
    font-size: 12px;
    line-height: 1.45;
}

.vehicle-summary-status {
    min-height: 30px;
    padding: 6px 10px;
    font-size: 9.5px;
    letter-spacing: 0.2px;
}

.vehicle-price-block {
    padding: 19px 0 17px;
}

    .vehicle-price-block > span {
        margin-bottom: 4px;
        color: #65737d;
        font-size: 10px;
        letter-spacing: 0.55px;
    }

    .vehicle-price-block strong {
        margin-bottom: 6px;
        font-size: 40px;
    }

    .vehicle-price-block small {
        color: #63717a;
        font-size: 11px;
        line-height: 1.55;
    }

/* Key specifications */
.vehicle-key-specs {
    gap: 9px;
    margin-bottom: 18px;
}

    .vehicle-key-specs article {
        min-height: 84px;
        padding: 12px;
    }

    .vehicle-key-specs i {
        margin-bottom: 7px;
        color: #3f6679;
        font-size: 16px;
    }

    .vehicle-key-specs span {
        margin-bottom: 4px;
        color: #64747e;
        font-size: 9.5px;
        letter-spacing: 0.35px;
    }

    .vehicle-key-specs strong {
        color: #1f2d35;
        font-size: 11.5px;
        line-height: 1.4;
    }

/* Booking panel */
.vehicle-booking-panel {
    padding: 16px;
}

.vehicle-booking-icon {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
    font-size: 14px;
}

.vehicle-booking-heading span:not(.vehicle-booking-icon) {
    margin-bottom: 2px;
    color: #5c6a60;
    font-size: 9px;
    letter-spacing: 0.25px;
}

.vehicle-booking-heading strong {
    color: #17252d;
    font-size: 16px;
}

.vehicle-booking-panel > p {
    margin-bottom: 13px;
    color: #55635b;
    font-size: 11px;
    line-height: 1.6;
}

.vehicle-primary-button, .vehicle-secondary-button {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
}

/* Unavailable state */
.vehicle-unavailable-panel strong {
    font-size: 12px;
}

.vehicle-unavailable-panel span {
    color: #845b5f;
    font-size: 11px;
    line-height: 1.55;
}

/* Contact actions */
.vehicle-contact-actions {
    gap: 9px;
    margin-bottom: 15px;
}

    .vehicle-contact-actions > a {
        min-height: 58px;
        padding: 10px 12px;
    }

    .vehicle-contact-actions i {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    .vehicle-contact-actions small {
        margin-bottom: 3px;
        color: #66757f;
        font-size: 9.5px;
        line-height: 1.35;
    }

    .vehicle-contact-actions span {
        color: #1f3039;
        font-size: 11.5px;
        line-height: 1.4;
    }

/* Assurance list */
.vehicle-assurance-list {
    gap: 8px;
    padding-top: 13px;
}

    .vehicle-assurance-list li {
        gap: 8px;
        color: #4f5f69;
        font-size: 10.5px;
        line-height: 1.45;
    }

    .vehicle-assurance-list i {
        font-size: 11px;
    }

/* Information card and tabs */
.vehicle-information-header {
    padding: 17px 20px;
}

.vehicle-information-tabs {
    padding: 0 20px;
}

    .vehicle-information-tabs > li > a {
        min-height: 49px;
        padding: 11px 15px;
        color: #50616b;
        font-size: 13px;
        letter-spacing: 0.1px;
    }

.vehicle-information-content {
    min-height: 245px;
    padding: 24px;
}

.vehicle-overview-layout {
    gap: 30px;
}

    .vehicle-overview-layout h3 {
        margin-bottom: 13px;
        font-size: 23px;
    }

/* Overview description */
.vehicle-description, .vehicle-description p {
    color: #40515b;
    font-size: 13.5px;
    line-height: 1.8;
}

    .vehicle-description p {
        margin-bottom: 15px;
    }

.vehicle-company-note {
    margin-top: 17px;
    padding: 13px 15px;
    color: #4e5e68;
    font-size: 11.5px;
    line-height: 1.65;
}

/* At a glance */
.vehicle-overview-highlight {
    padding: 17px;
}

    .vehicle-overview-highlight > span {
        margin-bottom: 10px;
        color: #53646f;
        font-size: 9.5px;
        letter-spacing: 0.55px;
    }

    .vehicle-overview-highlight dl > div {
        padding: 10px 0;
    }

    .vehicle-overview-highlight dt, .vehicle-overview-highlight dd {
        font-size: 11.5px;
        line-height: 1.45;
    }

    .vehicle-overview-highlight dt {
        color: #596a74;
    }

    .vehicle-overview-highlight dd {
        color: #17262f;
    }

/* Full specifications */
.vehicle-specification-grid > div {
    padding: 15px 16px;
}

.vehicle-specification-grid span {
    margin-bottom: 5px;
    color: #5f707a;
    font-size: 9.5px;
    letter-spacing: 0.3px;
}

.vehicle-specification-grid strong {
    color: #1f2e36;
    font-size: 11.5px;
    line-height: 1.45;
}

/* Booking and export process */
.vehicle-process-grid article {
    min-height: 190px;
    padding: 19px;
}

.vehicle-process-grid h3 {
    margin-bottom: 7px;
    font-size: 19px;
}

.vehicle-process-grid p {
    color: #52616b;
    font-size: 11.5px;
    line-height: 1.65;
}

.vehicle-process-note {
    padding: 13px 15px;
}

    .vehicle-process-note p {
        color: #4f5f68;
        font-size: 11.5px;
        line-height: 1.65;
    }

/* Tablet */
@media (max-width: 991px) {
    .vehicle-detail-hero h1 {
        font-size: 34px;
    }

    .vehicle-summary-top h2 {
        font-size: 34px;
    }

    .vehicle-description, .vehicle-description p {
        font-size: 13px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .vehicle-detail-hero h1 {
        font-size: 30px;
    }

    .vehicle-detail-hero p {
        font-size: 13px;
    }

    .vehicle-summary-card {
        padding: 18px;
    }

    .vehicle-summary-top h2 {
        font-size: 31px;
    }

    .vehicle-price-block strong {
        font-size: 36px;
    }

    .vehicle-card-header h2, .vehicle-information-header h2 {
        font-size: 21px;
    }

    .vehicle-information-content {
        padding: 19px;
    }

    .vehicle-overview-layout h3 {
        font-size: 22px;
    }

    .vehicle-description, .vehicle-description p {
        font-size: 13px;
        line-height: 1.75;
    }
}

@media (max-width: 480px) {
    .vehicle-detail-hero h1 {
        font-size: 28px;
    }

    .vehicle-key-specs strong {
        font-size: 11px;
    }

    .vehicle-contact-actions span {
        font-size: 11px;
    }

    .vehicle-information-tabs > li > a {
        font-size: 12px;
    }

    .vehicle-overview-highlight dt, .vehicle-overview-highlight dd, .vehicle-specification-grid strong {
        font-size: 11px;
    }
}

/* =========================================================
   Vehicle Details Fullscreen Gallery
   ========================================================= */

.vehicle-gallery-open {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: 0;
    cursor: zoom-in;
}

    .vehicle-gallery-open > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

.vehicle-gallery-zoom {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    display: flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 21px;
    background: rgba(18, 30, 38, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -42%) scale(0.88);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
    pointer-events: none;
}

.vehicle-gallery-open:hover .vehicle-gallery-zoom,
.vehicle-gallery-open:focus-visible .vehicle-gallery-zoom {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.vehicle-gallery-open:hover .vehicle-gallery-zoom {
    background: rgba(18, 30, 38, 0.9);
}

.vehicle-gallery-open:focus-visible {
    outline: 3px solid #dafa1d;
    outline-offset: -3px;
}

/* Prevent background scrolling while lightbox is open. */
html.vehicle-lightbox-open,
body.vehicle-lightbox-open {
    overflow: hidden;
}

.vehicle-lightbox[hidden] {
    display: none !important;
}

.vehicle-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 18px;
}

.vehicle-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 11, 0.94);
    backdrop-filter: blur(4px);
}

.vehicle-lightbox-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(1500px, 100%);
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr) auto;
    color: #ffffff;
    outline: none;
}

.vehicle-lightbox-header {
    display: flex;
    min-height: 56px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 5px 4px 13px;
}

    .vehicle-lightbox-header > div {
        display: flex;
        min-width: 0;
        align-items: baseline;
        gap: 12px;
    }

    .vehicle-lightbox-header strong {
        overflow: hidden;
        font-size: 16px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .vehicle-lightbox-header span {
        flex-shrink: 0;
        color: rgba(255, 255, 255, 0.7);
        font-size: 12px;
    }

.vehicle-lightbox-close {
    display: flex;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

    .vehicle-lightbox-close:hover,
    .vehicle-lightbox-close:focus-visible {
        color: #17232c;
        background: #dafa1d;
        transform: rotate(5deg);
    }

.vehicle-lightbox-stage {
    position: relative;
    display: flex;
    min-height: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.vehicle-lightbox-figure {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0;
    align-items: center;
    justify-content: center;
}

    .vehicle-lightbox-figure img {
        display: block;
        width: auto;
        max-width: calc(100% - 150px);
        height: auto;
        max-height: 100%;
        object-fit: contain;
        object-position: center;
        user-select: none;
        -webkit-user-drag: none;
    }

.vehicle-lightbox-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    color: #17232c;
    font-size: 31px;
    background: rgba(255, 255, 255, 0.9);
    border: 0;
    border-radius: 50%;
    transform: translateY(-50%);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

    .vehicle-lightbox-nav:hover,
    .vehicle-lightbox-nav:focus-visible {
        background: #dafa1d;
        transform: translateY(-50%) scale(1.06);
    }

.vehicle-lightbox-previous {
    left: 10px;
}

.vehicle-lightbox-next {
    right: 10px;
}

.vehicle-lightbox-thumbnails {
    display: flex;
    min-height: 98px;
    gap: 8px;
    align-items: center;
    padding: 12px 4px 3px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

.vehicle-lightbox-thumb {
    display: block;
    flex: 0 0 112px;
    width: 112px;
    height: 76px;
    padding: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid transparent;
    border-radius: 3px;
    opacity: 0.68;
    transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

    .vehicle-lightbox-thumb img {
        display: block;
        width: 100%;
        height: 100%;
        background: #ffffff;
        object-fit: contain;
        object-position: center;
    }

    .vehicle-lightbox-thumb:hover,
    .vehicle-lightbox-thumb:focus-visible,
    .vehicle-lightbox-thumb.is-active {
        border-color: #dafa1d;
        opacity: 1;
        transform: translateY(-2px);
    }

@media (max-width: 767px) {
    .vehicle-lightbox {
        padding: 10px;
    }

    .vehicle-lightbox-header {
        min-height: 50px;
        padding-bottom: 8px;
    }

        .vehicle-lightbox-header strong {
            font-size: 14px;
        }

    .vehicle-lightbox-close {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    .vehicle-lightbox-figure img {
        max-width: 100%;
        max-height: 100%;
    }

    .vehicle-lightbox-nav {
        width: 44px;
        height: 44px;
        font-size: 25px;
        background: rgba(255, 255, 255, 0.82);
    }

    .vehicle-lightbox-previous {
        left: 4px;
    }

    .vehicle-lightbox-next {
        right: 4px;
    }

    .vehicle-lightbox-thumbnails {
        min-height: 82px;
        gap: 6px;
        padding-top: 8px;
    }

    .vehicle-lightbox-thumb {
        flex-basis: 86px;
        width: 86px;
        height: 60px;
    }

    .vehicle-gallery-zoom {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }
}

/* Fix fullscreen gallery header and close button visibility */
.vehicle-lightbox .vehicle-lightbox-header {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

    .vehicle-lightbox .vehicle-lightbox-header strong {
        color: #ffffff !important;
    }

    .vehicle-lightbox .vehicle-lightbox-header span {
        color: rgba(255, 255, 255, 0.75) !important;
    }

.vehicle-lightbox .vehicle-lightbox-close {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

    .vehicle-lightbox .vehicle-lightbox-close i {
        color: inherit !important;
    }

    .vehicle-lightbox .vehicle-lightbox-close:hover,
    .vehicle-lightbox .vehicle-lightbox-close:focus-visible {
        color: #17232c !important;
        background: #dafa1d !important;
    }

/* =========================================================
   Vehicle Details — Balance Gallery and Summary Columns
   ========================================================= */

@media (min-width: 992px) {
    .vehicle-detail-grid {
        align-items: stretch !important;
    }

    .vehicle-gallery-card,
    .vehicle-summary-card {
        height: 100%;
    }

    .vehicle-gallery-card {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .detail-gallery-slider {
        display: grid;
        min-height: 0;
        grid-template-rows: minmax(520px, 1fr) auto;
    }

    .vehicle-main-image.detail-image-slider {
        width: 100%;
        height: 100% !important;
        min-height: 520px;
    }

    .detail-image-slide {
        width: 100%;
        height: 100%;
    }

    .vehicle-gallery-open {
        width: 100%;
        height: 100%;
    }

        .vehicle-gallery-open > img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
            background: #10161a;
        }

    .vehicle-thumbnail-strip {
        flex-shrink: 0;
        align-self: end;
    }
}

@media (max-width: 991px) {
    .vehicle-gallery-card,
    .vehicle-summary-card {
        height: auto;
    }

    .detail-gallery-slider {
        display: block;
    }

    .vehicle-main-image.detail-image-slider {
        height: auto !important;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .detail-image-slide,
    .vehicle-gallery-open {
        height: 100%;
    }
}



/* =========================================================
   FINAL OVERRIDE — Single Mobile Menu + Hero Text Separation
   Keep this block at the very end of customer-overrides.css.
   The left mobile hamburger is hidden. The existing right-side
   panel remains the only mobile menu trigger. JavaScript moves
   the existing .harrier-menu links into that panel on mobile.
   ========================================================= */

@media (max-width: 767px) {
    /* Keep only the right-side hamburger. */
    .harrier-nav .nav-toggle:not(.nav-toggle-desktop) {
        display: none !important;
    }

    .harrier-nav .desktop-side-trigger {
        display: flex !important;
        flex: 0 0 30px;
        width: 30px;
        height: 54px !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
    }

    .harrier-nav .nav-toggle-desktop {
        display: inline-flex !important;
        width: 30px !important;
        min-width: 30px !important;
        height: 54px !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 0 !important;
        color: #111 !important;
        font-size: 0 !important;
    }

        .harrier-nav .nav-toggle-desktop i {
            font-size: 20px !important;
        }

    /* Right panel becomes the single combined mobile navigation. */
    .harrier-nav .desktop-side-panel {
        top: 54px !important;
        right: 8px !important;
        left: auto !important;
        width: min(calc(100vw - 16px), 330px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 70px) !important;
        padding: 16px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        transform-origin: top right !important;
    }

    .desktop-side-panel .mobile-primary-navigation {
        display: block;
        margin: -2px -2px 16px;
        padding: 0 2px 14px;
        border-bottom: 1px solid #e5e8ea;
    }

        .desktop-side-panel .mobile-primary-navigation > h3 {
            margin: 0 0 8px !important;
            padding: 0 0 9px !important;
            color: #17232c !important;
            font: 600 18px/1 "Saira Condensed", Arial, sans-serif !important;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            border-bottom: 1px solid #e7eaec;
        }

            .desktop-side-panel .mobile-primary-navigation > h3::after {
                display: block;
                width: 34px;
                height: 2px;
                margin-top: 8px;
                background: var(--harrier-lime);
                content: "";
            }

        /* Neutralise the old absolute mobile-menu layout after moving it. */
        .desktop-side-panel .mobile-primary-navigation .harrier-menu {
            position: static !important;
            inset: auto !important;
            display: grid !important;
            width: 100% !important;
            height: auto !important;
            max-height: none !important;
            gap: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: visible !important;
            background: transparent !important;
            box-shadow: none !important;
            list-style: none !important;
        }

            .desktop-side-panel .mobile-primary-navigation .harrier-menu > li {
                display: block !important;
                width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
                border: 0 !important;
            }

                .desktop-side-panel .mobile-primary-navigation .harrier-menu > li + li {
                    border-top: 1px solid #edf0f2 !important;
                }

            .desktop-side-panel .mobile-primary-navigation .harrier-menu a,
            .desktop-side-panel .mobile-primary-navigation .harrier-menu button {
                display: flex !important;
                width: 100% !important;
                min-height: 42px;
                align-items: center;
                margin: 0 !important;
                padding: 10px 4px !important;
                color: #26343c !important;
                font: 500 14px/1.35 "Open Sans", Arial, sans-serif !important;
                letter-spacing: 0 !important;
                text-align: left;
                text-decoration: none !important;
                text-transform: none !important;
                white-space: normal !important;
                background: transparent !important;
                border: 0 !important;
            }

                .desktop-side-panel .mobile-primary-navigation .harrier-menu a::before {
                    flex: 0 0 auto;
                    margin-right: 8px;
                    color: var(--harrier-blue);
                    font-family: "FontAwesome";
                    font-size: 10px;
                    content: "\f105";
                }

                .desktop-side-panel .mobile-primary-navigation .harrier-menu a:hover,
                .desktop-side-panel .mobile-primary-navigation .harrier-menu a:focus-visible {
                    color: #6f8300 !important;
                    outline: none;
                }
}