/*
 * B2B mobile UX pass — 2026-10-27.
 * Loaded after portal.css, so the existing production branding stays intact.
 * This stylesheet intentionally changes only small-screen usability:
 * touch targets, scrollable navigation cues, input ergonomics and cart controls.
 */
@media (max-width: 700px) {
    body.modernstyle-pro-portal .ms-portal-nav {
        display:flex;
        max-width:100%;
        overflow-x:auto;
        overflow-y:hidden;
        flex-wrap:nowrap;
        gap:20px;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior-inline:contain;
        scrollbar-width:thin;
    }
    body.modernstyle-pro-portal .ms-portal-nav a {
        display:inline-flex;
        align-items:center;
        flex:0 0 auto;
        min-height:44px;
        box-sizing:border-box;
    }
    /* Explicit discoverability: the six-link portal menu scrolls sideways. */
    body.modernstyle-pro-portal .ms-portal-shell::after {
        content:"Плъзнете менюто наляво за още раздели →";
        display:block;
        padding:0 0 9px;
        color:#d9c4a5;
        font-size:10px;
        letter-spacing:.02em;
        pointer-events:none;
    }
    /* Keep cart actions usable by touch while letting the Hyva row wrap. */
    body.checkout-cart-index article.cart.item {
        min-width:0;
    }
    body.checkout-cart-index .item-actions {
        display:inline-flex;
        flex-wrap:wrap;
        align-items:center;
        gap:5px;
    }
    body.checkout-cart-index .item-actions button,
    body.checkout-cart-index .item-actions a {
        min-width:44px!important;
        min-height:44px!important;
        width:44px!important;
        height:44px!important;
        box-sizing:border-box!important;
        padding:9px!important;
    }
    body.checkout-cart-index input.qty {
        min-height:44px!important;
        height:44px!important;
        font-size:16px!important;
    }
    body.checkout-cart-index .cart-summary .checkout-methods-items .action.primary.checkout,
    body.checkout-cart-index .cart-summary .btn-primary,
    body.checkout-cart-index .actions-toolbar.cart.actions .btn {
        min-height:44px!important;
    }
    /* 16px is the minimum comfortable iOS field size without focus zoom. */
    body.modernstyle-pro-login-page input[type="email"],
    body.modernstyle-pro-login-page input[type="password"],
    body.modernstyle-pro-register-page input[type="text"],
    body.modernstyle-pro-register-page input[type="email"],
    body.modernstyle-pro-register-page input[type="tel"],
    body.modernstyle-pro-register-page select,
    body.modernstyle-pro-forgotpassword-page input[type="email"] {
        font-size:16px!important;
    }
}
@media (max-width: 360px) {
    body.modernstyle-pro-portal .ms-portal-nav {
        gap:16px;
    }
    body.checkout-cart-index .item-actions {
        gap:4px;
    }
}
/* Maintain keyboard focus indication for touch-enabled devices with keyboards. */
@media (hover: none) {
    body.modernstyle-pro-portal .ms-portal-nav a:focus-visible {
        outline:2px solid #d9c4a5;
        outline-offset:-2px;
    }
}

/*
 * Mobile onboarding: decorative ambient blur must remain inside the viewport.
 * Without this constraint the absolutely positioned elements enlarge the
 * document by 100px (Login/Forgot Password) or 150px (Salon Application).
 * This preserves the existing gradients rather than hiding them.
 * Validated with 15 read-only Chromium viewport checks; see PR #37.
 */
@media (max-width: 700px) {
    body.modernstyle-pro-login-page .ms-pro-login__ambient--one {
        width:min(520px,100%)!important;
        right:0!important;
    }
    body.modernstyle-pro-login-page .ms-pro-login__ambient--two {
        width:min(380px,100%)!important;
        left:0!important;
    }
    body.modernstyle-pro-register-page .ms-pro-apply__ambient--one {
        width:min(500px,100%)!important;
        right:0!important;
    }
    body.modernstyle-pro-register-page .ms-pro-apply__ambient--two {
        width:min(380px,100%)!important;
        left:0!important;
    }
    body.modernstyle-pro-register-page .ms-pro-apply__layout {
        grid-template-columns:minmax(0,1fr)!important;
    }
    body.modernstyle-pro-register-page .ms-pro-apply__form,
    body.modernstyle-pro-register-page .ms-pro-apply__aside {
        box-sizing:border-box!important;
        min-width:0!important;
        max-width:100%!important;
    }
}