.quies-quick-add-to-cart-wrap {
    position: relative;
    z-index: 3;
    display: inline-flex;
    vertical-align: middle;
    flex-shrink: 0;
}

.quies-quick-add-to-cart {
    --quies-qat-size: 50px;

    /* Tokens de base */
    --quies-qat-brand: #024a67;
    --quies-qat-light: #fff;
    --quies-qat-tint: #f3f8fa;

    /* État par défaut : plein foncé */
    --quies-qat-color: var(--quies-qat-light);
    --quies-qat-bg: var(--quies-qat-brand);
    --quies-qat-border: var(--quies-qat-brand);

    /* Survol : inversé, clair */
    --quies-qat-color--hover: var(--quies-qat-brand);
    --quies-qat-bg--hover: var(--quies-qat-tint);
    --quies-qat-border--hover: var(--quies-qat-brand);

    /* Succès */
    --quies-qat-color--success: var(--quies-qat-light);
    --quies-qat-bg--success: var(--quies-qat-brand);
    --quies-qat-border--success: var(--quies-qat-brand);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--quies-qat-size);
    height: var(--quies-qat-size);
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid var(--quies-qat-border);
    border-radius: 50%;
    background: var(--quies-qat-bg);
    color: var(--quies-qat-color) !important;
    cursor: pointer;
    overflow: visible;
    text-decoration: none;
    box-sizing: border-box;
    line-height: 1;
    font-family: inherit;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Variante claire (l'ancien style commenté) */
.quies-quick-add-to-cart--outline {
    --quies-qat-color: var(--quies-qat-brand);
    --quies-qat-bg: var(--quies-qat-light);
    --quies-qat-border: #cddcdd;

    --quies-qat-color--hover: var(--quies-qat-light);
    --quies-qat-bg--hover: var(--quies-qat-brand);
    --quies-qat-border--hover: var(--quies-qat-brand);
}

.quies-quick-add-to-cart:hover:not(.is-loading):not(.is-success) {
    background: var(--quies-qat-bg--hover);
    border-color: var(--quies-qat-border--hover);
    color: var(--quies-qat-color--hover) !important;;
    text-decoration: none;
}

.quies-quick-add-to-cart:focus-visible {
    outline: 2px solid var(--quies-qat-brand);
    outline-offset: 2px;
}

.quies-quick-add-to-cart.is-loading,
.quies-quick-add-to-cart.is-success {
    pointer-events: none;
}

.quies-quick-add-to-cart.is-success {
    background: var(--quies-qat-bg--success);
    border-color: var(--quies-qat-border--success);
    color: var(--quies-qat-color--success) !important;;
}

.quies-quick-add-to-cart__state {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.quies-quick-add-to-cart.is-default .quies-quick-add-to-cart__state--cart,
.quies-quick-add-to-cart.is-loading .quies-quick-add-to-cart__state--loading,
.quies-quick-add-to-cart.is-success .quies-quick-add-to-cart__state--success {
    display: inline-flex;
}

.quies-quick-add-to-cart__svg {
    display: block;
    width: calc(18 / 40 * var(--quies-qat-size));
    height: calc(18 / 40 * var(--quies-qat-size));
    overflow: visible;
    flex-shrink: 0;
}

.quies-quick-add-to-cart__spinner {
    display: block;
    width: calc(18 / 40 * var(--quies-qat-size));
    height: calc(18 / 40 * var(--quies-qat-size));
    border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: quies-qat-spin 0.7s linear infinite;
}

@keyframes quies-qat-spin {
    to {
        transform: rotate(360deg);
    }
}