:root {
    --reve-primary: #332342;
    --reve-secondary: #FCF6F5;
    --reve-tertiary: #ffffff;
    --reve-light-border: #f0e6f0;
    --reve-font: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
}

.reve-qty-wrap {
    display: inline-flex;
    align-items: center;
    font-family: var(--reve-font) !important;
}

.reve-add-btn {
    min-width: 70px;
    padding: 8px 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--reve-primary) !important;
    color: var(--reve-tertiary) !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 16px;
    font-family: var(--reve-font) !important;
}

.reve-add-btn:hover {
    opacity: 0.9;
    background: var(--reve-primary) !important;
    color: var(--reve-tertiary) !important;
}

.reve-qty-selector {
    display: none;
    align-items: center;
    background: transparent !important;
    border: none !important;
    gap: 8px;
}

.reve-qty-selector.reve-active {
    display: inline-flex !important;
}

.reve-qty-btn {
    width: 32px !important;
    height: 32px !important;
    border: none !important;
    background: var(--reve-primary) !important;
    color: var(--reve-tertiary) !important;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    padding: 0 !important;
    margin: 0;
    border-radius: 50% !important;
    font-family: var(--reve-font) !important;
}

.reve-qty-btn:hover {
    opacity: 0.8;
    background: var(--reve-primary) !important;
    color: var(--reve-tertiary) !important;
}

.reve-qty-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--reve-primary) !important;
    color: var(--reve-tertiary) !important;
}

.reve-qty-value {
    min-width: 36px;
    height: 32px;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color: var(--reve-primary) !important;
    font-family: var(--reve-font) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--reve-tertiary) !important;
    border: 1px solid var(--reve-light-border) !important;
    border-radius: 6px !important;
    padding: 0 8px;
}

/* Single product page */
.reve-qty-single {
    margin-top: 15px;
}

.reve-qty-single .reve-add-btn {
    min-width: 100px;
    padding: 10px 20px;
    font-size: 16px;
    background: var(--reve-primary) !important;
    color: var(--reve-tertiary) !important;
}

.reve-qty-single .reve-qty-btn {
    width: 40px;
    height: 40px;
    font-size: 22px;
    background: var(--reve-primary) !important;
    color: var(--reve-tertiary) !important;
}

.reve-qty-single .reve-qty-value {
    min-width: 44px;
    height: 40px;
    font-size: 18px;
    color: var(--reve-primary) !important;
    background: var(--reve-tertiary) !important;
    border: 1px solid var(--reve-light-border) !important;
}

/* Loading state */
.reve-qty-wrap.reve-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Stock depleted state */
.reve-qty-wrap.reve-stock-max .reve-plus {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Bundle product buttons - same styling as regular */
.reve-product-type-bundle .reve-add-btn {
    background: var(--reve-primary) !important;
    color: var(--reve-tertiary) !important;
}

.reve-product-type-bundle .reve-add-btn:hover {
    background: var(--reve-primary) !important;
    color: var(--reve-tertiary) !important;
    opacity: 0.9;
}

.reve-product-type-bundle .reve-qty-btn {
    background: var(--reve-primary) !important;
    color: var(--reve-tertiary) !important;
}

.reve-product-type-bundle .reve-qty-btn:hover {
    background: var(--reve-primary) !important;
    color: var(--reve-tertiary) !important;
    opacity: 0.8;
}

.reve-product-type-bundle .reve-qty-value {
    color: var(--reve-primary) !important;
    background: var(--reve-tertiary) !important;
    border: 1px solid var(--reve-light-border) !important;
}
