/* Final mobile application layout. Loaded after the legacy component styles. */
@media (max-width: 767px) {
    html {
        width: 100%;
        min-height: 100%;
        overflow-x: hidden;
        background: #f6f7f9;
    }

    body.storefront-app {
        width: 100%;
        min-width: 0;
        min-height: 100%;
        overflow-x: clip !important;
        background: #fff;
        color: #202838;
        font-size: 14px;
        line-height: 1.5;
        overscroll-behavior-y: contain;
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
    }

    body.storefront-app *,
    body.storefront-app *::before,
    body.storefront-app *::after {
        box-sizing: border-box;
    }

    body.storefront-app img,
    body.storefront-app iframe,
    body.storefront-app video {
        max-width: 100%;
    }

    body.storefront-app .container {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding-right: 14px !important;
        padding-left: 14px !important;
    }

    body.storefront-app .row {
        margin-right: -7px;
        margin-left: -7px;
    }

    body.storefront-app .row > [class*="col-"] {
        min-width: 0;
        padding-right: 7px;
        padding-left: 7px;
    }

    body.storefront-app .section-white,
    body.storefront-app .section-gray {
        padding-top: 28px;
        padding-bottom: 28px;
    }

    body.storefront-app h1 { font-size: 28px; line-height: 1.2; }
    body.storefront-app h2 { font-size: 23px; line-height: 1.25; }
    body.storefront-app h3 { font-size: 18px; line-height: 1.3; }
    body.storefront-app h4 { font-size: 16px; line-height: 1.35; }

    body.storefront-app .component-topbar {
        display: none !important;
    }

    body.storefront-app .component-navbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 1060 !important;
        width: 100% !important;
        min-height: 86px !important;
        margin: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #e8ebef !important;
        background: var(--menu-bg, #fff) !important;
        box-shadow: 0 3px 14px rgba(15, 15, 26, .08) !important;
    }

    body.storefront-app .component-navbar .container {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    body.storefront-app .component-navbar .navbar-header {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 86px !important;
        height: 86px !important;
        margin: 0 !important;
        gap: 10px !important;
        padding: 6px 0 !important;
    }

    body.storefront-app .component-navbar .navbar-brand {
        min-width: 0 !important;
        height: 74px !important;
        min-height: 74px !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    body.storefront-app .component-navbar .navbar-brand .component-navbar-logo {
        flex: 0 1 auto !important;
        width: clamp(140px, 30vw, 160px) !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 70px !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-right: 0 !important;
        object-fit: contain !important;
        object-position: left center !important;
    }

    body.storefront-app .component-navbar.component-navbar-logo-only .navbar-brand {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
    }

    body.storefront-app .component-navbar.component-navbar-logo-only .navbar-brand .component-navbar-logo {
        flex: 0 1 auto !important;
        width: clamp(140px, 30vw, 160px) !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 70px !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-right: 0 !important;
    }

    body.storefront-app .component-navbar .component-navbar-name {
        min-width: 0 !important;
        max-width: none !important;
        overflow: hidden !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.storefront-app .component-navbar-mobile-status {
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    body.storefront-app .component-navbar-mobile-status.is-open,
    body.storefront-app .component-navbar-mobile-status.is-open span {
        color: #4d6c45 !important;
    }

    body.storefront-app .component-navbar-mobile-status.is-closed,
    body.storefront-app .component-navbar-mobile-status.is-closed span {
        color: #8e1b22 !important;
    }

    body.storefront-app .component-navbar-mobile-account,
    body.storefront-app .component-navbar-mobile-cart,
    body.storefront-app .component-navbar .navbar-toggle {
        flex: 0 0 38px !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        margin: 0 !important;
    }

    body.storefront-app .component-navbar .component-navbar-mobile-cart,
    body.storefront-app .component-navbar #mobHeadCart {
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: 0 !important;
    }

    body.storefront-app .component-navbar .navbar-toggle,
    body.storefront-app .component-navbar .navbar-toggle:hover,
    body.storefront-app .component-navbar .navbar-toggle:focus {
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: 0 !important;
    }

    body.storefront-app .component-navbar .navbar-toggle .icon-bar {
        width: 25px !important;
        height: 3px !important;
        border-radius: 0 !important;
        background: var(--menu-text, #1a1a2e) !important;
    }

    body.storefront-app .component-page-title {
        padding: 25px 0 23px !important;
    }

    body.storefront-app .component-page-title h1 {
        margin: 4px 0 7px !important;
        font-size: 26px !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere;
    }

    body.storefront-app .component-page-title p,
    body.storefront-app .component-page-title .lead {
        margin-bottom: 0 !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    body.storefront-app .panel,
    body.storefront-app .service-card,
    body.storefront-app .cart-card,
    body.storefront-app .checkout-card,
    body.storefront-app .account-sidebar,
    body.storefront-app .account-content {
        max-width: 100% !important;
        border-radius: 8px !important;
    }

    body.storefront-app .panel-heading,
    body.storefront-app .panel-body {
        padding-right: 16px;
        padding-left: 16px;
    }

    body.storefront-app label {
        display: block;
        margin-bottom: 6px;
        text-align: left;
    }

    body.storefront-app .form-group,
    body.storefront-app .input-group {
        width: 100%;
        max-width: 100%;
    }

    body.storefront-app .form-control,
    body.storefront-app input,
    body.storefront-app select,
    body.storefront-app textarea {
        max-width: 100%;
        font-size: 16px !important;
    }

    body.storefront-app .form-control,
    body.storefront-app select.form-control {
        min-height: 46px;
    }

    body.storefront-app textarea.form-control {
        min-height: 110px;
        resize: vertical;
    }

    body.storefront-app .btn,
    body.storefront-app button {
        min-height: 42px;
        white-space: normal;
        touch-action: manipulation;
    }

    body.storefront-app .table-responsive {
        width: 100%;
        margin-bottom: 14px;
        overflow-x: auto;
        border: 0;
        -webkit-overflow-scrolling: touch;
    }

    body.storefront-app .menu-page {
        padding: 14px 0 28px !important;
    }

    body.storefront-app .menu-category-bar {
        /* The mobile navigation is 86px tall. Keep the sticky categories
           below it so the first row is never covered while scrolling. */
        top: 86px !important;
        width: calc(100% + 28px) !important;
        margin: 8px -14px 14px !important;
        padding: 7px 10px !important;
        border-right: 0 !important;
        border-left: 0 !important;
    }

    body.storefront-app .menu-grid {
        display: block !important;
        margin: 0 !important;
    }

    body.storefront-app .menu-item-card {
        display: block !important;
        width: 100% !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
    }

    body.storefront-app .menu-item-card-inner {
        min-height: 132px !important;
        border-radius: 8px !important;
    }

    body.storefront-app .menu-item-card .item-image {
        flex: 0 0 112px !important;
        width: 112px !important;
        max-width: 112px !important;
        min-height: 132px !important;
    }

    body.storefront-app .menu-item-card .item-image img {
        min-height: 132px !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    body.storefront-app .menu-item-card .item-content {
        min-width: 0 !important;
        padding: 12px !important;
    }

    body.storefront-app .menu-item-card .item-name,
    body.storefront-app .menu-item-card .item-price {
        font-size: 15px !important;
    }

    body.storefront-app .component-signin-page {
        padding: 20px 0 28px !important;
    }

    body.storefront-app .component-signin-card {
        margin-bottom: 0 !important;
    }

    body.storefront-app .component-signin-card .panel-heading,
    body.storefront-app .component-signin-card .panel-body {
        padding: 18px 16px !important;
    }

    body.storefront-app .account-section,
    body.storefront-app main.section-space {
        width: 100% !important;
        padding-top: 18px !important;
        padding-bottom: 28px !important;
    }

    body.storefront-app .account-sidebar,
    body.storefront-app .account-content,
    body.storefront-app .cart-column,
    body.storefront-app .checkout-column {
        float: none !important;
        width: 100% !important;
        margin-bottom: 14px !important;
    }

    body.storefront-app .account-menu {
        display: flex;
        width: 100%;
        margin: 0;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    body.storefront-app .account-menu::-webkit-scrollbar { display: none; }
    body.storefront-app .account-menu li { flex: 0 0 auto; }
    body.storefront-app .account-menu a,
    body.storefront-app .account-menu button { white-space: nowrap !important; }

    body.storefront-app .cart-item-actions,
    body.storefront-app .cart-item-right {
        min-width: 0;
        gap: 8px !important;
    }

    body.storefront-app .cart-overlay {
        top: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
    }

    body.storefront-app .cart-overlay-header {
        min-height: 62px;
        padding: max(10px, env(safe-area-inset-top, 0px)) 14px 10px !important;
    }

    body.storefront-app .cart-overlay-content {
        padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.storefront-app .mobile-cart-fab {
        display: none !important;
    }

    body.storefront-app .toast-notification {
        top: calc(10px + env(safe-area-inset-top, 0px)) !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        padding: 12px 14px !important;
        border-radius: 8px !important;
    }

    body.storefront-app .addon-modal,
    body.storefront-app .modal {
        padding: 8px !important;
    }

    body.storefront-app .addon-modal-content,
    body.storefront-app .modal-dialog {
        width: calc(100% - 16px) !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 16px) !important;
        margin: 8px auto !important;
        border-radius: 8px !important;
    }

    body.storefront-app .mobile-bottom-tabs {
        position: fixed !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 1050 !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        width: 100% !important;
        min-height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 5px 4px calc(5px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 0 !important;
        border-top: 1px solid #dfe3e8 !important;
        background: rgba(255, 255, 255, .98) !important;
        box-shadow: 0 -5px 18px rgba(15, 15, 26, .10) !important;
    }

    body.storefront-app .mobile-bottom-tabs a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        min-height: 54px !important;
        padding: 4px 2px !important;
        gap: 3px !important;
        border: 0 !important;
        border-radius: 0 !important;
        color: #687181 !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 1.1 !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    body.storefront-app .mobile-bottom-tabs a i {
        width: 24px !important;
        height: 22px !important;
        margin: 0 !important;
        font-size: 18px !important;
        line-height: 22px !important;
    }

    body.storefront-app .mobile-bottom-tabs a span {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.storefront-app .mobile-bottom-tabs a.active {
        background: transparent !important;
        color: var(--primary) !important;
    }

    body.storefront-app .site-footer {
        padding: 30px 0 !important;
    }
}

@media (display-mode: standalone) and (max-width: 767px) {
    body.storefront-app .component-navbar {
        padding-top: env(safe-area-inset-top, 0px) !important;
    }
}