/**
 * ==========================================================
 * MSTJapan
 * Public Website Responsive Styles
 * Phase 18.2
 * Version: 1.0.0
 * ==========================================================
 *
 * PURPOSE:
 *
 * Responsive behavior for the global public website shell.
 *
 * VISUAL AUTHORITY:
 *
 * Approved MSTJapan Homepage Mockup
 *
 * BREAKPOINT STRATEGY:
 *
 * Desktop:
 * 1200px+
 *
 * Large Tablet / Small Laptop:
 * 992px–1199px
 *
 * Tablet:
 * 768px–991px
 *
 * Mobile:
 * <768px
 *
 * Small Mobile:
 * <480px
 * ==========================================================
 */


/* ==========================================================
   1. Large Desktop Compression
   <= 1320px
========================================================== */

@media (max-width: 1320px) {

    .public-container {
        width: min(
            calc(100% - 30px),
            1220px
        );
    }

    .public-header-inner {
        gap: 18px;
    }

    .public-brand {
        min-width: 165px;
    }

    .public-brand-main {
        font-size: 25px;
    }

    .public-nav-link {
        padding-inline: 10px;
        font-size: 12px;
    }

    .public-nav-link::after {
        left: 10px;
        right: 10px;
    }

    .public-header-actions {
        gap: 7px;
    }

    .public-quote-button {
        padding-inline: 14px;
    }

    .public-footer-grid {
        grid-template-columns:
            minmax(200px, 1.25fr)
            repeat(4, minmax(120px, 0.8fr))
            minmax(190px, 1fr);

        gap: 26px;
    }
}


/* ==========================================================
   2. Small Laptop / Large Tablet
   <= 1160px
========================================================== */

@media (max-width: 1160px) {

    .public-topbar-left {
        gap: 14px;
    }

    .public-topbar-item {
        font-size: 11px;
    }

    .public-navigation {
        display: none;
    }

    .public-header-inner {
        min-height: 66px;
        justify-content: space-between;
    }

    .public-brand {
        min-width: auto;
    }

    .public-header-actions {
        margin-left: auto;
    }

    .public-mobile-toggle {
        display: inline-block;
    }

    .public-register-link {
        display: none;
    }

    .public-footer-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap: 34px 28px;
    }

    .public-footer-brand-column {
        grid-column: span 1;
    }

    .public-footer-newsletter {
        grid-column: span 1;
    }
}


/* ==========================================================
   3. Tablet
   <= 991px
========================================================== */

@media (max-width: 991px) {

    .public-container {
        width: min(
            calc(100% - 28px),
            920px
        );
    }

    .public-topbar-inner {
        min-height: 38px;
    }

    .public-topbar-left {
        gap: 11px;
    }

    .public-stock-count-item {
        display: none;
    }

    .public-time-item strong {
        display: none;
    }

    .public-topbar-control {
        min-width: 82px;
        padding-inline: 9px;
    }

    .public-account-link {
        display: none;
    }

    .public-quote-button {
        min-height: 38px;
        padding-inline: 13px;
    }

    .homepage-development-shell {
        padding: 28px 0 36px;
    }

    .homepage-development-card {
        min-height: 210px;
        padding: 36px;
    }

    .public-footer-grid {
        padding-top: 42px;
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .public-footer-brand-column {
        padding-right: 0;
    }
}


/* ==========================================================
   4. Mobile
   <= 767px
========================================================== */

@media (max-width: 767px) {

    :root {
        --mst-radius-lg: 13px;
    }

    .public-container {
        width: min(
            calc(100% - 24px),
            720px
        );
    }

    /* ------------------------------------------------------
       Topbar
    ------------------------------------------------------ */

    .public-topbar {
        min-height: 34px;
    }

    .public-topbar-inner {
        min-height: 34px;
        gap: 8px;
    }

    .public-topbar-left {
        flex: 1 1 auto;
        min-width: 0;
    }

    .public-topbar-left
    .public-topbar-item:not(.public-time-item) {
        display: none;
    }

    .public-time-item {
        max-width: 100%;
        overflow: hidden;
    }

    .public-time-item > span:last-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .public-time-item {
        font-size: 10px;
    }

    .public-topbar-right {
        flex: 0 0 auto;
    }

    .public-topbar-control {
        min-width: auto;
        width: 44px;
        padding: 0;
        font-size: 0;
    }

    .public-topbar-control > span:first-child {
        font-size: 12px;
    }

    .public-topbar-control > span:nth-child(2) {
        display: none;
    }

    .public-control-caret {
        display: none;
    }

    /* ------------------------------------------------------
       Header
    ------------------------------------------------------ */

    .public-header-inner {
        min-height: 62px;
        gap: 10px;
    }

    .public-brand-main {
        font-size: 23px;
    }

    .public-brand-tagline {
        display: none;
    }

    .public-header-actions {
        gap: 7px;
    }

    .public-quote-button {
        min-height: 36px;
        padding-inline: 11px;
        font-size: 11px;
    }

    .public-mobile-toggle {
        width: 39px;
        height: 37px;
        padding: 8px;
    }

    /* ------------------------------------------------------
       Homepage Temporary Shell
    ------------------------------------------------------ */

    .homepage-development-shell {
        padding: 20px 0 28px;
    }

    .homepage-development-card {
        min-height: 180px;
        padding: 26px 22px;
    }

    .homepage-development-card h1 {
        margin-bottom: 10px;
        font-size: clamp(
            26px,
            8vw,
            36px
        );
        letter-spacing: -1px;
    }

    .homepage-development-card p {
        font-size: 14px;
    }

    /* ------------------------------------------------------
       Footer
    ------------------------------------------------------ */

    .public-footer-grid {
        padding: 36px 0 30px;
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 30px 20px;
    }

    .public-footer-brand-column,
    .public-footer-newsletter {
        grid-column: 1 / -1;
    }

    .public-footer-description {
        max-width: 480px;
    }

    .public-footer-column h3 {
        font-size: 13px;
    }

    .public-footer-bottom {
        min-height: 70px;
        padding: 15px 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 8px;
    }

    /* ------------------------------------------------------
       Mobile Navigation Drawer
    ------------------------------------------------------ */

    .public-mobile-navigation {
        width: min(
            355px,
            calc(100vw - 22px)
        );
    }

    .public-mobile-navigation-inner {
        padding: 17px;
    }
}


/* ==========================================================
   5. Small Mobile
   <= 560px
========================================================== */

@media (max-width: 560px) {

    .public-quote-button {
        display: none;
    }

    .public-mobile-toggle {
        margin-left: auto;
    }

    .public-footer-grid {
        grid-template-columns:
            1fr;
    }

    .public-footer-brand-column,
    .public-footer-newsletter {
        grid-column: auto;
    }

    .public-newsletter-form {
        max-width: 420px;
    }
}


/* ==========================================================
   6. Very Small Mobile
   <= 420px
========================================================== */

@media (max-width: 420px) {

    .public-container {
        width: calc(100% - 20px);
    }

    .public-topbar-inner {
        gap: 4px;
    }

    .public-time-item {
        max-width: calc(100vw - 95px);
    }

    .public-brand-main {
        font-size: 21px;
    }

    .public-mobile-toggle {
        width: 37px;
        height: 35px;
    }

    .homepage-development-card {
        padding: 22px 18px;
    }

    .homepage-development-card h1 {
        font-size: 25px;
    }

    .public-mobile-navigation {
        width: calc(100vw - 14px);
    }
}


/* ==========================================================
   7. Landscape Mobile
========================================================== */

@media (
    max-width: 900px
)
and (
    orientation: landscape
)
and (
    max-height: 520px
) {

    .public-mobile-navigation {
        width: min(
            420px,
            65vw
        );
    }

    .public-mobile-navigation-inner {
        padding-block: 14px;
    }
}


/* ==========================================================
   8. Reduced Motion
========================================================== */

@media (
    prefers-reduced-motion:
    reduce
) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* ==========================================================
   9. Touch Device Improvements
========================================================== */

@media (
    hover: none
)
and (
    pointer: coarse
) {

    .public-nav-link,
    .public-dropdown-menu a,
    .public-footer-column li a {
        -webkit-tap-highlight-color: transparent;
    }

    .public-mobile-menu > a,
    .public-mobile-submenu-toggle,
    .public-mobile-account,
    .public-mobile-register,
    .public-mobile-quote {
        min-height: 46px;
    }
}


/* ==========================================================
   10. Print Baseline
========================================================== */

@media print {

    .public-topbar,
    .public-header,
    .public-mobile-navigation,
    .public-mobile-overlay,
    .public-footer {
        display: none !important;
    }

    body {
        background: #ffffff;
        color: #000000;
    }

    .public-main {
        width: 100%;
    }
}

/* ==========================================================
   11. Homepage Marketplace Responsive
   Phase 18.3
========================================================== */


/* ==========================================================
   11.1 Small Laptop
   <= 1220px
========================================================== */

@media (max-width: 1220px) {

    .public-home-marketplace {
        grid-template-columns:
            minmax(190px, 0.72fr)
            minmax(0, 2.45fr)
            minmax(215px, 0.84fr);
        gap: 14px;
    }

    .public-sidebar-heading {
        padding-inline: 12px;
    }

    .public-sidebar-list a {
        padding-inline: 11px;
    }

    .public-home-promo-placeholder,
    .public-home-promo-placeholder-content {
        min-height: 360px;
    }

    .public-home-promo-placeholder-content {
        padding: 34px;
    }
}


/* ==========================================================
   11.2 Tablet / Narrow Desktop
   <= 1050px
========================================================== */

@media (max-width: 1050px) {

    /*
     * Semi Master Plan:
     *
     * Desktop sidebars should not remain in full desktop
     * form on tablet/mobile.
     */

    .public-home-marketplace {
        grid-template-columns:
            minmax(0, 1fr);
        gap: 16px;
    }

    .public-home-column-left,
    .public-home-column-right {
        display: none;
    }

    .public-home-column-center {
        width: 100%;
    }

    .public-home-promo-placeholder,
    .public-home-promo-placeholder-content {
        min-height: 340px;
    }

    .public-home-promo-placeholder-content {
        max-width: 680px;
        padding: 34px;
    }
}


/* ==========================================================
   11.3 Tablet
   <= 820px
========================================================== */

@media (max-width: 820px) {

    .public-home-intro {
        padding: 16px 0 22px;
    }

    .public-home-promo-placeholder,
    .public-home-promo-placeholder-content {
        min-height: 300px;
    }

    .public-home-promo-placeholder-content {
        padding: 28px;
    }

    .public-home-promo-placeholder h1 {
        font-size: clamp(
            28px,
            6vw,
            40px
        );
    }

    .public-home-promo-placeholder p {
        font-size: 12px;
    }
}


/* ==========================================================
   11.4 Mobile
   <= 640px
========================================================== */

@media (max-width: 640px) {

    .public-home-intro {
        padding: 12px 0 18px;
    }

    .public-home-promo-placeholder {
        border-radius: 9px;
    }

    .public-home-promo-placeholder,
    .public-home-promo-placeholder-content {
        min-height: 275px;
    }

    .public-home-promo-placeholder-content {
        padding: 24px 20px;
    }

    .public-home-promo-placeholder h1 {
        margin-bottom: 11px;
        font-size: clamp(
            26px,
            8vw,
            34px
        );
        letter-spacing: -1px;
    }

    .public-home-promo-placeholder p {
        font-size: 12px;
        line-height: 1.6;
    }

    .public-home-promo-actions {
        margin-top: 18px;
        gap: 8px;
    }

    .public-home-primary-action,
    .public-home-secondary-action {
        min-height: 38px;
        padding-inline: 13px;
        font-size: 10px;
    }
}


/* ==========================================================
   11.5 Small Mobile
   <= 420px
========================================================== */

@media (max-width: 420px) {

    .public-home-promo-placeholder,
    .public-home-promo-placeholder-content {
        min-height: 255px;
    }

    .public-home-promo-placeholder-content {
        padding: 21px 17px;
    }

    .public-home-promo-placeholder h1 {
        font-size: 25px;
    }

    .public-home-promo-actions {
        width: 100%;
    }

    .public-home-primary-action,
    .public-home-secondary-action {
        flex: 1 1 140px;
    }
}

/* ==========================================================
   12. Phase 18.4 — Responsive Promotional Banner System
========================================================== */


/* ==========================================================
   12.1 Desktop
   > 1050px
========================================================== */

@media (min-width: 1051px) {

    /*
     * Desktop:
     *
     * - Left sidebar visible
     * - Static hero composition visible
     * - Right sidebar visible
     * - Unified mobile carousel hidden
     */

    .public-home-marketplace {
        display: grid;
    }

    .public-home-column-left,
    .public-home-column-center,
    .public-home-column-right {
        display: block;
    }

    .public-mobile-promo-carousel,
    .public-mobile-promo-fallback {
        display: none !important;
    }
}


/* ==========================================================
   12.2 Tablet / Narrow Layout
   <= 1050px
========================================================== */

@media (max-width: 1050px) {

    /*
     * IMPORTANT:
     *
     * Desktop sidebars are not rendered in desktop form
     * on tablet/mobile.
     *
     * Their promotional banners are now supplied through
     * the unified mobile/tablet carousel.
     *
     * Browse/Search functionality itself is NOT removed.
     * It will be reorganized in Phase 18.5.
     */

    .public-home-marketplace {
        display: block;
    }

    .public-home-column-left,
    .public-home-column-right {
        display: none;
    }

    /*
     * Desktop center hero composition is hidden because
     * the unified promotional carousel replaces it here.
     */

    .public-home-column-center {
        display: none;
    }

    /*
     * Unified promotional experience.
     */

    .public-mobile-promo-carousel {
        display: block;
    }

    .public-mobile-promo-fallback {
        display: flex;
    }

    .public-home-intro {
        padding-top: 16px;
    }

    .public-mobile-promo-card,
    .public-mobile-promo-content {
        min-height: 310px;
    }

    .public-mobile-promo-content {
        width: min(
            70%,
            540px
        );
        padding: 30px;
    }

    .public-mobile-promo-content strong {
        font-size: clamp(
            28px,
            5vw,
            38px
        );
    }

    .public-mobile-promo-content small {
        font-size: 12px;
    }
}


/* ==========================================================
   12.3 Tablet
   <= 820px
========================================================== */

@media (max-width: 820px) {

    .public-mobile-promo-viewport {
        border-radius: 10px;
    }

    .public-mobile-promo-card,
    .public-mobile-promo-content {
        min-height: 290px;
    }

    .public-mobile-promo-content {
        width: min(
            76%,
            500px
        );
        padding: 27px;
    }

    .public-mobile-promo-content strong {
        font-size: clamp(
            26px,
            6vw,
            34px
        );
    }

    .public-mobile-promo-content small {
        max-width: 400px;
        font-size: 11px;
    }

    .public-mobile-promo-arrow {
        width: 34px;
        height: 34px;
        font-size: 23px;
    }

    .public-mobile-promo-prev {
        left: 8px;
    }

    .public-mobile-promo-next {
        right: 8px;
    }
}


/* ==========================================================
   12.4 Mobile
   <= 640px
========================================================== */

@media (max-width: 640px) {

    .public-home-intro {
        padding:
            11px
            0
            17px;
    }

    .public-mobile-promo-carousel {
        overflow: visible;
    }

    .public-mobile-promo-viewport {
        overflow: hidden;
        border-radius: 9px;
        box-shadow: var(--mst-shadow-sm);
    }

    .public-mobile-promo-card,
    .public-mobile-promo-content {
        min-height: 245px;
    }

    /*
     * Mobile image composition:
     *
     * Full card remains visual.
     * CMS does not require separate mobile artwork.
     */

    .public-mobile-promo-card img {
        object-position: center center;
    }

    .public-mobile-promo-shade {
        background:
            linear-gradient(
                90deg,
                rgba(3, 17, 36, 0.86) 0%,
                rgba(3, 17, 36, 0.58) 48%,
                rgba(3, 17, 36, 0.14) 100%
            );
    }

    .public-mobile-promo-content {
        width: 78%;
        padding:
            22px
            20px
            31px;
    }

    .public-mobile-promo-content strong {
        font-size: clamp(
            23px,
            7vw,
            30px
        );
        line-height: 1.05;
        letter-spacing: -0.6px;
    }

    .public-mobile-promo-content small {
        margin-top: 7px;
        font-size: 10px;
        line-height: 1.45;
    }

    .public-mobile-promo-cta {
        min-height: 32px;
        margin-top: 11px;
        padding-inline: 11px;
        font-size: 9px;
    }

    /*
     * Mobile mockup prefers a clean visual.
     * Arrows remain available but less dominant.
     */

    .public-mobile-promo-arrow {
        width: 31px;
        height: 31px;
        border-color:
            rgba(
                255,
                255,
                255,
                0.24
            );
        background:
            rgba(
                3,
                17,
                36,
                0.48
            );
        font-size: 21px;
    }

    .public-mobile-promo-prev {
        left: 6px;
    }

    .public-mobile-promo-next {
        right: 6px;
    }

    .public-mobile-promo-dots {
        bottom: 9px;
        gap: 5px;
    }

    .public-mobile-promo-dot {
        width: 6px;
        height: 6px;
    }

    .public-mobile-promo-dot.is-active {
        width: 17px;
    }

    .public-mobile-promo-fallback {
        min-height: 210px;
        padding: 21px;
    }
}


/* ==========================================================
   12.5 Small Mobile
   <= 480px
========================================================== */

@media (max-width: 480px) {

    .public-mobile-promo-card,
    .public-mobile-promo-content {
        min-height: 220px;
    }

    .public-mobile-promo-content {
        width: 82%;
        padding:
            19px
            17px
            30px;
    }

    .public-mobile-promo-content strong {
        font-size: clamp(
            21px,
            7.3vw,
            27px
        );
    }

    .public-mobile-promo-content small {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .public-mobile-promo-arrow {
        width: 29px;
        height: 29px;
        font-size: 20px;
    }

    .public-mobile-promo-fallback {
        min-height: 190px;
    }

    .public-mobile-promo-fallback strong {
        font-size: 22px;
    }
}


/* ==========================================================
   12.6 Very Small Mobile
   <= 380px
========================================================== */

@media (max-width: 380px) {

    .public-mobile-promo-card,
    .public-mobile-promo-content {
        min-height: 205px;
    }

    .public-mobile-promo-content {
        width: 85%;
        padding:
            17px
            15px
            28px;
    }

    .public-mobile-promo-content strong {
        font-size: 21px;
    }

    .public-mobile-promo-content small {
        font-size: 9px;
    }

    /*
     * Very small screen:
     * arrows can obscure banner content.
     * Dots + swipe remain available.
     */

    .public-mobile-promo-arrow {
        display: none;
    }
}


/* ==========================================================
   12.7 Touch Devices
========================================================== */

@media (
    hover: none
)
and (
    pointer: coarse
) {

    .public-mobile-promo-carousel {
        touch-action:
            pan-y;
    }

    .public-mobile-promo-card {
        -webkit-tap-highlight-color:
            transparent;
    }

    .public-mobile-promo-track {
        cursor: grab;
    }

    .public-mobile-promo-track.is-dragging {
        cursor: grabbing;
    }
}


/* ==========================================================
   12.8 Reduced Motion
========================================================== */

@media (
    prefers-reduced-motion:
    reduce
) {

    .public-mobile-promo-track {
        transition: none;
    }

    .public-desktop-banner img {
        transition: none;
    }
}

/* ==========================================================
   13. Phase 18.5 — Search Placement Responsive
========================================================== */

@media (min-width: 1051px) {

    .public-home-center-search {
        display: block;
    }

    .public-home-mobile-search {
        display: none;
    }
}

@media (max-width: 1050px) {

    /*
     * Desktop center column is intentionally hidden because
     * its hero becomes the unified mobile carousel.
     *
     * Therefore mobile search has its own rendering position.
     */

    .public-home-center-search {
        display: none;
    }

    .public-home-mobile-search {
        display: block;
        margin-top: 12px;
    }

    .public-search-desktop {
        display: none;
    }

    .public-search-mobile {
        display: block;
    }
}

/* ==========================================================
   14. Phase 18.6 — Compact Business Statistics Responsive
========================================================== */


/* ==========================================================
   14.1 Desktop Compression
   1051px–1220px
========================================================== */

@media (
    min-width: 1051px
)
and (
    max-width: 1220px
) {

    .public-business-statistics-bar {
        padding-inline: 6px;
    }

    .public-business-statistic {
        padding-inline: 5px;
        gap: 5px;
    }

    .public-business-statistic-icon {
        width: 25px;
        height: 25px;
        flex-basis: 25px;
        font-size: 11px;
    }

    .public-business-statistic-copy strong {
        font-size: 12px;
    }

    .public-business-statistic-copy small {
        font-size: 6px;
    }
}


/* ==========================================================
   14.2 Tablet / Mobile Architecture
   <= 1050px
========================================================== */

@media (max-width: 1050px) {

    /*
     * Desktop center column is hidden at this breakpoint.
     * Therefore the desktop statistics instance disappears
     * with it and the mobile instance takes over.
     */

    .public-home-mobile-statistics {
        display: block;
        margin-top: 11px;
    }

    .public-business-statistics-mobile
    .public-business-statistics-bar {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
        padding: 8px;
    }

    .public-business-statistics-mobile
    .public-business-statistic:nth-child(4) {
        border-left: 0;
    }

    .public-business-statistics-mobile
    .public-business-statistic:nth-child(n + 4) {
        border-top:
            1px solid
            rgba(
                255,
                255,
                255,
                0.12
            );
    }
}


/* ==========================================================
   14.3 Mobile
   <= 640px
========================================================== */

@media (max-width: 640px) {

    .public-home-mobile-statistics {
        margin-top: 10px;
    }

    .public-business-statistics-mobile
    .public-business-statistics-bar {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
        padding: 7px;
        border-radius: 8px;
    }

    .public-business-statistics-mobile
    .public-business-statistic {
        min-height: 58px;
        padding: 6px 8px;
        gap: 7px;
    }

    /*
     * Reset tablet separators.
     */

    .public-business-statistics-mobile
    .public-business-statistic {
        border-top: 0;
        border-left: 0;
    }

    /*
     * Two-column vertical separator.
     */

    .public-business-statistics-mobile
    .public-business-statistic:nth-child(even) {
        border-left:
            1px solid
            rgba(
                255,
                255,
                255,
                0.12
            );
    }

    /*
     * Rows after the first receive horizontal separators.
     */

    .public-business-statistics-mobile
    .public-business-statistic:nth-child(n + 3) {
        border-top:
            1px solid
            rgba(
                255,
                255,
                255,
                0.12
            );
    }

    .public-business-statistics-mobile
    .public-business-statistic-icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        font-size: 12px;
    }

    .public-business-statistics-mobile
    .public-business-statistic-copy strong {
        font-size: 14px;
    }

    .public-business-statistics-mobile
    .public-business-statistic-copy small {
        font-size: 7px;
    }
}


/* ==========================================================
   14.4 Very Small Mobile
   <= 380px
========================================================== */

@media (max-width: 380px) {

    .public-business-statistics-mobile
    .public-business-statistic {
        padding-inline: 6px;
        gap: 6px;
    }

    .public-business-statistics-mobile
    .public-business-statistic-icon {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
        font-size: 11px;
    }

    .public-business-statistics-mobile
    .public-business-statistic-copy strong {
        font-size: 13px;
    }

    .public-business-statistics-mobile
    .public-business-statistic-copy small {
        font-size: 6.5px;
    }
}

/* ==========================================================
   15. Phase 18.7 / 18.7A
   Featured + Commercial Vehicles Responsive
========================================================== */


/* ==========================================================
   15.1 Small Desktop
   1051px–1220px
========================================================== */

@media (
    min-width: 1051px
)
and (
    max-width: 1220px
) {

    .public-featured-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
        gap: 8px;
    }

    .public-featured-card-body {
        padding: 7px;
    }

    .public-featured-card-body h3 {
        min-height: 25px;
        font-size: 8.5px;
    }

    .public-featured-card-spec {
        font-size: 5.8px;
    }

    .public-featured-card-price strong {
        font-size: 9.5px;
    }


    /*
     * Desktop commercial block remains active.
     * Mobile commercial block must stay hidden.
     */

    .public-home-mobile-commercial {
        display: none;
    }
}


/* ==========================================================
   15.2 Tablet
   <= 1050px
========================================================== */

@media (max-width: 1050px) {

    /*
     * Desktop marketplace is replaced by the
     * dedicated tablet/mobile homepage flow.
     */

    .public-home-center-commercial {
        display: none;
    }

    .public-home-mobile-featured {
        display: block;
        margin-top: 16px;
    }

    .public-home-mobile-commercial {
        display: block;
        margin-top: 16px;
    }


    /*
     * Featured + Commercial
     * Shared tablet grid behaviour
     */

    .public-featured-vehicles-mobile
    .public-featured-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
        gap: 10px;
    }

    .public-featured-vehicles-mobile
    .public-featured-card-body {
        padding: 9px;
    }

    .public-featured-vehicles-mobile
    .public-featured-card-body h3 {
        min-height: 27px;
        font-size: 9.5px;
    }

    .public-featured-vehicles-mobile
    .public-featured-card-spec {
        font-size: 6.5px;
    }

    .public-featured-vehicles-mobile
    .public-featured-card-price strong {
        font-size: 10.5px;
    }
}


/* ==========================================================
   15.3 Mobile
   <= 640px
========================================================== */

@media (max-width: 640px) {

    .public-home-mobile-featured,
    .public-home-mobile-commercial {
        margin-top: 15px;
    }

    .public-featured-heading {
        margin-bottom: 8px;
    }

    .public-featured-heading h2 {
        font-size: 13px;
    }

    .public-featured-view-all {
        font-size: 7px;
    }


    /*
     * Featured + Commercial
     * Two cards per row
     */

    .public-featured-vehicles-mobile
    .public-featured-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
        gap: 8px;
    }

    .public-featured-vehicles-mobile
    .public-featured-card-media {
        aspect-ratio: 16 / 10;
    }

    .public-featured-vehicles-mobile
    .public-featured-card-body {
        padding: 8px;
    }

    .public-featured-vehicles-mobile
    .public-featured-card-body h3 {
        min-height: 26px;
        font-size: 9px;
    }

    .public-featured-vehicles-mobile
    .public-featured-card-specs {
        gap: 4px 6px;
    }

    .public-featured-vehicles-mobile
    .public-featured-card-spec {
        font-size: 6px;
    }

    .public-featured-vehicles-mobile
    .public-featured-year,
    .public-featured-vehicles-mobile
    .public-featured-status {
        min-height: 18px;
        padding-inline: 5px;
        font-size: 5.8px;
    }

    .public-featured-vehicles-mobile
    .public-featured-card-price strong {
        font-size: 10px;
    }

    .public-featured-vehicles-mobile
    .public-featured-card-link {
        min-height: 27px;
        font-size: 6.5px;
    }
}


/* ==========================================================
   15.4 Very Small Mobile
   <= 380px
========================================================== */

@media (max-width: 380px) {

    .public-featured-vehicles-mobile
    .public-featured-grid {
        gap: 7px;
    }

    .public-featured-vehicles-mobile
    .public-featured-card-body {
        padding: 7px;
    }

    .public-featured-vehicles-mobile
    .public-featured-card-body h3 {
        font-size: 8.5px;
    }

    .public-featured-vehicles-mobile
    .public-featured-card-spec {
        font-size: 5.7px;
    }

    .public-featured-vehicles-mobile
    .public-featured-card-price strong {
        font-size: 9.5px;
    }
}

/* ==========================================================
   16. Phase 18.9
   Browse Stock By Country Responsive
========================================================== */


/* ==========================================================
   16.1 Small Desktop
   1051px–1220px
========================================================== */

@media (
    min-width: 1051px
)
and (
    max-width: 1220px
) {

    .public-home-country-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
        gap: 5px;
    }

    .public-home-country-card {
        padding-inline: 4px;
    }

    .public-home-country-flag-wrap {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
    }

    .public-home-country-flag-symbol {
        font-size: 18px;
    }
}


/* ==========================================================
   16.2 Tablet / Mobile Architecture
   <= 1050px
========================================================== */

@media (max-width: 1050px) {

    /*
     * Desktop center column is hidden at this breakpoint.
     * Use the dedicated mobile country instance.
     */

    .public-home-center-countries {
        display: none;
    }

    .public-home-mobile-countries {
        display: block;
        width: 100%;
        margin-top: 16px;
    }

    .public-home-country-browser-mobile
    .public-home-country-grid {
        grid-template-columns:
            repeat(
                5,
                minmax(
                    105px,
                    1fr
                )
            );
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    .public-home-country-browser-mobile
    .public-home-country-card {
        min-width: 0;
    }
}


/* ==========================================================
   16.3 Mobile
   <= 640px
========================================================== */

@media (max-width: 640px) {

    .public-home-mobile-countries {
        margin-top: 15px;
    }

    .public-home-country-browser
    .public-featured-heading {
        margin-bottom: 7px;
    }

    .public-home-country-browser-mobile
    .public-home-country-grid {
        padding: 8px;
        grid-template-columns:
            repeat(
                6,
                92px
            );
        gap: 5px;
        overflow-x: auto;
        scroll-snap-type:
            x proximity;
    }

    .public-home-country-browser-mobile
    .public-home-country-card {
        padding: 5px 3px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        text-align: center;
        scroll-snap-align: start;
    }

    .public-home-country-browser-mobile
    .public-home-country-flag-wrap {
        width: 31px;
        height: 31px;
        flex-basis: 31px;
    }

    .public-home-country-browser-mobile
    .public-home-country-flag-symbol {
        font-size: 21px;
    }

    .public-home-country-browser-mobile
    .public-home-country-copy {
        width: 100%;
        align-items: center;
    }

    .public-home-country-browser-mobile
    .public-home-country-copy strong {
        width: 100%;
        font-size: 7px;
        text-align: center;
    }

    .public-home-country-browser-mobile
    .public-home-country-copy small {
        font-size: 5.5px;
        text-align: center;
    }
}


/* ==========================================================
   16.4 Very Small Mobile
   <= 380px
========================================================== */

@media (max-width: 380px) {

    .public-home-country-browser-mobile
    .public-home-country-grid {
        grid-template-columns:
            repeat(
                6,
                84px
            );
        padding-inline: 7px;
    }

    .public-home-country-browser-mobile
    .public-home-country-flag-wrap {
        width: 29px;
        height: 29px;
        flex-basis: 29px;
    }

    .public-home-country-browser-mobile
    .public-home-country-flag-symbol {
        font-size: 19px;
    }
}


/* ==========================================================
   16.5 Touch Devices
========================================================== */

@media (
    hover: none
)
and (
    pointer: coarse
) {

    .public-home-country-browser-mobile
    .public-home-country-grid {
        -webkit-overflow-scrolling: touch;
    }
}

/* ==========================================================================
   Phase 18.11
   Customer Reviews Responsive
   ========================================================================== */

@media (max-width: 991px) {

    .public-home-reviews {
        padding-left: 16px;
        padding-right: 16px;
    }

    .public-home-reviews-grid {
        grid-template-columns: repeat(
            2,
            minmax(0, 1fr)
        );
    }
}

@media (max-width: 767px) {

    .public-home-reviews {
        margin-top: 24px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .public-home-reviews .public-home-section-heading {
        margin-bottom: 14px;
    }

    .public-home-reviews .public-home-section-heading h2 {
        font-size: 21px;
    }

    .public-home-reviews-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .public-home-review-card {
        padding: 16px;
    }

    .public-home-review-text {
        font-size: 13px;
        line-height: 1.6;
    }

    .public-home-review-avatar {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
    }
}


/* ==========================================================================
   Phase 18.11 / 18.12
   Reviews + Latest News
   Desktop / Mobile Visibility
   ========================================================================== */

/* Desktop / large screens */

.public-home-center-reviews {
    display: block;
}

.public-home-mobile-reviews {
    display: none;
}

.public-home-lower-content-news {
    display: block;
}

.public-home-mobile-news {
    display: none;
}


/* Tablet + Mobile marketplace flow */

@media (max-width: 991px) {

    .public-home-center-reviews {
        display: none;
    }

    .public-home-mobile-reviews {
        display: block;
    }

    .public-home-lower-content-news {
        display: none;
    }

    .public-home-mobile-news {
        display: block;
    }
}


/* ==========================================================
   Phase 18.16A — Payment Pages Responsive
   ========================================================== */


/* ==========================================================
   Large Tablet / Small Desktop
   ========================================================== */

@media (max-width: 1100px) {

    .public-payment-container {
        width: min(
            100% - 36px,
            1040px
        );
    }

    .public-payment-content {
        padding:
            40px 0 58px;
    }

    .public-payment-card {
        padding: 30px;
    }

}


/* ==========================================================
   Tablet
   ========================================================== */

@media (max-width: 900px) {

    .public-payment-hero {
        padding:
            30px 0 34px;
    }

    .public-payment-hero h1 {
        font-size: 34px;
    }

    .public-payment-hero p {
        font-size: 15px;
    }

    .public-payment-content {
        padding:
            36px 0 52px;
    }

    .public-payment-card {
        padding: 26px;
        border-radius: 14px;
    }

    .public-payment-card-heading {
        gap: 15px;
    }

    .public-payment-icon {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .public-payment-card-heading h2 {
        font-size: 22px;
    }

    .public-payment-grid {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================
   Mobile Landscape / Small Tablet
   ========================================================== */

@media (max-width: 700px) {

    .public-payment-container {
        width: calc(100% - 28px);
    }

    .public-payment-hero {
        padding:
            25px 0 28px;
    }

    .public-payment-breadcrumb {
        gap: 6px;
        margin-bottom: 13px;
        font-size: 12px;
    }

    .public-payment-hero h1 {
        font-size: 30px;
    }

    .public-payment-hero p {
        margin-top: 9px;
        font-size: 14px;
        line-height: 1.6;
    }

    .public-payment-content {
        padding:
            28px 0 42px;
    }

    .public-payment-card {
        padding: 21px;
        border-radius: 12px;
    }

    .public-payment-card-heading {
        margin-bottom: 21px;
    }

    .public-payment-card-heading h2 {
        font-size: 20px;
    }

    .public-payment-card-heading p {
        font-size: 13px;
    }

    .public-payment-notice {
        margin-bottom: 21px;
        padding: 16px;
    }

    .public-payment-table-wrap {
        margin-bottom: 21px;
    }

    .public-payment-table {
        min-width: 560px;
    }

    .public-payment-table th,
    .public-payment-table td {
        padding: 13px 15px;
        font-size: 13px;
    }

    .public-payment-warning {
        margin-bottom: 22px;
        padding: 17px;
    }

    .public-payment-actions {
        align-items: stretch;
    }

    .public-payment-primary-button,
    .public-payment-secondary-button {
        min-height: 45px;
    }

}


/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 520px) {

    .public-payment-container {
        width: calc(100% - 22px);
    }

    .public-payment-hero {
        padding:
            22px 0 25px;
    }

    .public-payment-breadcrumb {
        margin-bottom: 11px;
        font-size: 11px;
    }

    .public-payment-hero h1 {
        font-size: 27px;
        line-height: 1.15;
    }

    .public-payment-hero p {
        font-size: 13px;
    }

    .public-payment-content {
        padding:
            22px 0 34px;
    }

    .public-payment-card {
        padding: 17px;
        border-radius: 11px;
        box-shadow:
            0 8px 24px rgba(
                18,
                38,
                63,
                0.06
            );
    }

    .public-payment-card-heading {
        display: grid;
        grid-template-columns:
            44px 1fr;
        gap: 12px;
        margin-bottom: 18px;
    }

    .public-payment-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border-radius: 11px;
        font-size: 22px;
    }

    .public-payment-card-heading h2 {
        font-size: 18px;
        line-height: 1.3;
    }

    .public-payment-card-heading p {
        margin-top: 5px;
        font-size: 12px;
        line-height: 1.6;
    }

    .public-payment-notice {
        padding: 14px;
        border-radius: 9px;
    }

    .public-payment-notice strong {
        font-size: 13px;
    }

    .public-payment-notice p {
        font-size: 12px;
    }

    .public-payment-table-wrap {
        border-radius: 10px;
    }

    .public-payment-table {
        min-width: 500px;
    }

    .public-payment-table th,
    .public-payment-table td {
        padding:
            12px 13px;
        font-size: 12px;
    }

    .public-payment-table th {
        width: 36%;
    }

    .public-payment-warning {
        padding: 15px;
        border-radius: 10px;
    }

    .public-payment-warning strong {
        font-size: 13px;
    }

    .public-payment-warning p {
        font-size: 12px;
    }

    .public-payment-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .public-payment-primary-button,
    .public-payment-secondary-button {
        width: 100%;
        min-height: 44px;
        padding:
            11px 16px;
        font-size: 13px;
    }

    .public-payment-section-title {
        font-size: 18px;
    }

    .public-payment-section-text {
        font-size: 13px;
    }

    .public-payment-highlight-box,
    .public-payment-info-box {
        padding: 16px;
    }

    .public-payment-step {
        grid-template-columns:
            40px 1fr;
        gap: 13px;
        min-height: 82px;
    }

    .public-payment-step-number {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .public-payment-step:not(:last-child)::after {
        top: 38px;
        left: 19px;
    }

    .public-payment-step-content {
        padding-bottom: 22px;
    }

    .public-payment-step-content h3 {
        font-size: 15px;
    }

    .public-payment-step-content p {
        font-size: 12px;
    }

}


/* ==========================================================
   Very Small Mobile
   ========================================================== */

@media (max-width: 380px) {

    .public-payment-container {
        width: calc(100% - 18px);
    }

    .public-payment-card {
        padding: 15px;
    }

    .public-payment-hero h1 {
        font-size: 25px;
    }

    .public-payment-card-heading {
        grid-template-columns:
            40px 1fr;
    }

    .public-payment-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        font-size: 20px;
    }

    .public-payment-table {
        min-width: 470px;
    }

}


/* ==========================================================
   Print Safety
   Useful for Bank Details page
   ========================================================== */

@media print {

    .public-payment-page {
        background: #ffffff;
    }

    .public-payment-hero {
        padding:
            20px 0;
        background: #ffffff !important;
        color: #000000;
    }

    .public-payment-hero::before {
        display: none;
    }

    .public-payment-hero h1,
    .public-payment-hero p,
    .public-payment-breadcrumb,
    .public-payment-breadcrumb a,
    .public-payment-breadcrumb span {
        color: #000000 !important;
    }

    .public-payment-content {
        padding:
            20px 0;
    }

    .public-payment-card {
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    .public-payment-actions {
        display: none;
    }

    .public-payment-table-wrap {
        overflow: visible;
    }

    .public-payment-table {
        min-width: 0;
    }

}