.elementor-8254 .elementor-element.elementor-element-79504b9{--display:flex;}.elementor-8254 .elementor-element.elementor-element-2e5debe{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-ef58766 *//* ==========================================
   LIFT SPIRE CUSTOM DESIGN STUDIO
   MOBILE ONLY
========================================== */

@media only screen and (max-width: 767px) {

    /* Main studio */
    #lift-spire-studio .ls-studio {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-height: auto !important;
        border: none !important;
    }

    /* ==============================
       PREVIEW FIRST
    ============================== */

    #lift-spire-studio .ls-preview-area {
        order: 1 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #lift-spire-studio .ls-preview-top {
        height: 55px !important;
        padding: 10px 5px !important;
        border: none !important;
    }

    #lift-spire-studio .ls-canvas {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;

        aspect-ratio: 1 / 1 !important;

        padding: 10px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        overflow: hidden !important;
    }

    #lift-spire-studio #ls-product-preview {
        width: 100% !important;
        height: 100% !important;

        max-width: 420px !important;

        position: relative !important;
    }

    #lift-spire-studio #ls-garment {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
    }


    /* ==============================
       FRONT / BACK
    ============================== */

    #lift-spire-studio .ls-sidebar {
        order: 2 !important;

        width: 100% !important;

        padding: 15px 5px 25px !important;

        border: none !important;
    }

    #lift-spire-studio .ls-section {
        margin-bottom: 18px !important;
        padding-bottom: 18px !important;
    }


    /* Product */

    #lift-spire-studio .ls-products {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
    }

    #lift-spire-studio .ls-product {
        width: 100% !important;
        height: 46px !important;

        font-size: 10px !important;
    }


    /* Colors */

    #lift-spire-studio .ls-colors {
        display: flex !important;
        gap: 12px !important;
    }


    /* Front / Back */

    #lift-spire-studio .ls-sides {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
    }

    #lift-spire-studio .ls-side {
        width: 100% !important;
        height: 48px !important;

        font-size: 10px !important;
        font-weight: 700 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }


    /* ==============================
       UPLOAD
    ============================== */

    #lift-spire-studio .ls-upload {
        width: 100% !important;
        height: 70px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex-direction: row !important;
        gap: 8px !important;
    }


    /* ==============================
       CONTROLS
    ============================== */

    #lift-spire-studio .ls-control {
        width: 100% !important;
        margin-bottom: 18px !important;
    }

    #lift-spire-studio input[type="range"] {
        width: 100% !important;
        height: 25px !important;
    }


    /* Center button */

    #lift-spire-studio .ls-secondary {
        width: 100% !important;
        height: 44px !important;
    }


    /* Save */

    #lift-spire-studio .ls-save {
        width: 100% !important;
        height: 50px !important;

        margin-top: 5px !important;
    }


    /* ==============================
       ADD TO CART
    ============================== */

    #lift-spire-studio .ls-bottom {
        order: 3 !important;

        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 10px !important;

        padding: 10px 5px 20px !important;

        border: none !important;
    }

    #lift-spire-studio .ls-add {
        width: 100% !important;
        height: 54px !important;

        font-size: 10px !important;
    }

    #lift-spire-studio .ls-tip {
        width: 100% !important;
        text-align: center !important;
        font-size: 9px !important;
    }


    /* ==============================
       HEADER
    ============================== */

    #lift-spire-studio .ls-header {
        margin-bottom: 15px !important;
    }

    #lift-spire-studio h1 {
        font-size: 27px !important;
        line-height: 1.1 !important;
    }

    #lift-spire-studio .ls-header p {
        font-size: 12px !important;
    }


    /* ==============================
       PRINT AREA
    ============================== */

    #lift-spire-studio #ls-print-area {
        left: 33% !important;
        top: 27% !important;

        width: 34% !important;
        height: 43% !important;

        overflow: hidden !important;
    }


    /* ==============================
       DESIGN TOUCH
    ============================== */

    #lift-spire-studio #ls-design {
        touch-action: none !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }

}

/* LIFT SPIRE — Full Garment Design Area */
#ls-print-area {
  position: absolute !important;

  /* Bounds dyal T-shirt f mockup */
  left: 22% !important;
  top: 29% !important;
  width: 56% !important;
  height: 54% !important;

  overflow: visible !important;
  pointer-events: none !important;
  border: none !important;
  background: transparent !important;
}

/* Uploaded artwork */
#ls-design {
  position: absolute !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  pointer-events: auto !important;
  touch-action: none !important;
  cursor: grab;
  transform-origin: center center;
}

/* While dragging */
#ls-design:active {
  cursor: grabbing;
}

/* No visible boundary around the print area */
#ls-print-area::before,
#ls-print-area::after {
  display: none !important;
}/* End custom CSS */