/*
 * TABLE OF CONTENTS
 * -----------------------------------
 * 1. Base Wrapper & Layout
 * 2. General Input & Button Styles
 * 3. Skin Type 1 (Classic Bordered)
 * 4. Skin Type 2 (Divided Style)
 * 5. Skin Type 3 (Bold Bordered)
 * 6. Skin Type 4 (Side Stacked Buttons)
 * 7. Skin Type 5 (Compact Stacked Buttons)
 * 8. Skin Type 6 (Circle Icon Style)
 * 9. Skin Type 7 (Pill Shape Style)
 * 10. Quantity Slider Layout
 * 11. Slider Elements (Track, Thumb, Tooltip)
 * 12. Third-Party Theme Support
 */

/* =========================================
   1. Base Wrapper & Layout
   ========================================= */
.wpb-pmqb-quantity-wrapper {
    --webkit-font-smoothing: antialiased;
}
.wpb-pmqb-display-type-buttons {
    display: inline-flex;
}
.wpb-pmqb-quantity-prefix,
.wpb-pmqb-quantity-suffix {
    font-size: var(--wpb-quantity-prefix-font-size);
    font-weight: var(--wpb-quantity-prefix-font-weight);
    text-align: var(--wpb-quantity-prefix-align);
}
.wpb-pmqb-display-type-buttons:has(.wpb-pmqb-quantity-prefix),
.wpb-pmqb-display-type-buttons:has(.wpb-pmqb-quantity-suffix) {
    flex-direction: column;
}
.wpb-pmqb-quantity-prefix {
    margin: var(--wpb-quantity-prefix-margin);
}
.wpb-pmqb-quantity-suffix {
    margin: var(--wpb-quantity-suffix-margin);
}
.wpb-pmqb-display-type-buttons .wpb-pmqb-quantity {
    display: inline-flex;
    overflow: hidden;
}

/* =========================================
   2. General Input & Button Styles
   ========================================= */
.wpb-pmqb-quantity input.qty::-webkit-outer-spin-button,
.wpb-pmqb-quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.wpb-pmqb-quantity input.qty:focus {
    outline: none!important;
    border: none!important;
    box-shadow: none !important;
}
.wpb-pmqb-quantity .wpb-pmqb-qty-btn:disabled,
.wpb-pmqb-quantity .wpb-pmqb-qty-btn--disabled,
.wpb-pmqb-quantity .wpb-pmqb-qty-btn--disabled:hover {
    opacity: 0.5;
    cursor: not-allowed;
}
.wpb-pmqb-quantity .wpb-pmqb-qty-btn:focus {
    outline: none;
}
.wpb-pmqb-quantity .screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal !important;
}
.wpb-pmqb-display-type-buttons .wpb-pmqb-quantity input.qty {
    text-align: center;
    border: none;
    border-radius: 0;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: unset;
    font-size: 16px;
    min-height: unset;
    min-width: unset;
    max-width: unset;
    max-height: unset;
    -moz-appearance: textfield;
}
.wpb-pmqb-quantity .wpb-pmqb-qty-btn {
    margin: 0;
    border: none;
    border-radius: 0;
    cursor: pointer;
    color: #333;
    transition: background-color 0.2s ease;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: unset;
    min-width: unset;
    line-height: unset;
    box-shadow: unset;
}
.wpb-pmqb-quantity .wpb-pmqb-qty-btn:active {
    box-shadow: unset;
    background-image: unset;
}
.wpb-pmqb-error {
    margin-bottom: 1em;
}

/* =========================================
   3. Skin Type 1 (Classic Bordered)
   ========================================= */
.wpb-pmqb-quantity-skin-type1 .wpb-pmqb-quantity {
    border-style: solid;
    border-width: var(--wpb-quantity-border-width, 1px);
    border-color: var(--wpb-quantity-border-color, #d3d3d3);
    border-radius: var(--wpb-quantity-border-radius, 6px);
    margin: var(--wpb-quantity-margin, 0) !important;
    color: var(--wpb-quantity-input-color, #282828);
    background: var(--wpb-quantity-bg, transparent);
    align-items: stretch;
    transition: all 0.3s;
}
.wpb-pmqb-quantity-skin-type1 .wpb-pmqb-quantity:hover,
.wpb-pmqb-quantity-skin-type1 .wpb-pmqb-quantity:focus-within {
    border-color: var(--wpb-quantity-border-hover-color);
    background: var(--wpb-quantity-hover-bg, transparent);
}
.wpb-pmqb-quantity-skin-type1 .wpb-pmqb-quantity:hover input.qty,
.wpb-pmqb-quantity-skin-type1 .wpb-pmqb-quantity:focus-within input.qty {
    color: var(--wpb-quantity-input-hover-color);
}
.wpb-pmqb-quantity-skin-type1 .wpb-pmqb-quantity input.qty {
    width: var(--wpb-quantity-width, 40px);
    height: var(--wpb-quantity-height, 44px);
    font-size: var(--wpb-quantity-font-size, 16px);
    font-weight: var(--wpb-quantity-font-weight, 500);
    color: var(--wpb-quantity-input-color);
    background: transparent;
}
.wpb-pmqb-quantity-skin-type1 .wpb-pmqb-quantity .wpb-pmqb-qty-btn {
    width: var(--wpb-quantity-icon-width, 44px);
    height: var(--wpb-quantity-icon-height);
    background: var(--wpb-quantity-icon-bg, transparent);
    color: var(--wpb-quantity-icon-color, #282828);
    transition: all 0.3s;
}
.wpb-pmqb-quantity-skin-type1
    .wpb-pmqb-quantity
    .wpb-pmqb-qty-btn:hover:not(.wpb-pmqb-qty-btn--disabled),
.wpb-pmqb-quantity-skin-type1
    .wpb-pmqb-quantity
    .wpb-pmqb-qty-btn:focus:not(.wpb-pmqb-qty-btn--disabled),
.wpb-pmqb-quantity-skin-type1
    .wpb-pmqb-quantity
    .wpb-pmqb-qty-btn:active:not(.wpb-pmqb-qty-btn--disabled) {
    color: var(--wpb-quantity-icon-hover-color);
    background: var(--wpb-quantity-icon-hover-bg, transparent);
    border-color: var(--wpb-quantity-icons-border-hover-color);
}
.wpb-pmqb-quantity-skin-type1 .wpb-pmqb-quantity .wpb-pmqb-qty-btn svg {
    width: var(--wpb-quantity-icon-size, 15px);
    height: var(--wpb-quantity-icon-size, 15px);
    stroke-width: 3;
    stroke-linecap: square;
}

/* =========================================
   4. Skin Type 2 (Divided Style)
   ========================================= */
.wpb-pmqb-quantity-skin-type2 .wpb-pmqb-quantity {
    border-style: solid;
    border-width: var(--wpb-quantity-border-width, 1px);
    border-color: var(--wpb-quantity-border-color, #e1e3e4);
    border-radius: var(--wpb-quantity-border-radius, 4px);
    margin: var(--wpb-quantity-margin, 0) !important;
    background: var(--wpb-quantity-bg, transparent);
    align-items: stretch;
    transition: all 0.3s;
}
.wpb-pmqb-quantity-skin-type2 .wpb-pmqb-quantity:hover,
.wpb-pmqb-quantity-skin-type2 .wpb-pmqb-quantity:focus-within {
    border-color: var(--wpb-quantity-border-hover-color, #e1e3e4);
    background: var(--wpb-quantity-hover-bg, transparent);
}
.wpb-pmqb-quantity-skin-type2 .wpb-pmqb-quantity:hover input.qty,
.wpb-pmqb-quantity-skin-type2 .wpb-pmqb-quantity:focus-within input.qty {
    color: var(--wpb-quantity-input-hover-color);
    border-color: var(--wpb-quantity-border-hover-color, #e1e3e4) !important;
}
.wpb-pmqb-quantity-skin-type2 .wpb-pmqb-quantity input.qty {
    width: var(--wpb-quantity-width, 64px);
    height: var(--wpb-quantity-height, 42px);
    font-size: var(--wpb-quantity-font-size, 16px);
    font-weight: var(--wpb-quantity-font-weight, 500);
    color: var(--wpb-quantity-input-color);
    background: transparent;
    border-style: solid;
    border-width: 0 var(--wpb-quantity-border-width, 1px) 0
        var(--wpb-quantity-border-width, 1px);
    border-color: var(--wpb-quantity-border-color, #e1e3e4);
    transition: all 0.3s;
}
.wpb-pmqb-quantity-skin-type2 .wpb-pmqb-quantity .wpb-pmqb-qty-btn {
    width: var(--wpb-quantity-icon-width, 42px);
    height: var(--wpb-quantity-icon-height);
    background: var(--wpb-quantity-icon-bg, transparent);
    color: var(--wpb-quantity-icon-color);
    transition: all 0.3s;
}
.wpb-pmqb-quantity-skin-type2
    .wpb-pmqb-quantity
    .wpb-pmqb-qty-btn:hover:not(.wpb-pmqb-qty-btn--disabled),
.wpb-pmqb-quantity-skin-type2
    .wpb-pmqb-quantity
    .wpb-pmqb-qty-btn:focus:not(.wpb-pmqb-qty-btn--disabled),
.wpb-pmqb-quantity-skin-type2
    .wpb-pmqb-quantity
    .wpb-pmqb-qty-btn:active:not(.wpb-pmqb-qty-btn--disabled) {
    color: var(--wpb-quantity-icon-hover-color);
    background: var(--wpb-quantity-icon-hover-bg, #f5f5f5);
    border-color: var(--wpb-quantity-icons-border-hover-color);
}
.wpb-pmqb-quantity-skin-type2 .wpb-pmqb-quantity .wpb-pmqb-qty-btn svg {
    width: var(--wpb-quantity-icon-size, 15px);
    height: var(--wpb-quantity-icon-size, 15px);
    stroke-width: 3;
    stroke-linecap: square;
}

/* =========================================
   5. Skin Type 3 (Bold Bordered)
   ========================================= */
.wpb-pmqb-quantity-skin-type3 .wpb-pmqb-quantity {
    border-style: solid;
    border-width: var(--wpb-quantity-border-width, 2px);
    border-color: var(--wpb-quantity-border-color, #000);
    border-radius: var(--wpb-quantity-border-radius, 6px);
    margin: var(--wpb-quantity-margin, 0) !important;
    background: var(--wpb-quantity-bg, transparent);
    align-items: stretch;
    transition: all 0.3s;
}
.wpb-pmqb-quantity-skin-type3 .wpb-pmqb-quantity:hover,
.wpb-pmqb-quantity-skin-type3 .wpb-pmqb-quantity:focus-within {
    border-color: var(--wpb-quantity-border-hover-color);
    background: var(--wpb-quantity-hover-bg, transparent);
}
.wpb-pmqb-quantity-skin-type3 .wpb-pmqb-quantity:hover input.qty,
.wpb-pmqb-quantity-skin-type3 .wpb-pmqb-quantity:focus-within input.qty {
    color: var(--wpb-quantity-input-hover-color);
    border-color: var(--wpb-quantity-border-hover-color, #000);
}
.wpb-pmqb-quantity-skin-type3 .wpb-pmqb-quantity input.qty {
    width: var(--wpb-quantity-width, 50px);
    height: var(--wpb-quantity-height, 42px);
    font-size: var(--wpb-quantity-font-size, 16px);
    font-weight: var(--wpb-quantity-font-weight, 500);
    color: var(--wpb-quantity-input-color, #000);
    background: transparent;
    border-style: solid;
    border-width: 0 var(--wpb-quantity-border-width, 2px) 0
        var(--wpb-quantity-border-width, 2px);
    border-radius: 0 !important;
    border-color: var(--wpb-quantity-border-color, #000);
    transition: all 0.3s;
}
.wpb-pmqb-quantity-skin-type3 .wpb-pmqb-quantity .wpb-pmqb-qty-btn {
    width: var(--wpb-quantity-icon-width, 32px);
    height: var(--wpb-quantity-icon-height);
    background: var(--wpb-quantity-icon-bg, transparent);
    color: var(--wpb-quantity-icon-color, #4c4c4c);
    transition: all 0.3s;
}
.wpb-pmqb-quantity-skin-type3
    .wpb-pmqb-quantity
    .wpb-pmqb-qty-btn:hover:not(.wpb-pmqb-qty-btn--disabled),
.wpb-pmqb-quantity-skin-type3
    .wpb-pmqb-quantity
    .wpb-pmqb-qty-btn:focus:not(.wpb-pmqb-qty-btn--disabled),
.wpb-pmqb-quantity-skin-type3
    .wpb-pmqb-quantity
    .wpb-pmqb-qty-btn:active:not(.wpb-pmqb-qty-btn--disabled) {
    color: var(--wpb-quantity-icon-hover-color, #fff);
    background: var(--wpb-quantity-icon-hover-bg, #000);
    border-color: var(--wpb-quantity-icons-border-hover-color);
}
.wpb-pmqb-quantity-skin-type3 .wpb-pmqb-quantity .wpb-pmqb-qty-btn svg {
    width: var(--wpb-quantity-icon-size, 17px);
    height: var(--wpb-quantity-icon-size, 17px);
    stroke-width: 3;
    stroke-linecap: square;
}

/* =========================================
   6. Skin Type 4 (Side Stacked Buttons)
   ========================================= */
.wpb-pmqb-quantity-skin-type4 .wpb-pmqb-quantity {
    border-style: solid;
    border-width: var(--wpb-quantity-border-width, 1px);
    border-color: var(--wpb-quantity-border-color, #e0e0df);
    border-radius: var(--wpb-quantity-border-radius, 0);
    margin: var(--wpb-quantity-margin, 0) !important;
    background: var(--wpb-quantity-bg, transparent);
    transition: all 0.3s;
}
.wpb-pmqb-quantity-skin-type4 .wpb-pmqb-quantity:hover,
.wpb-pmqb-quantity-skin-type4 .wpb-pmqb-quantity:focus-within {
    border-color: var(--wpb-quantity-border-hover-color, #e0e0df);
    background: var(--wpb-quantity-hover-bg, transparent);
}
.wpb-pmqb-quantity-skin-type4 .wpb-pmqb-quantity:hover input.qty,
.wpb-pmqb-quantity-skin-type4 .wpb-pmqb-quantity:focus-within input.qty {
    color: var(--wpb-quantity-input-hover-color);
}
.wpb-pmqb-quantity-skin-type4
    .wpb-pmqb-quantity:hover
    .wpb-pmqb-qty-btns-wrapper,
.wpb-pmqb-quantity-skin-type4
    .wpb-pmqb-quantity:focus-within
    .wpb-pmqb-qty-btns-wrapper {
    border-left-color: var(--wpb-quantity-border-hover-color, #e0e0df);
}
.wpb-pmqb-quantity-skin-type4 .wpb-pmqb-quantity input.qty {
    width: var(--wpb-quantity-width, 75px);
    height: var(--wpb-quantity-height, 50px);
    font-size: var(--wpb-quantity-font-size, 14px);
    font-weight: var(--wpb-quantity-font-weight, 500);
    color: var(--wpb-quantity-input-color, #4c4c4c);
    background: transparent;
}
.wpb-pmqb-quantity-skin-type4 .wpb-pmqb-quantity .wpb-pmqb-qty-btns-wrapper {
    border-left-width: var(--wpb-quantity-border-width, 1px);
    border-left-style: solid;
    border-left-color: var(--wpb-quantity-border-color, #e0e0df);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    transition: all 0.3s;
}
.wpb-pmqb-quantity-skin-type4 .wpb-pmqb-quantity .wpb-pmqb-qty-btn {
    width: var(--wpb-quantity-icon-width, 32px);
    height: var(--wpb-quantity-icon-height);
    background: var(--wpb-quantity-icon-bg, transparent);
    color: var(--wpb-quantity-icon-color, #4c4c4c);
    transition: all 0.3s;
}
.wpb-pmqb-quantity-skin-type4
    .wpb-pmqb-quantity
    .wpb-pmqb-qty-btn:hover:not(.wpb-pmqb-qty-btn--disabled),
.wpb-pmqb-quantity-skin-type4
    .wpb-pmqb-quantity
    .wpb-pmqb-qty-btn:focus:not(.wpb-pmqb-qty-btn--disabled),
.wpb-pmqb-quantity-skin-type4
    .wpb-pmqb-quantity
    .wpb-pmqb-qty-btn:active:not(.wpb-pmqb-qty-btn--disabled) {
    color: var(--wpb-quantity-icon-hover-color, #4c4c4c);
    background: var(--wpb-quantity-icon-hover-bg, transparent);
    border-color: var(--wpb-quantity-icons-border-hover-color);
}
.wpb-pmqb-quantity-skin-type4 .wpb-pmqb-quantity .wpb-pmqb-qty-btn svg {
    width: var(--wpb-quantity-icon-size, 10px);
    height: var(--wpb-quantity-icon-size, 10px);
    stroke-width: 4;
    stroke-linecap: square;
}

/* =========================================
   7. Skin Type 5 (Compact Stacked Buttons)
   ========================================= */
.wpb-pmqb-quantity-skin-type5 .wpb-pmqb-quantity {
    border-style: solid;
    border-width: var(--wpb-quantity-border-width, 1px);
    border-color: var(--wpb-quantity-border-color, #efefef);
    border-radius: var(--wpb-quantity-border-radius, 7px);
    margin: var(--wpb-quantity-margin, 0) !important;
    background: var(--wpb-quantity-bg, transparent);
    transition: all 0.3s;
}
.wpb-pmqb-quantity-skin-type5 .wpb-pmqb-quantity:hover,
.wpb-pmqb-quantity-skin-type5 .wpb-pmqb-quantity:focus-within {
    border-color: var(--wpb-quantity-border-hover-color, #efefef);
    background: var(--wpb-quantity-hover-bg, transparent);
}
.wpb-pmqb-quantity-skin-type5 .wpb-pmqb-quantity:hover input.qty,
.wpb-pmqb-quantity-skin-type5 .wpb-pmqb-quantity:focus-within input.qty {
    color: var(--wpb-quantity-input-hover-color);
}
.wpb-pmqb-quantity-skin-type5
    .wpb-pmqb-quantity:hover
    .wpb-pmqb-qty-btns-wrapper,
.wpb-pmqb-quantity-skin-type5
    .wpb-pmqb-quantity:focus-within
    .wpb-pmqb-qty-btns-wrapper {
    border-left-color: var(--wpb-quantity-border-hover-color, #efefef);
}
.wpb-pmqb-quantity-skin-type5
    .wpb-pmqb-quantity:hover
    .wpb-pmqb-qty-btns-wrapper
    .wpb-pmqb-qty-btn.wpb-pmqb-plus,
.wpb-pmqb-quantity-skin-type5
    .wpb-pmqb-quantity:focus-within
    .wpb-pmqb-qty-btns-wrapper
    .wpb-pmqb-qty-btn.wpb-pmqb-plus {
    border-bottom-color: var(--wpb-quantity-border-hover-color, #efefef);
}
.wpb-pmqb-quantity-skin-type5 .wpb-pmqb-quantity input.qty {
    width: var(--wpb-quantity-width, 60px);
    height: var(--wpb-quantity-height, 50px);
    font-size: var(--wpb-quantity-font-size, 14px);
    font-weight: var(--wpb-quantity-font-weight, 500);
    color: var(--wpb-quantity-input-color, #323232);
    background: transparent;
}
.wpb-pmqb-quantity-skin-type5 .wpb-pmqb-quantity .wpb-pmqb-qty-btns-wrapper {
    border-left-width: var(--wpb-quantity-border-width, 1px);
    border-left-style: solid;
    border-left-color: var(--wpb-quantity-border-color, #efefef);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    transition: all 0.3s;
}
.wpb-pmqb-quantity-skin-type5 .wpb-pmqb-quantity .wpb-pmqb-qty-btn {
    width: var(--wpb-quantity-icon-width, 25px);
    height: var(--wpb-quantity-icon-height, 25px);
    background: var(--wpb-quantity-icon-bg, transparent);
    color: var(--wpb-quantity-icon-color, #323232);
    transition: all 0.3s;
}
.wpb-pmqb-quantity-skin-type5
    .wpb-pmqb-quantity
    .wpb-pmqb-qty-btn:hover:not(.wpb-pmqb-qty-btn--disabled),
.wpb-pmqb-quantity-skin-type5
    .wpb-pmqb-quantity
    .wpb-pmqb-qty-btn:focus:not(.wpb-pmqb-qty-btn--disabled),
.wpb-pmqb-quantity-skin-type5
    .wpb-pmqb-quantity
    .wpb-pmqb-qty-btn:active:not(.wpb-pmqb-qty-btn--disabled) {
    color: var(--wpb-quantity-icon-hover-color, #323232);
    background: var(--wpb-quantity-icon-hover-bg, transparent);
}
.wpb-pmqb-quantity-skin-type5
    .wpb-pmqb-quantity
    .wpb-pmqb-qty-btn.wpb-pmqb-plus {
    border-bottom-width: var(--wpb-quantity-border-width, 1px);
    border-bottom-style: solid;
    border-bottom-color: var(--wpb-quantity-border-color, #efefef);
}
.wpb-pmqb-quantity-skin-type5 .wpb-pmqb-quantity .wpb-pmqb-qty-btn svg {
    width: var(--wpb-quantity-icon-size, 13px);
    height: var(--wpb-quantity-icon-size, 13px);
    stroke-width: 3;
}

/* =========================================
   8. Skin Type 6 (Circle Icon Style)
   ========================================= */
.wpb-pmqb-quantity-skin-type6 .wpb-pmqb-quantity {
    overflow: visible;
    align-items: center;
    border-width: var(--wpb-quantity-border-width, 0);
    border-color: var(--wpb-quantity-border-color);
    border-radius: var(--wpb-quantity-border-radius, 0);
    background: var(--wpb-quantity-bg);
    padding: var(--wpb-quantity-padding, 0);
    margin: var(--wpb-quantity-margin, 0) !important;
    transition: all 0.3s;
}
.wpb-pmqb-quantity-skin-type6 .wpb-pmqb-quantity:hover,
.wpb-pmqb-quantity-skin-type6 .wpb-pmqb-quantity:focus-within {
    border-color: var(--wpb-quantity-border-hover-color);
    background: var(--wpb-quantity-hover-bg);
}
.wpb-pmqb-quantity-skin-type6 .wpb-pmqb-quantity:hover input.qty,
.wpb-pmqb-quantity-skin-type6 .wpb-pmqb-quantity:focus-within input.qty {
    color: var(--wpb-quantity-input-hover-color);
}
.wpb-pmqb-quantity-skin-type6 .wpb-pmqb-quantity input.qty {
    width: var(--wpb-quantity-width, 60px);
    height: var(--wpb-quantity-height, 40px);
    font-size: var(--wpb-quantity-font-size, 18px);
    font-weight: var(--wpb-quantity-font-weight, 700);
    color: var(--wpb-quantity-input-color, #010000);
    background: transparent;
}
.wpb-pmqb-quantity-skin-type6 .wpb-pmqb-quantity .wpb-pmqb-qty-btn {
    width: var(--wpb-quantity-icon-width, 40px);
    height: var(--wpb-quantity-icon-height, 40px);
    background: var(--wpb-quantity-icon-bg, #f7f4ef);
    color: var(--wpb-quantity-icon-color, #010000);
    border-radius: var(--wpb-quantity-icons-border-radius, 50%);
    border-style: solid;
    border-width: var(--wpb-quantity-icons-border-width, 0);
    border-color: var(--wpb-quantity-icons-border-color);
    transition: all 0.3s;
}
.wpb-pmqb-quantity-skin-type6
    .wpb-pmqb-quantity
    .wpb-pmqb-qty-btn:hover:not(.wpb-pmqb-qty-btn--disabled),
.wpb-pmqb-quantity-skin-type6
    .wpb-pmqb-quantity
    .wpb-pmqb-qty-btn:focus:not(.wpb-pmqb-qty-btn--disabled),
.wpb-pmqb-quantity-skin-type6
    .wpb-pmqb-quantity
    .wpb-pmqb-qty-btn:active:not(.wpb-pmqb-qty-btn--disabled) {
    color: var(--wpb-quantity-icon-hover-color, #f7f4ef);
    background: var(--wpb-quantity-icon-hover-bg, #010000);
    border-color: var(--wpb-quantity-icons-border-hover-color);
}
.wpb-pmqb-quantity-skin-type6 .wpb-pmqb-quantity .wpb-pmqb-qty-btn svg {
    width: var(--wpb-quantity-icon-size, 13px);
    height: var(--wpb-quantity-icon-size, 13px);
    stroke-width: 4;
    stroke-linecap: square;
}

/* =========================================
   9. Skin Type 7 (Pill Shape Style)
   ========================================= */
.wpb-pmqb-quantity-skin-type7 .wpb-pmqb-quantity {
    overflow: visible;
    align-items: center;
    transition: all 0.3s;
    border-width: var(--wpb-quantity-border-width, 0);
    border-color: var(--wpb-quantity-border-color);
    border-radius: var(--wpb-quantity-border-radius, 64px);
    background: var(--wpb-quantity-bg, #f1f1f3);
    padding: var(--wpb-quantity-padding, 8px);
    margin: var(--wpb-quantity-margin, 0) !important;
    transition: all 0.3s;
}
.wpb-pmqb-quantity-skin-type7 .wpb-pmqb-quantity:hover,
.wpb-pmqb-quantity-skin-type7 .wpb-pmqb-quantity:focus-within {
    border-color: var(--wpb-quantity-border-hover-color);
    background: var(--wpb-quantity-hover-bg, #f1f1f3);
}
.wpb-pmqb-quantity-skin-type7 .wpb-pmqb-quantity:hover input.qty,
.wpb-pmqb-quantity-skin-type7 .wpb-pmqb-quantity:focus-within input.qty {
    color: var(--wpb-quantity-input-hover-color);
}
.wpb-pmqb-quantity-skin-type7 .wpb-pmqb-quantity input.qty {
    width: var(--wpb-quantity-width, 56px);
    height: var(--wpb-quantity-height, 38px);
    font-size: var(--wpb-quantity-font-size, 16px);
    font-weight: var(--wpb-quantity-font-weight, 600);
    color: var(--wpb-quantity-input-color);
    background: transparent;
}
.wpb-pmqb-quantity-skin-type7 .wpb-pmqb-quantity .wpb-pmqb-qty-btn {
    width: var(--wpb-quantity-icon-width, 38px);
    height: var(--wpb-quantity-icon-height, 38px);
    background: var(--wpb-quantity-icon-bg, #fff);
    color: var(--wpb-quantity-icon-color, #000);
    border-radius: var(--wpb-quantity-icons-border-radius, 50%);
    border-style: solid;
    border-width: var(--wpb-quantity-icons-border-width, 1px);
    border-color: var(--wpb-quantity-icons-border-color, #e9e9e9);
    transition: all 0.3s;
}
.wpb-pmqb-quantity-skin-type7
    .wpb-pmqb-quantity
    .wpb-pmqb-qty-btn:hover:not(.wpb-pmqb-qty-btn--disabled),
.wpb-pmqb-quantity-skin-type7
    .wpb-pmqb-quantity
    .wpb-pmqb-qty-btn:focus:not(.wpb-pmqb-qty-btn--disabled),
.wpb-pmqb-quantity-skin-type7
    .wpb-pmqb-quantity
    .wpb-pmqb-qty-btn:active:not(.wpb-pmqb-qty-btn--disabled) {
    color: var(--wpb-quantity-icon-hover-color, #000);
    background: var(--wpb-quantity-icon-hover-bg, #fff);
    border-color: var(--wpb-quantity-icons-border-hover-color, #e9e9e9);
}
.wpb-pmqb-quantity-skin-type7 .wpb-pmqb-quantity .wpb-pmqb-qty-btn svg {
    width: var(--wpb-quantity-icon-size, 22px);
    height: var(--wpb-quantity-icon-size, 22px);
    stroke-width: 2;
}

/* =========================================
   10. Quantity Slider Layout
   ========================================= */
/* Prevent page scrolling/refreshing while interacting with the slider */
.wpb-pmqb-display-type-slider {
    touch-action: none;
}
.wpb-pmqb-display-type-slider,
.wpb-pmqb-display-type-slider .wpb-pmqb-quantity,
.woocommerce
    div.product
    form.cart
    .wpb-pmqb-display-type-slider
    div.wpb-pmqb-quantity {
    width: 100% !important;
}
.wpb-pmqb-display-type-slider .wpb-pmqb-quantity {
    display: flex;
    flex-direction: column;
    gap: var(--wpb-quantity-slider-gap, 15px);
    justify-content: center;
    float: unset !important;
    margin: var(--wpb-quantity-slider-margin, 0 0 1.75rem) !important;
    overflow: visible !important;
    border: none !important;
}
.wpb-pmqb-display-type-slider .qty,
.woocommerce .wpb-pmqb-display-type-slider .quantity .qty {
    width: 25px;
    padding: 0;
    background: transparent;
    align-self: center;
    border: none;
    text-align: center;
    color: var(--wpb-quantity-slider-input-color);
    font-size: var(--wpb-quantity-slider-input-font-size, 18px);
    font-weight: var(--wpb-quantity-slider-input-font-weight, 600);
    line-height: normal;
    outline: none;
    box-shadow: unset !important;
}
.wpb-pmqb-display-type-slider.wpb-pmqb-slider-show-input-no .qty {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
.wpb-pmqb-slider-input-position-bottom .wpb-pmqb-quantity {
    flex-direction: column-reverse;
}
.wpb-pmqb-slider-input-position-left .wpb-pmqb-quantity {
    flex-direction: row;
    align-items: center;
}
.wpb-pmqb-slider-input-position-right .wpb-pmqb-quantity {
    flex-direction: row-reverse;
    align-items: center;
}
.wpb-pmqb-display-type-slider .qty::-webkit-outer-spin-button,
.wpb-pmqb-display-type-slider .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* =========================================
   11. Slider Elements (Track, Thumb, Tooltip)
   ========================================= */
.wpb-pmqb-slider-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    overflow: visible !important;
}
.wpb-pmqb-slider-track-base {
    position: relative;
    width: var(--wpb-quantity-slider-width, 100%);
    height: var(--wpb-quantity-slider-height, 8px);
    background: var(--wpb-quantity-slider-track-color, #efefef);
    border-radius: 999px;
}
.wpb-pmqb-slider-track-fill {
    position: absolute;
    height: 100%;
    background: var(--wpb-quantity-slider-thumb-bg, rgb(37, 99, 235));
    border-radius: 999px;
    left: 0;
}
/* Maintain base properties, but handle the transform carefully */
.wpb-pmqb-slider-thumb {
    position: absolute;
    top: 50%;
    /* Combine translate and the base scale */
    transform: translate(-50%, -50%) scale(1); 
    transition:
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), /* Added a slight "pop" effect */
        box-shadow 0.3s ease;
    width: var(--wpb-quantity-slider-thumb-size, 24px);
    height: var(--wpb-quantity-slider-thumb-size, 24px);
    background: var(--wpb-quantity-slider-thumb-bg, rgb(37, 99, 235));
    color: var(--wpb-quantity-slider-thumb-color, #ffffff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    cursor: pointer;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow:
        0 4px 6px -1px rgb(0 0 0 / 0.1),
        0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Hover effect for mouse users */
.wpb-pmqb-slider-thumb:hover {
    box-shadow:
        0 10px 15px -3px rgb(0 0 0 / 0.1),
        0 4px 6px -4px rgb(0 0 0 / 0.1);
    transform: translate(-50%, -50%) scale(1.1);
}

/* The Fix: Trigger scale on Touch/Click via the JS class 
   and the standard active/focus states
*/
.wpb-pmqb-slider-thumb:active,
.wpb-pmqb-slider-thumb:focus,
.wpb-pmqb-slider-thumb.is-dragging {
    box-shadow:
        0 20px 25px -5px rgb(0 0 0 / 0.1),
        0 8px 10px -6px rgb(0 0 0 / 0.1);
    transform: translate(-50%, -50%) scale(1.2); /* Slightly larger on touch for better visibility */
}
.wpb-pmqb-thumb-number {
    font-size: var(--wpb-quantity-slider-thumb-font-size, 12px);
    font-weight: var(--wpb-quantity-slider-thumb-font-weight, 600);
}
.wpb-pmqb-slider-tooltip {
    position: absolute;
    bottom: 38px;
    left: 50%;
    transform: translateX(-50%);
    background: #111;
    color: #fff;
    padding: 6px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: normal;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.2s ease 0.15s,
        visibility 0.2s ease 0.15s;
    z-index: 110;
    pointer-events: none;
}
.wpb-pmqb-slider-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #111 transparent transparent transparent;
}
.wpb-pmqb-slider-thumb:hover:not(.is-dragging) .wpb-pmqb-slider-tooltip {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* =========================================
   12. Third-Party Theme Support
   ========================================= */
.woocommerce div.product form.cart .wpb-pmqb-quantity > a,
.woocommerce ul.products form.cart .wpb-pmqb-quantity > a,
.wpb-pmqb-quantity span.product-qty {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
.woocommerce div.product form.cart div.wpb-pmqb-quantity,
.woocommerce ul.products form.cart div.wpb-pmqb-quantity {
    float: unset !important;
    max-width: unset !important;
    width: unset !important;
    height: unset !important;
}
.woocommerce div.product form.cart:has(.wpb-pmqb-quantity-wrapper) {
    display: flex;
    align-items: center;
    gap: 10px;
}
.wp-theme-astra.woocommerce
    div.product
    form.cart:has(.wpb-pmqb-quantity-wrapper) {
    margin-bottom: 1em;
}
.woocommerce-js div.product form.cart:has(.wpb-pmqb-quantity-wrapper) .button {
    margin: 0;
}
.woocommerce div.product form.cart:has(.wpb-pmqb-quantity-wrapper)::after,
.woocommerce div.product form.cart:has(.wpb-pmqb-quantity-wrapper)::before {
    display: none !important;
}
.woocommerce div.product form.cart:has(.wpb-pmqb-display-type-slider) {
    flex-direction: column;
}
.woocommerce ul.products form.cart:has(.wpb-pmqb-display-type-slider) {
    text-align: center;
}
.woocommerce
    div.product
    form.cart
    .wpb-pmqb-display-type-slider
    .wpb-pmqb-quantity {
    border: 0 !important;
    height: unset !important;
    background: transparent;
}
.product-gallery-summary
    .wpb-pmqb-display-type-slider
    .botiga-single-addtocart-wrapper {
    gap: 36px;
}
.wp-theme-blocksy.woocommerce
    div.product
    form.cart:has(.wpb-pmqb-quantity-wrapper) {
    display: unset;
}
.wp-theme-blocksy.woocommerce
    div.product
    form.cart
    .wpb-pmqb-display-type-buttons {
    max-width: fit-content;
}
.wp-theme-blocksy.woocommerce div.product form.cart .wpb-pmqb-quantity-wrapper {
    order: 1;
}
.wp-theme-blocksy.woocommerce
    div.product
    form.cart:has(.wpb-pmqb-display-type-slider)
    .ct-cart-actions {
    gap: 30px;
}
.wp-theme-blocksy.woocommerce div.product .wpb-pmqb-quantity input.qty {
    height: 100%;
    border-radius: 0 !important;
}
.wp-theme-neve
    div.product
    form.cart:has(.wpb-pmqb-display-type-slider)
    .button {
    width: 100%;
}
.wp-theme-flatsome .wpb-pmqb-display-type-buttons {
    flex: unset;
}
@media (min-width: 992px) {
    .wp-theme-woostify .products .product:has(.wpb-pmqb-quantity-wrapper):hover .product-loop-meta:not(.no-transform) .animated-meta {
        transform: translateY(-60px);
    }
}
@media (min-width: 992px) {
    .wp-theme-woostify .products .product:has(.wpb-pmqb-quantity-wrapper) .product-loop-meta:not(.no-transform) {
        height: 60px;
        line-height: 60px;
        overflow: hidden;
    }
}
.wp-theme-botiga.woocommerce ul.products form.cart:has(.wpb-pmqb-display-type-slider) {
    display: unset;
}