/**
 * CPZ Mobile UX - Mobile-Only Styles
 * FEAT-014 Phase 1: Foundation
 * Version: 0.1.0
 *
 * All rules are gated behind body.cpz-fim-active
 * This class is ONLY added by mobile-ux-init.js on mobile devices.
 * Desktop browsers will NEVER have this class → zero desktop impact.
 */

/* =========================================================================
   VIEWPORT LOCK — Prevent overscroll/rubber-band
   ========================================================================= */
body.cpz-fim-active,
body.cpz-fim-active html {
    overscroll-behavior: none;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: auto;
}

/* =========================================================================
   SAFE ZONE — 85vw canvas with centered margins
   Provides 7.5% padding on each side to prevent edge-swipe conflicts
   with browser back/forward navigation gestures.
   ========================================================================= */
body.cpz-fim-active #lumise-main {
    max-width: 85vw;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================================
   TOUCH-ACTION BINDINGS
   - Canvas container: prevent page scroll when touching canvas objects
   - Lumise handles its own touch events for object manipulation
   ========================================================================= */
body.cpz-fim-active .canvas-container,
body.cpz-fim-active .upper-canvas {
    touch-action: none;
}

/* Allow scroll in non-canvas areas (panels, menus) */
body.cpz-fim-active #lumise-navigations,
body.cpz-fim-active #lumise-top-tools {
    touch-action: auto;
}

/* =========================================================================
   PHASE 2+ PLACEHOLDER — Control tray layout (not active yet)
   ========================================================================= */
/*
body.cpz-fim-active .cpz-control-tray {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    max-height: 30vh;
    z-index: 9999;
    background: #fff;
    border-top: 1px solid #ddd;
    padding: 8px 16px;
    touch-action: auto;
}
*/

/* =========================================================================
   CART BUTTON — Option C+: Show "Add to Cart" label on mobile
   Lumise responsive.css hides all button children at ≤736px:
     li#lumise-proceed button > * { display: none }
   We re-show the <span> and <i>, and style the button as a clear CTA.
   Not gated by .cpz-fim-active — applies whenever this stylesheet loads.
   ========================================================================= */
@media (max-width: 736px) {
    /* Re-show the text label and icon inside the cart button */
    #lumise-navigations li#lumise-proceed #lumise-cart-action > span,
    #lumise-navigations li#lumise-proceed #lumise-cart-action > i {
        display: inline-block !important;
        vertical-align: middle;
    }

    /* Style the text label */
    #lumise-navigations li#lumise-proceed #lumise-cart-action > span {
        font-size: 12px;
        white-space: nowrap;
        margin-right: 6px;
    }

    /* Make it feel like a tappable button, not an icon chip */
    #lumise-navigations li#lumise-proceed #lumise-cart-action {
        padding: 10px 12px;
        min-height: 40px;
        border-radius: 10px;
    }
}

/* Extra-small phones (iPhone SE etc): tighten up to avoid overflow */
@media (max-width: 360px) {
    #lumise-navigations li#lumise-proceed #lumise-cart-action > span {
        font-size: 11px;
        margin-right: 0;
    }
    /* Hide arrow on very small widths — text alone is enough */
    #lumise-navigations li#lumise-proceed #lumise-cart-action > i {
        display: none !important;
    }
}