/* Mobile app-like viewport and sizing guardrails for the public site. */
html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100vw;
    min-height: 100svh;
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
}

/* Ensure all containers don't cause horizontal overflow */
main, .shop-container, .products-grid, .product-card {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
}

/* Add padding to main content to account for mobile bottom nav */
@media (max-width: 767.98px) {
    main {
        padding-bottom: 80px; /* Add space for mobile bottom nav */
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
canvas,
svg,
iframe,
table {
    max-width: 100%;
}

img,
video,
canvas,
svg {
    height: auto;
}

input,
select,
textarea,
button {
    font-size: max(16px, 1rem);
}

button,
a,
[role="button"],
.btn {
    touch-action: manipulation;
}

@media (max-width: 767.98px) {
    .container,
    .container-fluid,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    .nav-container {
        max-width: 100%;
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    .row {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Auth/header mobile menu positioning fix: keep the menu inside the phone screen, below the fixed header. */
@media (max-width: 991.98px) {
    .header .category-bar {
        position: relative !important;
        z-index: 1100 !important;
    }

    .header .category-bar .container {
        max-width: 100% !important;
        padding-left: max(12px, env(safe-area-inset-left)) !important;
        padding-right: max(12px, env(safe-area-inset-right)) !important;
        justify-content: flex-end !important;
    }

    .header .mobile-menu-toggle {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }

    .header .category-menu {
        position: fixed !important;
        top: var(--mobile-menu-top, 110px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 8px max(14px, env(safe-area-inset-right)) 18px max(14px, env(safe-area-inset-left)) !important;
        background: #fffaf5 !important;
        border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
        box-shadow: 0 14px 34px rgba(44, 24, 16, 0.14) !important;
        max-height: calc(100svh - var(--mobile-menu-top, 110px)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        z-index: 1099 !important;
    }

    .header .category-menu > li > a {
        display: flex !important;
        align-items: center !important;
        min-height: 42px !important;
        padding: 8px 0 !important;
        color: #2c1810 !important;
        font-size: 14px !important;
        line-height: 1.25 !important;
    }

    .header .allcat-menu.mega-menu,
    .header .allcat-menu.mega-menu.mobile-open {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-shadow: none !important;
    }
}

@media (max-width: 575.98px) {
    .header .category-menu {
        --mobile-menu-top: 96px;
    }
}

@media (max-width: 767.98px) {
    html {
        scroll-behavior: auto;
    }
}