/* HotZeg — Cart stepper, Uber Eats style.
 * Two-step: pick qty with +/-, then click commit button to add to cart.
 */

.qty-stepper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    transition: opacity var(--t-fast);
    min-width: 0;
}
.qty-stepper.is-loading { opacity: 0.6; pointer-events: none; }
/* Premium tactile confirmation — deep olive green, slow easing, no flash.
   3 phases on a 1800ms timeline:
     0-15%  → fade IN to deep olive
     15-50% → hold (user reads the confirmation)
     50-100% → slow fade OUT back to default
   Uses CSS keyframes (not a class toggle) so the easing curve is owned here. */
.qty-stepper.just-added .qty-stepper-commit {
    animation: hz-just-added 1800ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes hz-just-added {
    0%   { background: var(--ink); }
    15%  { background: #2F6B4E; }
    50%  { background: #2F6B4E; }
    100% { background: var(--ink); }
}
/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .qty-stepper.just-added .qty-stepper-commit {
        animation: none;
        background: #2F6B4E;
        transition: background 320ms ease;
    }
}

/* Optional pill: "● 2 déjà au panier" */
.qty-stepper-state {
    display: flex;
    margin: 0;
}
.qty-stepper-cart-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.qty-stepper-dot {
    width: 7px;
    height: 7px;
    background: var(--magenta);
    border-radius: 999px;
    display: inline-block;
    flex: 0 0 7px;
}
.qty-stepper-cart-count {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0;
    color: var(--ink);
    text-transform: none;
}

/* Row: [- N +] | [Ajouter X au panier →] */
.qty-stepper-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.qty-stepper-pick {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: stretch;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    height: 44px;
}
.qty-stepper-pick-btn {
    flex: 0 0 36px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: var(--ink);
    transition: background 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.qty-stepper-pick-btn:hover:not([disabled]) { background: var(--ink); color: var(--paper); }
.qty-stepper-pick-btn[disabled] { color: var(--rule); cursor: not-allowed; }
.qty-stepper-pick-count {
    min-width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 700;
    font-size: 18px;
    color: var(--ink);
    border-left: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
    padding: 0 6px;
    background: var(--bg);
}

.qty-stepper-commit {
    flex: 1 1 auto;
    background: var(--ink);
    color: var(--paper);
    border: none;
    border-radius: var(--radius);
    padding: 10px 14px;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    text-align: left;
    height: 44px;
}
.qty-stepper-commit:hover { background: var(--magenta); transform: translateY(-1px); }
.qty-stepper-commit > span {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qty-stepper-commit i {
    width: 22px; height: 22px;
    line-height: 19px;
    text-align: center;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-style: normal;
    font-size: 14px;
    flex: 0 0 22px;
}

/* Disabled state ----------------------------------------------- */
.qty-stepper-disabled {
    background: var(--rule);
    color: var(--ink-soft);
    border: none;
    border-radius: var(--radius);
    padding: 12px 16px;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 13px;
    cursor: not-allowed;
    width: 100%;
}

/* Sizing variants ---------------------------------------------- */
.qty-stepper--sm .qty-stepper-pick { height: 36px; }
.qty-stepper--sm .qty-stepper-pick-btn { flex-basis: 30px; font-size: 16px; }
.qty-stepper--sm .qty-stepper-pick-count { font-size: 14px; min-width: 22px; padding: 0 4px; }
.qty-stepper--sm .qty-stepper-commit { height: 36px; padding: 8px 12px; font-size: 11.5px; }
.qty-stepper--sm .qty-stepper-commit i { width: 18px; height: 18px; line-height: 15px; font-size: 12px; flex-basis: 18px; }

.qty-stepper--lg .qty-stepper-pick { height: 56px; }
.qty-stepper--lg .qty-stepper-pick-btn { flex-basis: 48px; font-size: 24px; }
.qty-stepper--lg .qty-stepper-pick-count { font-size: 22px; min-width: 36px; padding: 0 10px; }
.qty-stepper--lg .qty-stepper-commit { height: 56px; padding: 14px 22px; font-size: 15px; }
.qty-stepper--lg .qty-stepper-commit i { width: 26px; height: 26px; line-height: 23px; font-size: 16px; flex-basis: 26px; }

/* Cart-icon header badge --------------------------------------- */
[data-cart-badge] {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--magenta);
    margin-left: 4px;
}

/* Stack on narrow widths */
@media (max-width: 380px) {
    .qty-stepper-row { flex-direction: column; gap: 8px; }
    .qty-stepper-pick { align-self: flex-start; }
    .qty-stepper-commit { width: 100%; }
}