/* Spliff — Product ATC (container wrapper) */

.spliff-patc {
    width: 100%;
    box-sizing: border-box;
}

.spliff-patc *,
.spliff-patc *::before,
.spliff-patc *::after {
    box-sizing: border-box;
}

/* Quand le form n'est pas trouvé / produit absent → placeholder admin */
.spliff-patc--placeholder {
    padding: 14px;
    background: #fff8e5;
    border: 1px dashed #d6b04a;
    color: #6c5410;
    border-radius: 6px;
}

/* ─── Reset léger sur le form WC pour éviter les surprises de thème ───
   Ne touche QUE les éléments à l'intérieur du wrapper Spliff ATC,
   pas les autres formulaires du site. */
.spliff-patc form.cart {
    margin: 0;
}

.spliff-patc .quantity {
    /* Place pour custom override si le user veut masquer le qty natif WC */
}

/* Bouton ATC — reset des règles de thème les plus invasives.
   Les controls Elementor du widget réécrivent par dessus. */
.spliff-patc .single_add_to_cart_button {
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

/* ═══════════════════════════════════════════════════════════════════
   MODE — Variations natives WC masquées (.spliff-patc--hide-native-variations)
   Cache le tableau visuel des attributs (Goûts, Couleur, etc.) tout en gardant
   le formulaire actif en arrière-plan : le widget « Variations Produit V2 (tiles) »
   peut continuer à écrire dans `input.variation_id` et à déclencher l'event change
   sur le select natif → toute la mécanique WC fonctionne sans UI native visible.
   ═══════════════════════════════════════════════════════════════════ */
.spliff-patc--hide-native-variations table.variations,
.spliff-patc--hide-native-variations form.variations_form > .variations,
.spliff-patc--hide-native-variations .reset_variations {
    display: none !important;
}

/* Garde le wrap de prix/stock de la variation sélectionnée (utilisé par le bouton ATC dynamique) */
.spliff-patc--hide-native-variations .single_variation_wrap .single_variation {
    /* On peut le cacher aussi si tu ne veux pas voir le prix dupliqué, mais on garde par défaut */
}

/* Le form reste actif (pas de display:none global) */

/* ═══════════════════════════════════════════════════════════════════
   MODE — Images des packs masquées (.spliff-patc--hide-pack-images)
   Structure HTML rendue par pack-mix :
     <div class="product-pack-grid" data-product-id="...">
       <div class="product-pack [selected]" data-qty="2" data-discount="10">
         <div class="pack-discount">-10%</div>     ← badge promo
         <div class="pack-image"><img …></div>     ← image (à cacher)
         <h3>2</h3>                                ← label quantité
         <p class="pack-price">…</p>
       </div>
     </div>
   ═══════════════════════════════════════════════════════════════════ */

/* Layout flex pour pouvoir placer le badge en absolute en haut
   et le label de quantité en bas — sans dépendre du markup. */
.spliff-patc .product-pack {
    position: relative;
}

/* Cache l'image (le wrap pack-mix et tout fallback img/picture/svg) */
.spliff-patc--hide-pack-images .product-pack .pack-image,
.spliff-patc--hide-pack-images .product-pack img,
.spliff-patc--hide-pack-images .product-pack picture {
    display: none !important;
}

/* Force layout flex column avec contenu poussé en bas.
   Le control Elementor « Alignement vertical » peut override `justify-content`. */
.spliff-patc--hide-pack-images .product-pack {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* Le badge promo (-10%, -20%) en absolute en haut → ne masque plus le chiffre */
.spliff-patc--hide-pack-images .product-pack .pack-discount {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    z-index: 1;
}

/* Label quantité <h3> en bas, sans margin parasite */
.spliff-patc--hide-pack-images .product-pack h3 {
    margin: 0 !important;
    line-height: 1.2;
}

/* Préfixe "×" devant le chiffre via pseudo-element CSS (rendu pack-mix : <h3>1</h3>)
   COMMENTÉ — l'utilisateur préfère sans le préfixe. Décommenter pour réactiver. */
/*
.spliff-patc--hide-pack-images .product-pack h3::before {
    content: "×";
    margin-right: 0.05em;
}
*/

/* Cas spécial pack-mix label « 5 + 2 🎁 » : on ne préfixe pas avec × dans ce cas
   COMMENTÉ aussi puisque le préfixe lui-même est désactivé. */
/*
.spliff-patc--hide-pack-images .product-pack[data-qty="5"] h3::before {
    content: "";
    margin: 0;
}
*/

/* ═══════════════════════════════════════════════════════════════════
   MODE — Input quantité masqué (.spliff-patc--hide-quantity)
   Cache le champ quantity standard WC. Pratique quand la quantité est
   pilotée par les packs (1, 2, 3+) : le user n'a pas à saisir 1 à la main.
   Le form garde l'input en hidden pour que la valeur soit envoyée au cart.
   ═══════════════════════════════════════════════════════════════════ */
.spliff-patc--hide-quantity .quantity,
.spliff-patc--hide-quantity form.cart > .quantity,
.spliff-patc--hide-quantity form.variations_form .quantity {
    display: none !important;
}

/* Garde l'input quantité accessible techniquement (hidden) pour que WC
   accepte l'ajout au panier — il sera défini à 1 par défaut. */
.spliff-patc--hide-quantity input.qty[type="number"] {
    /* Visuellement caché par le .quantity wrap, mais reste dans le form */
}

/* ═══════════════════════════════════════════════════════════════════
   MODE — Tiles de variations intégrées (.spliff-pvar--embedded)
   Quand les tiles sont rendues à l'intérieur du widget ATC, on espace un peu
   plus du form en-dessous (et on autorise les styles Elementor du widget V2
   standalone à s'appliquer aussi si chargés sur la page).
   ═══════════════════════════════════════════════════════════════════ */
.spliff-patc .spliff-pvar--embedded {
    margin-bottom: 16px;
}