/*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: 1050
}

.harrier-logo-panel {
    position: absolute;
    z-index: 1055;
    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: 1045;
    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;
        justify-content: flex-end;
    }

    .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
    }

    .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: 165px;
        max-height: 110px;
    }
}

/* 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%;
        padding-bottom: 5px;
        white-space: normal;
        line-height: 1.6;
    }

    .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%;
        /* padding: 0;
        border: 0;
        background: transparent; */
    }

    .vehicle-main-image.detail-image-slider .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;
    }
}

/* =========================================================
   Mobile panel flow correction
   Keep the moved primary navigation in normal panel flow so it
   cannot overlap Language or My Account sections.
   ========================================================= */
@media (max-width: 767px) {
    .harrier-nav .desktop-side-panel {
        display: block !important;
    }

    .harrier-nav .desktop-side-panel .mobile-primary-navigation,
    .harrier-nav .desktop-side-panel>section {
        position: relative !important;
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        height: auto !important;
    }

    .harrier-nav .desktop-side-panel .mobile-primary-navigation .harrier-menu {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: flex !important;
        flex-direction: column !important;
        float: none !important;
        clear: both !important;
        visibility: visible !important;
        transform: none !important;
    }

    .harrier-nav .desktop-side-panel .mobile-primary-navigation .harrier-menu>li,
    .harrier-nav .desktop-side-panel .mobile-primary-navigation .harrier-menu>li>a,
    .harrier-nav .desktop-side-panel .mobile-primary-navigation .harrier-menu>li>form,
    .harrier-nav .desktop-side-panel .mobile-primary-navigation .harrier-menu>li>form>button {
        position: relative !important;
        display: flex !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        height: auto !important;
    }
}