/* =========================================================
DRCLEAR - OceanWP Sticky Add To Cart
Mobile one-row layout fix
Quantity + Button on same row
COLOR VERSION ONLY
========================================================= */

@media (max-width: 767px) {

    /* =====================================================
    Sticky bar overall background + shadow
    ===================================================== */
    .owp-floating-bar,
    .owp-floating-bar.show,
    .owp-floating-bar .container,
    .owp-floating-bar .container.clr {
        height: auto !important;
        min-height: 58px !important;
        background: #f7f7f7 !important;
        box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08) !important;
        border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    }

    /* =====================================================
    Right side wrapper
    ===================================================== */
    .owp-floating-bar .right {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* =====================================================
    Force exact 2-column layout
    ===================================================== */
    .owp-floating-bar .right form.cart {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        align-items: center !important;
        column-gap: 8px !important;
        row-gap: 0 !important;

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

        float: none !important;
        clear: none !important;
        background: transparent !important;
    }

    /* =====================================================
    Quantity stays in first column
    ===================================================== */
    .owp-floating-bar .right form.cart .quantity {
        grid-column: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;

        float: none !important;
        clear: none !important;
        width: auto !important;
        min-width: 0 !important;
        background: transparent !important;
    }

    /* =====================================================
    Add to cart fills second column
    ===================================================== */
    .owp-floating-bar .right form.cart .floating_add_to_cart_button {
        grid-column: 2 !important;

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

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

        height: 40px !important;
        margin: 0 !important;
        padding: 0 12px !important;

        white-space: nowrap !important;
        line-height: 1 !important;
        font-size: 13px !important;

        float: none !important;
        clear: none !important;
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;

        /* Brand color */
        background: #4fb3c8 !important;
        color: #ffffff !important;
        border: 2px solid #4fb3c8 !important;
        box-shadow: 0 2px 8px rgba(79, 179, 200, 0.18) !important;
    }

    /* =====================================================
    Quantity sizes + dark secondary color
    ===================================================== */
    .owp-floating-bar .right form.cart .quantity .qty {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;

        background: #2f2f2f !important;
        color: #ffffff !important;
        border: none !important;
    }

    .owp-floating-bar .right form.cart .quantity .plus,
    .owp-floating-bar .right form.cart .quantity .minus {
        width: 32px !important;
        min-width: 32px !important;
        height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;

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

        background: #2f2f2f !important;
        color: #ffffff !important;
        border: none !important;
    }
}