/* Quantity stepper extras. */

.quantity.cf-quantity-stepper{
    display:inline-block;
    width:auto;
    margin:0;
}

.quantity.cf-quantity-stepper .cf-qty-control{
    display:grid;
    grid-template-columns:40px 34px 40px;
    align-items:center;
    justify-items:center;
    gap:4px;

    width:max-content;
    min-height:48px;
    box-sizing:border-box;

    padding:5px;

    border-radius:999px;
    background:
        linear-gradient(
            180deg,
            var(--e-global-color-388e930) 0%,
            var(--e-global-color-secondary) 100%
        );
    border:2px solid rgb(255 255 255);

    box-shadow:0 4px 5px rgba(0,0,0,0.2);
}

.quantity.cf-quantity-stepper .qty{
    width:34px !important;
    min-width:34px !important;
    height:40px !important;

    padding:0 !important;
    margin:0 !important;

    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    outline:0 !important;

    color:var(--e-global-color-primary) !important;
    font-size:17px !important;
    font-weight:500 !important;
    line-height:40px !important;
    text-align:center !important;

    appearance:textfield;
    -moz-appearance:textfield;
}

.quantity.cf-quantity-stepper .qty::-webkit-outer-spin-button,
.quantity.cf-quantity-stepper .qty::-webkit-inner-spin-button{
    margin:0;
    appearance:none;
    -webkit-appearance:none;
}

.cf-qty-button{
    width:40px;
    height:40px;
    min-width:40px;

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

    padding:0 !important;

    border:0;
    border-radius:50%;

    background:#F3F4EF !important;
    color:var(--e-global-color-primary) !important;

    font-size:0;
    font-weight:500;
    line-height:1;

    cursor:pointer;

    margin:0 !important;
    margin-inline-start:0 !important;
    margin-block-start:0 !important;

    box-shadow:0 2px 6px rgba(0,0,0,0.3);
}

.cf-qty-button::before{
    display:block;

    color:inherit;

    font-size:20px;
    font-weight:500;
    line-height:1;

    transform:none;
}

.cf-qty-button--minus::before{
    content:"-";
}

.cf-qty-button--plus::before{
    content:"+";
}

.quantity.cf-quantity-stepper .cf-qty-button:hover,
.quantity.cf-quantity-stepper .cf-qty-button:focus,
.quantity.cf-quantity-stepper .cf-qty-button:focus-visible{
    background:#F3F4EF !important;
    background-color:#F3F4EF !important;
    color:var(--e-global-color-primary) !important;
    text-decoration:none !important;
    outline:0 !important;
    box-shadow:0 2px 6px rgba(0,0,0,0.3);
}

.cf-qty-button:active{
    transform:scale(0.92);
}

.cf-qty-button:disabled{
    opacity:.42;
    cursor:not-allowed;
    box-shadow:none;
}