/**
 * Sélecteur de quantité « − champ + » — wooaka (Essentiel)
 *
 * Portée : uniquement les champs habillés par wooaka. Un champ rendu par le
 * gabarit natif est reconnu à ses boutons (.quantity:has(> .oaka-qty__btn)),
 * un champ créé sur un listing porte .oaka-qty. Jamais .quantity seul : c'est
 * un sélecteur global, partagé avec le thème et les autres extensions.
 *
 * Les classes des boutons ne reprennent pas .minus / .plus : Divi les force en
 * !important (blanc, 24 px de haut), ce qui écraserait les couleurs et la cible
 * tactile.
 *
 * Couleurs : variables --oaka-qty-* posées en ligne par selecteur-quantite.php,
 * elles-mêmes adossées aux --oaka-wc-color-* de l'onglet Design.
 *
 * `body` en tête de chaque sélecteur : de quoi passer devant
 * `.woocommerce .quantity input.qty` (Divi, WooCommerce) sans !important.
 */

/* ── Le bloc ───────────────────────────────────────────────────────────── */

body :is(.oaka-qty, .quantity:has(> .oaka-qty__btn)) {
    display: inline-flex;
    align-items: stretch;
    width: auto;
    max-width: 100%;
    margin: 0;
    border: 1px solid var(--oaka-qty-bg);
    border-radius: var(--oaka-qty-radius);
    overflow: hidden;
    vertical-align: middle;
    box-sizing: border-box;
    background: #ffffff;
}

/* ── Les boutons ───────────────────────────────────────────────────────── */

body :is(.oaka-qty, .quantity:has(> .oaka-qty__btn)) .oaka-qty__btn {
    flex: 0 0 44px;
    width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--oaka-qty-bg);
    color: var(--oaka-qty-fg);
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    transition: background-color .15s ease;
}

body :is(.oaka-qty, .quantity:has(> .oaka-qty__btn)) .oaka-qty__btn:hover:not(:disabled) {
    background: var(--oaka-qty-bg-hover);
}

body :is(.oaka-qty, .quantity:has(> .oaka-qty__btn)) .oaka-qty__btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

body :is(.oaka-qty, .quantity:has(> .oaka-qty__btn)) .oaka-qty__btn:focus-visible {
    outline: 2px solid var(--oaka-qty-text);
    outline-offset: -4px;
}

/* ── Le champ ──────────────────────────────────────────────────────────── */

body :is(.oaka-qty, .quantity:has(> .oaka-qty__btn)) input.qty {
    flex: 1 1 auto;
    width: 4.5em;
    min-width: 0;
    max-width: none;
    min-height: 44px;
    margin: 0;
    padding: 0 6px;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    color: var(--oaka-qty-text);
    font-size: 16px;
    line-height: 44px;
    text-align: center;
    box-shadow: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

body :is(.oaka-qty, .quantity:has(> .oaka-qty__btn)) input.qty::-webkit-inner-spin-button,
body :is(.oaka-qty, .quantity:has(> .oaka-qty__btn)) input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

body :is(.oaka-qty, .quantity:has(> .oaka-qty__btn)) input.qty:focus-visible {
    outline: 2px solid var(--oaka-qty-bg);
    outline-offset: -2px;
}

/* ── Fiche produit : décoller le sélecteur du bouton panier ─────────────── */

/* Divi force `.woocommerce div.product form.cart div.quantity { margin: 0 20px 0 0 !important }`,
   de spécificité (0,4,2). Entre deux !important, la spécificité départage : le
   `:not(#oaka-qty)` ajoute le poids d'un id (1,0,0) sans rien cibler de plus.
   Borné au bloc habillé par wooaka. Mesuré dans Chrome le 2026-10-30 : 0 px avant. */
body form.cart:not(#oaka-qty) :is(.oaka-qty, .quantity:has(> .oaka-qty__btn)) {
    margin-bottom: 12px !important;
}

/* ── Listings : sélecteur et bouton empilés ───────────────────────────── */

body .oaka-qty-loop {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;        /* même écart que celui qui le sépare du prix */
    margin-top: 12px; /* décolle le sélecteur du prix de la carte */
}

body .oaka-qty-loop > .oaka-qty {
    display: flex;
    width: 100%;
}

/* Divi pose `.woocommerce ul.products li.product .button { margin-top: 1em }`
   (0,3,2) : sans le :not(#oaka-qty), 20 px s'ajoutaient à l'écart du bloc. */
body .oaka-qty-loop:not(#oaka-qty) > .button {
    margin: 0;
    text-align: center;
}

/* ── Blocs Gutenberg (Panier, Commande) : habillés, jamais doublés ─────── */

body .wc-block-components-quantity-selector {
    border-color: var(--oaka-qty-bg);
    border-radius: var(--oaka-qty-radius);
}

body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
    min-width: 44px;
    background: var(--oaka-qty-bg);
    color: var(--oaka-qty-fg);
    opacity: 1;
}

body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover:not(:disabled) {
    background: var(--oaka-qty-bg-hover);
}

body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled {
    opacity: .45;
}

body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
    color: var(--oaka-qty-text);
    font-size: 16px;
}

/* ── Tablette et mobile : pleine largeur (seuil arbitré : 782 px) ──────── */

@media (max-width: 782px) {

    body :is(.oaka-qty, .quantity:has(> .oaka-qty__btn)),
    body form.cart:not(#oaka-qty) :is(.oaka-qty, .quantity:has(> .oaka-qty__btn)) {
        /* Le second sélecteur passe devant `.woocommerce div.product form.cart
           div.quantity { width: auto }` de Divi (0,4,2). Mesuré : 162 px sur 309. */
        display: flex;
        width: 100%;
        float: none;
    }

    body .wc-block-components-quantity-selector {
        width: 100%;
    }
}