/* =========================================================
   SMG Japan — Home page responsive styles
   Load after customer-overrides.css and only on Home/Index.

   This file uses the existing Revolution Slider markup. It does
   not hide, replace, or duplicate the Hero section.
   ========================================================= */

.customer-home-page {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

    /* Keep the existing slider contained without changing desktop design. */
    .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-hero-title,
    .customer-home-page .home-hero-copy {
        white-space: normal !important;
    }

/* =========================================================
   Tablet search layout
   ========================================================= */
@media (min-width: 768px) and (max-width: 991px) {
    .customer-home-page .home-search-section {
        padding-right: 15px;
        padding-left: 15px;
    }

    .customer-home-page .home-search-panel {
        width: 100% !important;
        max-width: 750px !important;
    }

    .customer-home-page form.home-search-form {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

        .customer-home-page form.home-search-form > * {
            min-width: 0 !important;
            width: 100% !important;
            margin: 0 !important;
        }

        .customer-home-page form.home-search-form > .harrier-price-preview {
            display: none !important;
        }

        .customer-home-page form.home-search-form > button {
            grid-column: 1 / -1 !important;
        }
}

/* =========================================================
   Mobile Hero and vehicle search
   ========================================================= */
@media (max-width: 767px) {
    .customer-home-page {
        --home-mobile-hero-height: clamp(330px, 68vw, 390px);
    }

        /*
       Revolution Slider writes inline heights on several generated
       elements. Keeping every layer at one height removes the black
       spacer without pulling the Search section over the slider.
    */
        .customer-home-page .home-slider5,
        .customer-home-page #thmg-slideshow,
        .customer-home-page #rev_slider_4_wrapper,
        .customer-home-page #rev_slider_4,
        .customer-home-page #rev_slider_4 > ul,
        .customer-home-page #rev_slider_4 .tp-revslider-mainul,
        .customer-home-page #rev_slider_4 > ul > li,
        .customer-home-page #rev_slider_4 .tp-revslider-mainul > li,
        .customer-home-page #rev_slider_4 .slotholder,
        .customer-home-page #rev_slider_4 .tp-bgimg {
            width: 100% !important;
            height: var(--home-mobile-hero-height) !important;
            min-height: var(--home-mobile-hero-height) !important;
            max-height: var(--home-mobile-hero-height) !important;
        }

        .customer-home-page .home-slider5,
        .customer-home-page #thmg-slideshow,
        .customer-home-page #rev_slider_4_wrapper,
        .customer-home-page #rev_slider_4 {
            position: relative !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: hidden !important;
            background: #10161a !important;
        }

            .customer-home-page #rev_slider_4 > ul,
            .customer-home-page #rev_slider_4 .tp-revslider-mainul {
                position: relative !important;
                margin: 0 !important;
                padding: 0 !important;
                overflow: hidden !important;
            }

                .customer-home-page #rev_slider_4 > ul > li,
                .customer-home-page #rev_slider_4 .tp-revslider-mainul > li {
                    overflow: hidden !important;
                }

            .customer-home-page #rev_slider_4 .slotholder,
            .customer-home-page #rev_slider_4 .tp-bgimg {
                inset: 0 !important;
                background-repeat: no-repeat !important;
                background-position: center center !important;
                background-size: cover !important;
            }

            .customer-home-page #rev_slider_4 > ul > li > img,
            .customer-home-page #rev_slider_4 .tp-revslider-mainul > li > img {
                width: 100% !important;
                height: 100% !important;
                max-width: none !important;
                object-fit: cover !important;
                object-position: center center !important;
            }

            /* Ensure the caption area fills the image and follows one clean flow. */
            .customer-home-page #rev_slider_4 .container,
            .customer-home-page #rev_slider_4 .content_slideshow,
            .customer-home-page #rev_slider_4 .content_slideshow .row,
            .customer-home-page #rev_slider_4 .content_slideshow .row > div {
                position: relative !important;
                width: 100% !important;
                max-width: none !important;
                height: 100% !important;
                min-height: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
            }

            .customer-home-page #rev_slider_4 .home-hero-info {
                position: absolute !important;
                inset: 0 !important;
                display: flex !important;
                width: 100% !important;
                height: 100% !important;
                flex-direction: column !important;
                align-items: flex-start !important;
                justify-content: center !important;
                gap: 8px !important;
                margin: 0 !important;
                padding: 24px 68px 66px 50px !important;
                color: #fff !important;
                transform: none !important;
            }

                .customer-home-page #rev_slider_4 .home-hero-info > .tp-caption {
                    position: static !important;
                    top: auto !important;
                    right: auto !important;
                    bottom: auto !important;
                    left: auto !important;
                    display: block !important;
                    width: auto !important;
                    max-width: min(500px, calc(100vw - 118px)) !important;
                    height: auto !important;
                    min-height: 0 !important;
                    margin: 0 !important;
                    padding: 0 !important;
                    opacity: 1 !important;
                    visibility: visible !important;
                    white-space: normal !important;
                    transform: none !important;
                }

            .customer-home-page #rev_slider_4 .home-hero-eyebrow,
            .customer-home-page #rev_slider_4 .home-hero-eyebrow span {
                color: #55c866 !important;
                font: 500 14px/1.2 "Saira Condensed", Arial, sans-serif !important;
                letter-spacing: 0.02em !important;
                text-transform: uppercase !important;
            }

            .customer-home-page #rev_slider_4 .home-hero-title {
                color: #fff !important;
                font: 500 clamp(32px, 7.2vw, 42px)/0.98 "Teko", Arial, sans-serif !important;
                letter-spacing: 0.01em !important;
                text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55) !important;
                text-transform: uppercase !important;
                text-wrap: balance;
            }

            .customer-home-page #rev_slider_4 .home-slide-title-line {
                display: inline !important;
                font: inherit !important;
            }

            .customer-home-page #rev_slider_4 .home-hero-copy {
                color: rgba(255, 255, 255, 0.97) !important;
                font: 400 13px/1.5 "Open Sans", Arial, sans-serif !important;
                text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65) !important;
            }

            .customer-home-page #rev_slider_4 .home-hero-action {
                margin-top: 8px !important;
            }

            .customer-home-page #rev_slider_4 .home-hero-button {
                display: inline-flex !important;
                min-height: 44px !important;
                align-items: center !important;
                justify-content: center !important;
                padding: 10px 18px !important;
                color: #263039 !important;
                background: var(--harrier-lime) !important;
                font: 600 16px/1 "Saira Condensed", Arial, sans-serif !important;
                letter-spacing: 0.03em !important;
                text-decoration: none !important;
                text-transform: uppercase !important;
                white-space: nowrap !important;
            }

            /* Keep the original arrows inside the Hero and away from text. */
            .customer-home-page #rev_slider_4_wrapper .tp-leftarrow.default,
            .customer-home-page #rev_slider_4_wrapper .tp-rightarrow.default {
                top: auto !important;
                bottom: 16px !important;
                width: 50px !important;
                height: 50px !important;
                margin: 0 !important;
                opacity: 1 !important;
                visibility: visible !important;
                transform: none !important;
                z-index: 70 !important;
            }

            .customer-home-page #rev_slider_4_wrapper .tp-leftarrow.default {
                right: auto !important;
                left: 12px !important;
            }

            .customer-home-page #rev_slider_4_wrapper .tp-rightarrow.default {
                right: 12px !important;
                left: auto !important;
            }

        /* Search starts in normal document flow immediately after the Hero. */
        .customer-home-page .home-search-section {
            position: relative !important;
            z-index: 10 !important;
            width: 100% !important;
            margin: 0 !important;
            padding: 12px 12px 0 !important;
            overflow: visible !important;
            background: #fff !important;
        }

        .customer-home-page .home-search-panel {
            width: 100% !important;
            max-width: 100% !important;
            min-height: 0 !important;
            margin: 0 !important;
            padding: 24px 20px 22px !important;
            background: #3e6274 !important;
            border-bottom: 4px solid var(--harrier-lime) !important;
            box-shadow: 0 10px 24px rgba(24, 46, 57, 0.16) !important;
        }

            .customer-home-page .home-search-panel h2 {
                margin: 0 0 20px !important;
                color: #fff !important;
                font: 500 clamp(30px, 7vw, 36px)/1 "Teko", Arial, sans-serif !important;
                text-align: center !important;
                text-transform: uppercase !important;
            }

        .customer-home-page form.home-search-form {
            display: grid !important;
            width: 100% !important;
            grid-template-columns: minmax(0, 1fr) !important;
            gap: 12px !important;
            margin: 0 !important;
            padding: 0 !important;
        }

            .customer-home-page form.home-search-form > select,
            .customer-home-page form.home-search-form > input,
            .customer-home-page form.home-search-form > button,
            .customer-home-page form.home-search-form > .harrier-price-preview {
                width: 100% !important;
                min-width: 0 !important;
                max-width: 100% !important;
                margin: 0 !important;
                grid-column: 1 !important;
            }

            .customer-home-page form.home-search-form > select,
            .customer-home-page form.home-search-form > input {
                display: block !important;
                height: 58px !important;
                min-height: 58px !important;
                padding: 0 20px !important;
                color: #777 !important;
                background: #fff !important;
                border: 0 !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                font: 400 16px/58px Arial, sans-serif !important;
                outline: none !important;
            }

                .customer-home-page form.home-search-form > input[type="search"] {
                    -webkit-appearance: none !important;
                    appearance: none !important;
                }

            .customer-home-page form.home-search-form > .harrier-price-preview {
                display: none !important;
            }

            .customer-home-page form.home-search-form > button {
                display: flex !important;
                height: 54px !important;
                min-height: 54px !important;
                align-items: center !important;
                justify-content: center !important;
                padding: 0 18px !important;
                color: #263039 !important;
                background: var(--harrier-lime) !important;
                border: 0 !important;
                font: 600 21px/1 "Saira Condensed", Arial, sans-serif !important;
                text-transform: uppercase !important;
                cursor: pointer !important;
            }
}

@media (max-width: 480px) {
    .customer-home-page {
        --home-mobile-hero-height: 350px;
    }

        .customer-home-page #rev_slider_4 .home-hero-info {
            gap: 7px !important;
            padding: 22px 58px 62px 38px !important;
        }

            .customer-home-page #rev_slider_4 .home-hero-info > .tp-caption {
                max-width: calc(100vw - 94px) !important;
            }

        .customer-home-page #rev_slider_4 .home-hero-eyebrow,
        .customer-home-page #rev_slider_4 .home-hero-eyebrow span {
            font-size: 13px !important;
        }

        .customer-home-page #rev_slider_4 .home-hero-title {
            font-size: clamp(30px, 8.7vw, 38px) !important;
        }

        .customer-home-page #rev_slider_4 .home-hero-copy {
            font-size: 12px !important;
            line-height: 1.45 !important;
        }

        .customer-home-page #rev_slider_4 .home-hero-button {
            min-height: 42px !important;
            padding: 9px 15px !important;
            font-size: 15px !important;
        }

        .customer-home-page #rev_slider_4_wrapper .tp-leftarrow.default,
        .customer-home-page #rev_slider_4_wrapper .tp-rightarrow.default {
            bottom: 12px !important;
            width: 46px !important;
            height: 46px !important;
        }

        .customer-home-page #rev_slider_4_wrapper .tp-leftarrow.default {
            left: 8px !important;
        }

        .customer-home-page #rev_slider_4_wrapper .tp-rightarrow.default {
            right: 8px !important;
        }

        .customer-home-page .home-search-section {
            padding: 10px 10px 0 !important;
        }

        .customer-home-page .home-search-panel {
            padding: 22px 16px 20px !important;
        }

            .customer-home-page .home-search-panel h2 {
                margin-bottom: 18px !important;
                font-size: 30px !important;
            }

        .customer-home-page form.home-search-form > select,
        .customer-home-page form.home-search-form > input {
            height: 56px !important;
            min-height: 56px !important;
            padding: 0 17px !important;
            font-size: 15px !important;
            line-height: 56px !important;
        }
}

@media (prefers-reduced-motion: reduce) {
    .customer-home-page #rev_slider_4 .tp-caption,
    .customer-home-page #rev_slider_4 .tp-bgimg {
        transition: none !important;
        animation: none !important;
    }
}