/*
 * Printviy Studio — phone layout corrections (Faz 4D.1)
 *
 * Every rule below is scoped to html.printviy-mobile (the vendor's phone
 * layout, up to 736px) or html.printviy-compact (its whole responsive range,
 * up to 1169px). Both classes are set by local-assets/js/mobile-viewport.js,
 * so the desktop layout and the vendor files are untouched.
 *
 * What the vendor layout does on a phone and what is corrected here:
 *
 *  1. #lumise-workspace is 100vh tall and sits under the 54px fixed top bar,
 *     so the page is one header taller than the screen. On Android 100vh is
 *     the height *without* the address bar, which makes it worse, and because
 *     the bars are position:fixed scrolling does not reveal them. Fixed by
 *     sizing the workspace with --pv-vh (the really visible height).
 *
 *  2. The bottom tab bar (.lumise-left-nav-wrp) is pinned with
 *     top:100vh + translateY(-100%) and is 1000px wide, while the list inside
 *     wraps to 90px and 685px: the tabs are cut off at the bottom and on the
 *     right. Fixed by pinning it to the real bottom and making the list one
 *     row that scrolls sideways.
 *
 *  3. The close button of the open side panel (#lumise-side-close) ends up
 *     outside the screen (left ~417px on a 375px wide phone).
 *
 *  4. The product picker (#lumise-lightbox) keeps min-width:850px and
 *     max-height:100vh from the desktop stylesheet, so it is wider and taller
 *     than the phone screen and its inner list cannot be scrolled.
 */

html.printviy-compact {
    /* Fallbacks; the real values are written by mobile-viewport.js. */
    --pv-vh: 100vh;
    --pv-top-gap: 0px;
    --pv-bottom-gap: 0px;
    --pv-head: 54px;
    --pv-nav: 56px;
    /* Room taken by the bottom tab bar; 0 while the tabs are in the side bar. */
    --pv-navspace: 0px;
    --pv-safe: env(safe-area-inset-bottom, 0px);
}

/* ---------------------------------------------------------------- 1. shell */

html.printviy-compact,
html.printviy-compact body {
    height: var(--pv-vh);
    max-height: var(--pv-vh);
    overflow: hidden;
    overscroll-behavior: none;
}

html.printviy-compact div#LumiseDesign {
    display: block;
    height: var(--pv-vh);
    max-height: var(--pv-vh);
    overflow: hidden;
}

/*
 * position: fixed is measured against the layout viewport, which does not
 * shrink while the address bar is on screen. --pv-top-gap / --pv-bottom-gap
 * (written by mobile-viewport.js) push the two bars back into the part the
 * user can actually see, so nothing is cut off while the bar slides in or out.
 */
html.printviy-compact div#LumiseDesign div#lumise-navigations {
    position: fixed;
    top: var(--pv-top-gap);
    left: 0;
    right: 0;
    width: 100%;
}

html.printviy-compact div#LumiseDesign div#lumise-workspace {
    margin-top: calc(var(--pv-head) + var(--pv-top-gap));
    height: calc(var(--pv-vh) - var(--pv-head));
    max-height: calc(var(--pv-vh) - var(--pv-head));
    min-height: 0;
    overflow: hidden;
}

/* The canvas area keeps the space between the two bars. */
html.printviy-compact div#LumiseDesign div#lumise-main {
    height: calc(var(--pv-vh) - var(--pv-head));
    max-height: calc(var(--pv-vh) - var(--pv-head));
}

/*
 * Stage thumbnails. The vendor also writes an inline top: <innerHeight>px here
 * and lifts the strip with transform: translateY(-100%), so the anchor stays
 * "top" and only its value is corrected: the bottom edge of the visible area,
 * minus the tab bar.
 */
html.printviy-compact div#LumiseDesign div#lumise-stage-nav {
    top: auto !important;
    bottom: calc(var(--pv-navspace) + var(--pv-safe) + var(--pv-bottom-gap)) !important;
    /* Only the vertical part of the vendor transform is dropped; the strip
       stays centred over the canvas. */
    transform: translateX(-50%) !important;
}

/* -------------------------------------------------------- 2. bottom tab bar */

/*
 * The vendor script writes an inline top: <window.innerHeight>px on this
 * element on every resize. On Android innerHeight is the height without the
 * address bar, so the bar lands below the screen; the inline value is the
 * reason these two declarations need !important.
 */
html.printviy-mobile div#LumiseDesign div#lumise-left > div.lumise-left-nav-wrp {
    top: auto !important;
    bottom: var(--pv-bottom-gap) !important;
    left: 0;
    right: 0;
    width: 100%;
    height: calc(var(--pv-nav) + var(--pv-safe));
    min-height: calc(var(--pv-nav) + var(--pv-safe));
    padding-bottom: var(--pv-safe);
    box-sizing: border-box;
    transform: none;
    overflow: hidden;
}

/* The vendor sets display:inline-block!important on this list. */
html.printviy-mobile div#LumiseDesign div#lumise-left > div.lumise-left-nav-wrp > ul.lumise-left-nav {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    max-width: 100%;
    height: var(--pv-nav);
    max-height: var(--pv-nav);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* The last tab must be reachable next to the home indicator. */
    padding-right: 4px;
    box-sizing: border-box;
}

html.printviy-mobile div#LumiseDesign div#lumise-left > div.lumise-left-nav-wrp > ul.lumise-left-nav::-webkit-scrollbar {
    display: none;
}

/*
 * No display is set here on purpose: the vendor hides some tabs on phones
 * (drawing, bug) with display:none and setting a display here would bring
 * them back.
 */
html.printviy-mobile div#LumiseDesign div#lumise-left > div.lumise-left-nav-wrp > ul.lumise-left-nav > li {
    float: none;
    flex: 0 0 auto;
    height: var(--pv-nav);
    /* The vendor sets min-height:70px, which would beat max-height. */
    min-height: var(--pv-nav);
    max-height: var(--pv-nav);
    padding-top: 5px;
    padding-bottom: 5px;
    box-sizing: border-box;
    overflow: hidden;
}

/* The label under the icon has to fit in the 56px row. */
html.printviy-mobile div#LumiseDesign div#lumise-left > div.lumise-left-nav-wrp > ul.lumise-left-nav > li i {
    min-height: 22px;
    font-size: 17px;
    line-height: 22px;
}

html.printviy-mobile div#LumiseDesign div#lumise-left > div.lumise-left-nav-wrp > ul.lumise-left-nav > li text,
html.printviy-mobile div#LumiseDesign div#lumise-left > div.lumise-left-nav-wrp > ul.lumise-left-nav > li span {
    font-size: 10px;
    line-height: 13px;
}

/* The open panel ends above the tab bar, not behind it. */
html.printviy-compact div#LumiseDesign div#lumise-left .lumise-tab-body-wrp {
    max-height: calc(var(--pv-vh) - var(--pv-head) - var(--pv-navspace) - var(--pv-safe));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------- 3. panel close button */

/*
 * The vendor keeps this button marked "active" even when no panel is open; it
 * was simply off screen before. It is shown only while a panel is really open
 * (:has). Where :has is not supported the button stays hidden, as it was, and
 * the panel is closed by tapping its tab again.
 */
html.printviy-compact div#LumiseDesign div#lumise-left #lumise-side-close.active {
    display: none;
}

html.printviy-compact div#LumiseDesign div#lumise-left:has(.lumise-tab-body-wrp.active) #lumise-side-close.active {
    display: inline-block;
    position: fixed;
    left: auto;
    right: 10px;
    top: auto;
    bottom: calc(var(--pv-navspace) + var(--pv-safe) + var(--pv-bottom-gap) + 10px);
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 50%;
    background: rgba(31, 36, 48, .86);
    color: #fff;
    z-index: 1000001;
}

/* ------------------------------------------------------ 4. product picker */

html.printviy-compact #lumise-lightbox {
    top: var(--pv-top-gap);
    height: var(--pv-vh);
    max-height: var(--pv-vh);
}

html.printviy-compact #lumise-lightbox #lumise-lightbox-body {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(var(--pv-vh) - var(--pv-head) - 16px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

html.printviy-compact #lumise-lightbox #lumise-lightbox-content,
html.printviy-compact #lumise-lightbox #lumise-lightbox-body.parent-scroll-mobile {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: calc(var(--pv-vh) - var(--pv-head) - 16px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: 0;
    box-sizing: border-box;
}

/* The product grid fits the narrow screen instead of a fixed desktop width. */
html.printviy-compact #lumise-lightbox #lumise-change-products-wrp,
html.printviy-compact #lumise-lightbox #lumise-change-products-wrp > div,
html.printviy-compact #lumise-lightbox ul[data-view="products"] {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/*
 * The close button. It cannot be position:fixed here: the lightbox body is
 * transformed (translate -50%), which makes it the containing block for fixed
 * children, so the button would follow the modal anyway. It is placed in the
 * corner of the modal as a round chip, above the scrolling list.
 */
html.printviy-compact #lumise-lightbox .kalb-close,
html.printviy-compact #lumise-lightbox a.kalb-close {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    left: auto !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 40px !important;
    box-sizing: border-box;
    text-align: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    color: #1f2430;
    z-index: 5;
}