/*
 * Mobile compatibility layer
 * Loaded after styles.css.  It intentionally overrides only small-screen
 * behavior, leaving the existing desktop design and source rules unchanged.
 */

@media (max-width: 900px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }

    .header-content {
        flex-wrap: nowrap;
        min-height: 72px;
    }

    .logo-image {
        height: clamp(48px, 12vw, 60px);
        width: auto;
    }

    .nav-toggle {
        display: inline-flex;
        flex: 0 0 48px;
    }

    /* A single, predictable drawer model replaces the overlapping originals. */
    .nav {
        display: flex !important;
        position: fixed;
        top: 72px;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-height: none;
        margin: 0;
        padding: 16px;
        overflow-y: auto;
        background: var(--bg, var(--white));
        border-radius: 0;
        box-shadow: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(100%);
        transition: transform 220ms ease, opacity 220ms ease, visibility 220ms ease;
        z-index: 1000;
    }

    .nav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
    }

    .nav-link {
        min-height: 48px;
        padding: 12px 8px;
    }

    .mega-menu-wrapper {
        display: block;
        width: 100%;
    }

    /* Never let touch devices open this menu merely because :hover is sticky. */
    .mega-menu-wrapper:hover:not(.is-open) .mega-menu {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .mega-menu,
    .mega-menu-wrapper.is-open .mega-menu {
        position: static;
        display: none;
        width: 100%;
        min-width: 0;
        max-width: none;
        max-height: none;
        margin: 0;
        padding: 8px 0 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    .mega-menu-wrapper.is-open .mega-menu {
        display: block;
    }

    .mega-menu::before {
        display: none;
    }

    .mega-menu .container {
        padding: 0;
    }

    .mega-menu-content {
        gap: 0;
    }

    .mega-menu-level {
        min-width: 0;
        padding: 0;
    }

    .mega-menu-level-2,
    .mega-menu-level-3 {
        margin: 0 0 0 12px;
        padding: 4px 0 4px 12px;
        border-left: 2px solid color-mix(in srgb, var(--primary) 25%, transparent);
    }

    .mega-menu-item {
        width: 100%;
        min-height: 48px;
        padding: 12px;
        white-space: normal;
        text-align: left;
        overflow-wrap: anywhere;
    }

    .mega-menu-item:hover {
        transform: none;
    }

    .mega-menu-product {
        padding-left: 28px;
    }

    .mega-menu-product::before {
        left: 12px;
        opacity: 1;
        transform: none;
    }

    /* Copy that needs to read as prose should not inherit desktop centering. */
    p,
    li {
        overflow-wrap: break-word;
        hyphens: none;
    }

    .product-intro,
    .feature-item p,
    .category-desc,
    .footer-legal p,
    .legal-text p {
        text-align: left;
    }

    .page-header {
        margin-top: 72px;
        padding: 48px 0;
    }

    .page-title {
        font-size: clamp(30px, 9vw, 42px);
    }

    .page-subtitle,
    .product-intro {
        font-size: clamp(16px, 4.4vw, 18px);
        line-height: 1.6;
    }

    .category-grid,
    .product-image-grid,
    .product-hero-grid,
    .product-features,
    .product-features-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .product-features .feature-item,
    .product-features-grid .feature-item,
    .category-card {
        min-width: 0;
        padding: 20px;
    }

    .products-subnav {
        justify-content: flex-start;
        flex-wrap: nowrap;
        padding: 8px;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .subnav-link {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 10px 16px;
        white-space: nowrap;
    }

    .product-table-wrapper {
        margin-right: -4px;
        margin-left: -4px;
        border-radius: 0;
    }
}

@media (max-width: 480px) {
    .container {
        padding-right: 16px;
        padding-left: 16px;
    }

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

    .feature-item p,
    .category-desc,
    .footer-legal p,
    .legal-text p {
        font-size: 15px;
        line-height: 1.65;
    }
}