/*
 * PRENSHIP_M49UE5L_MOBILE_FINAL_TWO
 *
 * Dedicated phone stylesheet.
 *
 * Scope:
 * 1. Why Pay $50
 * 2. Marketplace / Live Auctions / Marketplace Plus
 *
 * No Moments carousel rules.
 * No desktop rules.
 */

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

    /*
     * =========================================================
     * WHY PAY $50
     * =========================================================
     */

    .prenship-why,
    #prenship-e4 .e4-why {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        gap: 22px !important;

        padding:
            28px 18px
            30px !important;

        overflow: hidden !important;
    }

    .prenship-lock,
    #prenship-e4 .e4-lock {
        width:
            min(250px, 72vw)
            !important;

        max-width: 100% !important;

        margin:
            0 auto !important;

        justify-self:
            center !important;
    }

    .prenship-why-copy,
    #prenship-e4 .e4-why-copy {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        text-align:
            center !important;
    }

    .prenship-why-copy h2,
    #prenship-e4 .e4-why-copy h2 {
        width: 100% !important;
        max-width: 100% !important;

        margin:
            0 auto
            14px !important;

        font-size:
            clamp(
                38px,
                11vw,
                54px
            )
            !important;

        line-height:
            .98 !important;

        white-space:
            normal !important;

        word-break:
            normal !important;

        overflow-wrap:
            normal !important;

        text-align:
            center !important;
    }

    .prenship-why-copy p,
    #prenship-e4 .e4-why-copy p {
        width: 100% !important;
        max-width: 100% !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        font-size:
            17px !important;

        line-height:
            1.45 !important;

        white-space:
            normal !important;
    }

    .prenship-gold-button,
    #prenship-e4 .e4-gold-button {
        display: flex !important;

        width:
            min(100%, 420px)
            !important;

        max-width: 100% !important;

        min-height:
            58px !important;

        margin:
            18px auto
            0 !important;

        padding:
            12px 16px
            !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        white-space:
            normal !important;

        text-align:
            center !important;
    }

    .prenship-benefit-grid,
    #prenship-e4 .e4-benefits {
        display: grid !important;

        grid-template-columns:
            minmax(0,1fr)
            !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 0 !important;
    }

    .prenship-benefit,
    #prenship-e4 .e4-benefit {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        min-height:
            175px !important;

        padding:
            28px 16px
            !important;

        text-align:
            center !important;
    }

    .prenship-benefit strong,
    #prenship-e4 .e4-benefit strong {
        display:
            block !important;

        width:
            100% !important;

        max-width:
            100% !important;
    }

    .prenship-benefit small,
    .prenship-benefit span,
    #prenship-e4 .e4-benefit span {
        max-width:
            100% !important;

        white-space:
            normal !important;
    }

    .prenship-why-footer,
    #prenship-e4 .e4-why-footer {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        padding:
            18px 8px
            4px !important;

        overflow:
            hidden !important;

        white-space:
            normal !important;

        text-align:
            center !important;

        line-height:
            1.45 !important;
    }

    /*
     * =========================================================
     * SHOP / AUCTIONS / MARKETPLACE PLUS
     * =========================================================
     */

    .prenship-commerce-v3,
    #prenship-e4 .e4-commerce {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        padding:
            28px 14px
            32px !important;

        overflow:
            hidden !important;
    }

    .prenship-commerce-title,
    #prenship-e4 .e4-commerce-title {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        text-align:
            center !important;
    }

    .prenship-commerce-title h2,
    #prenship-e4 .e4-commerce-title h2 {
        width: 100% !important;

        font-size:
            clamp(
                38px,
                10vw,
                52px
            )
            !important;

        line-height:
            1.03 !important;

        white-space:
            normal !important;

        word-break:
            normal !important;

        overflow-wrap:
            normal !important;
    }

    .prenship-commerce-title p,
    #prenship-e4 .e4-commerce-title p {
        width: 100% !important;
        max-width: 100% !important;

        font-size:
            16px !important;

        line-height:
            1.4 !important;
    }

    /*
     * Critical fix:
     * desktop 3 columns -> mobile 1 column.
     */

    .prenship-commerce-three,
    #prenship-e4 .e4-commerce-grid {
        display: grid !important;

        grid-template-columns:
            minmax(0,1fr)
            !important;

        grid-auto-flow:
            row !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        gap:
            20px !important;

        align-items:
            stretch !important;
    }

    .prenship-commerce-card-v3,
    #prenship-e4 .e4-commerce-card {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;

        padding:
            26px 18px
            !important;

        overflow:
            hidden !important;
    }

    .prenship-commerce-card-v3 > h3,
    #prenship-e4 .e4-commerce-card > h3 {
        width: 100% !important;
        max-width: 100% !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        font-size:
            clamp(
                34px,
                10vw,
                48px
            )
            !important;

        line-height:
            1.05 !important;

        text-align:
            center !important;

        white-space:
            normal !important;

        word-break:
            normal !important;

        overflow-wrap:
            normal !important;
    }

    .prenship-commerce-subtitle,
    #prenship-e4 .e4-commerce-sub {
        width: 100% !important;

        max-width:
            320px !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        font-size:
            18px !important;

        line-height:
            1.3 !important;

        text-align:
            center !important;
    }

    /*
     * Marketplace action icons.
     */

    .prenship-market-icons,
    #prenship-e4 .e4-market-actions {
        display: grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            )
            !important;

        width: 100% !important;
        max-width: 100% !important;

        gap:
            18px 10px !important;

        margin:
            24px auto !important;
    }

    .prenship-market-icon,
    #prenship-e4 .e4-market-action {
        width: 100% !important;
        min-width: 0 !important;

        text-align:
            center !important;
    }

    /*
     * Marketplace product display.
     */

    .prenship-product-stage,
    #prenship-e4 .e4-product-stage {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        overflow:
            hidden !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }

    /*
     * Auction.
     */

    .prenship-auction-box,
    .prenship-auction-product,
    #prenship-e4 .e4-auction-box,
    #prenship-e4 .e4-auction-offline,
    #prenship-e4 .e4-auction-product {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }

    .prenship-auction-prices,
    #prenship-e4 .e4-auction-prices {
        display: grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            )
            !important;

        width: 100% !important;
        max-width: 100% !important;
    }

    /*
     * Live Selling.
     */

    .prenship-live-v3-shell,
    #prenship-e4 .e4-live-layout {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        overflow:
            hidden !important;
    }

    .prenship-live-v3-frame,
    #prenship-e4 .e4-live-frame {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height:
            420px !important;

        min-width:
            0 !important;

        border:
            0 !important;
    }

    /*
     * Bottom card buttons.
     */

    .prenship-commerce-button,
    #prenship-e4 .e4-commerce-cta {
        display: flex !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height:
            54px !important;

        margin-top:
            22px !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        white-space:
            normal !important;

        text-align:
            center !important;
    }
}


/*
 * Narrow phones.
 */

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

    .prenship-why,
    #prenship-e4 .e4-why {
        padding-left:
            14px !important;

        padding-right:
            14px !important;
    }

    .prenship-commerce-v3,
    #prenship-e4 .e4-commerce {
        padding-left:
            10px !important;

        padding-right:
            10px !important;
    }

    .prenship-commerce-card-v3,
    #prenship-e4 .e4-commerce-card {
        padding:
            24px 14px
            !important;
    }

    .prenship-live-v3-frame,
    #prenship-e4 .e4-live-frame {
        height:
            380px !important;
    }
}
