/* Mobile-only responsive pass. Desktop layout is intentionally untouched. */
@media screen and (max-width: 768px) {
    html {
        overflow-x: clip;
        scroll-padding-top: 76px;
    }

    body {
        min-width: 0;
        overflow-x: hidden;
    }

    /* The desktop zoom was shrinking every mobile page and changing its layout width. */
    html body nav {
        zoom: 1 !important;
        width: 100% !important;
    }

    html body #primary,
    html body #page-shop,
    html body #page-product,
    html body #page-blog,
    html body #milin-home-content {
        zoom: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    html body .hp-footer-new {
        zoom: 1 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    #primary,
    #content,
    .site-content,
    .ast-container,
    main.site-main,
    .entry-content {
        min-width: 0;
        max-width: 100%;
    }

    .entry-content > * {
        max-width: 100%;
    }

    .entry-content iframe,
    .entry-content video {
        max-width: 100%;
    }

    /* Keep fixed purchase controls clear of the home-indicator area. */
    #page-product .product-info {
        padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #page-product .container {
        width: calc(100% - 2rem) !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #page-product .gallery-wrapper,
    #page-product .product-info {
        width: 100% !important;
        min-width: 0 !important;
    }

    #page-product .cta-row {
        bottom: 0 !important;
        box-sizing: border-box !important;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    #page-product .quote-btn .btn-label {
        min-width: 0 !important;
        font-size: 0.9rem !important;
    }

    @media screen and (max-width: 380px) {
        #page-product .cta-row {
            gap: 0.5rem !important;
            padding-right: 0.625rem !important;
            padding-left: 0.625rem !important;
        }

        #page-product .qty-pill {
            flex-basis: 112px !important;
            padding-right: 0.4rem !important;
            padding-left: 0.4rem !important;
        }

        #page-product .quote-btn {
            padding-right: 0.5rem !important;
            padding-left: 0.5rem !important;
            font-size: 0.9rem !important;
        }
    }

    #page-product .thumbnail-list {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 0.5rem !important;
        overflow-x: auto !important;
        padding: 0.1rem 0 0.35rem !important;
        scrollbar-width: none !important;
        scroll-snap-type: x proximity !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #page-product .thumbnail-list::-webkit-scrollbar {
        display: none;
    }

    #page-product .thumb {
        flex: 0 0 58px !important;
        width: 58px !important;
        scroll-snap-align: start !important;
    }

    /* Blog intro, carousel, filters, and article cards. */
    #page-blog {
        padding-top: 72px !important;
    }

    #page-blog .container {
        width: calc(100% - 2rem) !important;
    }

    #page-blog .hp-intro-block {
        align-items: flex-start !important;
        gap: 0.75rem !important;
        margin: 1rem 0 2rem !important;
    }

    #page-blog .hp-intro-left,
    #page-blog .hp-intro-right {
        width: 100% !important;
        max-width: none !important;
        text-align: left !important;
    }

    #page-blog .hp-intro-right {
        align-items: flex-start !important;
    }

    #page-blog .hp-intro-text {
        font-size: clamp(2rem, 8.5vw, 2.5rem) !important;
        line-height: 1.08 !important;
        overflow-wrap: anywhere !important;
    }

    #page-blog .hero-slider-section {
        height: min(76svh, 620px) !important;
        min-height: 480px !important;
        border-radius: 16px !important;
    }

    #page-blog .slide-content {
        top: auto !important;
        right: 1.25rem !important;
        bottom: 5rem !important;
        left: 1.25rem !important;
        width: auto !important;
        transform: none !important;
    }

    #page-blog .slide-title {
        font-size: clamp(1.65rem, 7.2vw, 2.25rem) !important;
        line-height: 1.08 !important;
        margin-bottom: 0.75rem !important;
        text-wrap: balance !important;
    }

    #page-blog .slide-desc {
        max-width: 100% !important;
        margin-bottom: 1rem !important;
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
    }

    #page-blog .slider-controls {
        right: 1rem !important;
        bottom: 0.75rem !important;
        left: 1rem !important;
    }

    #page-blog .progress-container {
        margin-right: 1rem !important;
    }

    #page-blog .nav-arrows {
        gap: 0.5rem !important;
    }

    #page-blog .blog-section {
        min-height: 0 !important;
        padding-bottom: 3rem !important;
    }

    #page-blog .blog-header-title {
        font-size: 2rem !important;
        margin-bottom: 1.25rem !important;
    }

    #page-blog .blog-categories-wrapper {
        max-width: 100% !important;
        margin-bottom: 1.5rem !important;
        touch-action: pan-x !important;
    }

    #page-blog .blog-categories {
        flex: 0 0 auto !important;
        width: max-content !important;
        max-width: none !important;
    }

    #page-blog .blog-grid {
        gap: 1rem !important;
    }

    #page-blog .blog-card-content {
        padding: 1rem !important;
    }

    /* The FAQ page adds several inline heading rules; keep its hero title compact on phones. */
    #milin-faq .mfq-hero h1 {
        font-size: clamp(2rem, 8.8vw, 2.6rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -0.04em !important;
    }

    /* Homepage sections: restore compact, readable mobile proportions. */
    #milin-home-content .hp-hero {
        height: 100svh !important;
        min-height: 600px !important;
        max-height: 900px !important;
    }

    #milin-home-content .hp-faq-title-box h2 {
        max-width: 100% !important;
        font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
        line-height: 1.12 !important;
        letter-spacing: -0.03em !important;
        overflow-wrap: anywhere !important;
        text-wrap: balance !important;
    }

    #milin-home-content .hp-text-slider-wrapper {
        right: 1.25rem !important;
        bottom: max(1.75rem, env(safe-area-inset-bottom, 0px)) !important;
        left: 1.25rem !important;
        gap: 0.5rem !important;
    }

    #milin-home-content .hp-hero-h2 {
        font-size: clamp(2rem, 8.5vw, 2.65rem) !important;
        line-height: 1.02 !important;
    }

    #milin-home-content .hp-hero-p {
        max-width: 34rem !important;
        font-size: clamp(0.9rem, 3.8vw, 1rem) !important;
        line-height: 1.45 !important;
    }

    #milin-home-content .hp-container {
        width: calc(100% - 2rem) !important;
        max-width: 100% !important;
    }

    #milin-home-content .hp-layer-white,
    #milin-home-content .hp-layer-gray,
    #milin-home-content .hp-layer-flat-bottom {
        padding: 3.5rem 0 2rem !important;
        border-radius: 28px 28px 0 0 !important;
    }

    #milin-home-content .hp-intro-block {
        gap: 1rem !important;
        margin: 0 0 2.5rem !important;
        padding: 0 !important;
    }

    #milin-home-content .hp-intro-text {
        font-size: clamp(1.8rem, 7.5vw, 2.35rem) !important;
        line-height: 1.12 !important;
    }

    #milin-home-content .hp-intro-desc {
        font-size: 1rem !important;
        line-height: 1.55 !important;
    }

    #milin-home-content .hp-section-title {
        margin-bottom: 1.5rem !important;
    }

    #milin-home-content .hp-section-title h2 {
        font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
        line-height: 1.12 !important;
        margin-bottom: 0.75rem !important;
    }

    #milin-home-content .hp-section-title p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    #milin-home-content .hp-3d-gallery {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
        height: auto !important;
        margin: 0 auto 2rem !important;
        padding: 0 !important;
        perspective: none !important;
    }

    #milin-home-content .hp-3d-col {
        display: contents !important;
        width: auto !important;
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    #milin-home-content .hp-3d-card {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        margin: 0 !important;
        transform: none !important;
        border-radius: 12px !important;
    }

    #milin-home-content .hp-3d-card .shutter-mask {
        display: none !important;
    }

    #milin-home-content .hp-3d-card .hp-3d-name {
        padding: 1.5rem 0.65rem 0.65rem !important;
        font-size: 0.8rem !important;
        line-height: 1.25 !important;
    }

    #milin-home-content .hp-cyclic-wrap {
        gap: 1.5rem !important;
    }

    #milin-home-content .hp-cyclic-left-wrap {
        box-sizing: border-box !important;
        width: 100% !important;
        padding: 0 !important;
    }

    #milin-home-content .hp-cyclic-left {
        height: 350px !important;
    }

    #milin-home-content .hp-cyclic-img-box {
        height: 320px !important;
        border-radius: 16px !important;
    }

    #milin-home-content .hp-us-gray {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 1rem !important;
        width: 100% !important;
        padding: 0 !important;
    }

    #milin-home-content .hp-us-gray .hp-us-box {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 1rem !important;
        gap: 0.875rem !important;
    }

    #milin-home-content .hp-us-gray .hp-us-icon {
        flex: 0 0 64px !important;
        width: 64px !important;
        height: 64px !important;
    }

    #milin-home-content .hp-us-gray .hp-us-text {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    #milin-home-content .hp-us-gray .hp-us-text h4,
    #milin-home-content .hp-us-gray .hp-us-text p {
        overflow-wrap: anywhere;
    }

    #milin-home-content .hp-custom-wrap {
        width: 100% !important;
        max-width: 100% !important;
        gap: 1.5rem !important;
        margin: 2rem 0 3rem !important;
        padding: 1rem 0 0 !important;
    }

    #milin-home-content .hp-custom-title {
        font-size: clamp(2rem, 9vw, 2.6rem) !important;
        line-height: 1.08 !important;
    }

    #milin-home-content .hp-custom-right {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #milin-home-content .hp-laptop {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        transform: none !important;
    }

    #milin-home-content .hp-layer-dark {
        border-radius: 24px !important;
    }

    #milin-home-content .hp-factory-stats {
        width: calc(100% - 2rem) !important;
        max-width: none !important;
        gap: 0.75rem !important;
    }

    #milin-home-content .hp-stat {
        min-width: 0 !important;
    }

    #milin-home-content .hp-stat h4 {
        font-size: 1rem !important;
    }

    #milin-home-content .hp-stat p {
        font-size: 0.75rem !important;
        line-height: 1.35 !important;
    }

    #milin-home-content .hp-case-block {
        margin-bottom: 3rem !important;
    }

    #milin-home-content .hp-case-top-block {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
        margin-bottom: 1.5rem !important;
    }

    #milin-home-content .hp-case-intro {
        flex-direction: column !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    #milin-home-content .hp-case-intro .hp-intro-left,
    #milin-home-content .hp-case-intro .hp-intro-right,
    #milin-home-content .hp-case-logos-wrap {
        width: 100% !important;
    }

    #milin-home-content .hp-case-intro .hp-intro-right {
        display: block !important;
        text-align: left !important;
    }

    #milin-home-content .hp-case-intro .hp-intro-text {
        font-size: clamp(1.8rem, 8vw, 2.35rem) !important;
    }

    #milin-home-content .hp-card-track {
        gap: 1rem !important;
    }

    #milin-home-content .hp-card-item.hp-case-article-card {
        flex: 0 0 min(82vw, 400px) !important;
        width: min(82vw, 400px) !important;
        height: min(60vw, 280px) !important;
    }

    /* The footer wordmark is decorative; keep it within a phone-sized footer. */
    .hp-footer-giant-text {
        width: 100% !important;
        gap: 0.15em !important;
        font-size: clamp(2.5rem, 13vw, 3.5rem) !important;
        letter-spacing: -0.05em !important;
    }
}