/* =======================================================
   WOOCOMMERCE CART - IMMERSIF PREMIUM (FINAL CONSOLIDÉ)
   ======================================================= */

.pf-woo-native-wrap .woocommerce {
    color: var(--color-creme);
    font-family: var(--font-main);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
}

.pf-woo-native-wrap .woocommerce-notices-wrapper {
    flex: 0 0 100%;
    width: 100%;
    /* Le gap:60px du parent .woocommerce s'ajoute à cette marge (gap et
       margin se cumulent en flexbox, ils ne fusionnent pas) — négatif pour
       ramener l'espace RÉEL sous la notice à ~20px plutôt que 60px. */
    margin-bottom: -40px;
}
/* Vide (cas le plus courant : aucune notice à afficher), il occupait quand
   même sa propre ligne dans le flex du parent (flex-basis:100% l'y force),
   ce qui déclenchait le gap:60px de .woocommerce AVANT même le contenu du
   panier — un grand vide totalement indépendant des marges de page-cart.php,
   entre "Carrito" et la carte de confiance. display:none sur l'état :empty
   le retire du flux flex (donc plus de ligne, plus de gap) sans rien changer
   quand une notice existe réellement (le div n'est alors plus vide, cf. la
   marge négative ci-dessus pour CE cas-là). */
.pf-woo-native-wrap .woocommerce-notices-wrapper:empty {
    display: none;
}
.pf-woo-native-wrap .woocommerce .clear {
    display: none !important;
}

/* =======================================================
   COLONNE GAUCHE : TABLEAU DES PRODUITS
   ======================================================= */
.pf-woo-native-wrap .woocommerce-cart-form {
    flex: 1 1 55%;
    min-width: 300px;
}

.pf-woo-native-wrap table.shop_table {
    border: none !important;
    border-collapse: collapse;
    width: 100%;
}

.pf-woo-native-wrap table.shop_table th {
    background: transparent;
    color: rgba(255,255,255,0.4);
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 2px;
    padding: 0 0 20px 0;
    font-weight: 800;
}

.pf-woo-native-wrap table.shop_table td {
    border-top: none !important;
    border-bottom: 1px dashed rgba(255,255,255,0.05) !important;
    padding: 15px 0 !important;
    vertical-align: middle;
}

.pf-woo-native-wrap table.shop_table td.product-thumbnail img {
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 60px;
    height: auto;
}

.pf-woo-native-wrap table.shop_table td.product-name a {
    color: var(--color-creme-light);
    font-weight: 800;
    font-size: 16px;
    text-decoration: none;
    line-height: 1.4;
    display: block;
}

/* Métadonnées de variation (color/size/Corte) : le CSS natif WooCommerce
   (dt{float:left;clear:both}, dd sans float) rendait "color: navy" sur une
   ligne mais "size:"/"Corte:" avec leur valeur repoussée à la ligne
   suivante — comportement de float peu fiable une fois combiné au <p>
   interne au dd. Remplacé par un flux inline explicite : chaque dt+dd reste
   groupé sur sa propre ligne via un retour forcé après chaque dd, sans
   dépendre du float. */
.pf-woo-native-wrap table.shop_table td.product-name .variation,
.pf-checkout-wrap table.shop_table td.product-name .variation {
    margin: 6px 0 0 0;
}
.pf-woo-native-wrap table.shop_table td.product-name .variation dt,
.pf-woo-native-wrap table.shop_table td.product-name .variation dd,
.pf-woo-native-wrap table.shop_table td.product-name .variation dd p,
.pf-checkout-wrap table.shop_table td.product-name .variation dt,
.pf-checkout-wrap table.shop_table td.product-name .variation dd,
.pf-checkout-wrap table.shop_table td.product-name .variation dd p {
    display: inline;
    float: none !important;
    clear: none !important;
    margin: 0;
    font-size: 13px;
    line-height: 1.9;
}
.pf-woo-native-wrap table.shop_table td.product-name .variation dt,
.pf-checkout-wrap table.shop_table td.product-name .variation dt {
    color: rgba(255,255,255,0.45);
    font-weight: 600;
}
.pf-woo-native-wrap table.shop_table td.product-name .variation dt::after,
.pf-checkout-wrap table.shop_table td.product-name .variation dt::after {
    content: " ";
}
.pf-woo-native-wrap table.shop_table td.product-name .variation dd,
.pf-checkout-wrap table.shop_table td.product-name .variation dd {
    color: var(--color-creme-light);
}
.pf-woo-native-wrap table.shop_table td.product-name .variation dd::after,
.pf-checkout-wrap table.shop_table td.product-name .variation dd::after {
    content: "\A";
    white-space: pre;
}

.pf-woo-native-wrap table.shop_table td.product-price,
.pf-woo-native-wrap table.shop_table td.product-subtotal {
    color: var(--color-accent-yellow);
    font-weight: 700;
    font-size: 15px;
}

.pf-woo-native-wrap table.shop_table a.remove {
    color: var(--color-terracotta) !important;
    background: transparent !important;
    font-weight: 400;
    font-size: 24px;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pf-woo-native-wrap table.shop_table a.remove:hover {
    transform: scale(1.2);
}

/* =======================================================
   QUANTITÉ (BOUTONS + ET -)
   ======================================================= */
.custom-qty-wrapper {
    display: inline-flex;
    align-items: center;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50px;
    padding: 4px;
}
.custom-qty-wrapper input.qty {
    background: transparent !important;
    color: var(--color-creme-light) !important;
    border: none !important;
    width: 45px !important;
    text-align: center;
    font-weight: 800;
    font-size: 15px;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none;
}
.custom-qty-wrapper .qty-btn {
    background: var(--color-terracotta);
    color: white;
    border: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: 0.2s ease;
    padding: 0;
    line-height: 1;
}
.custom-qty-wrapper .qty-btn:hover {
    background: var(--color-accent-yellow);
    color: var(--bg-main);
    transform: scale(1.1);
}

/* =======================================================
   COUPON & ACTUALISER
   ======================================================= */
.pf-woo-native-wrap .woocommerce-cart-form__contents .coupon {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-top: 15px !important;
    padding-bottom: 0 !important;
    border: none !important;
}

.pf-woo-native-wrap .woocommerce-cart-form__contents .coupon input.input-text {
    background: rgba(0,0,0,0.2) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: var(--color-creme) !important;
    border-radius: 50px;
    padding: 14px 20px !important;
    width: 290px !important;
    font-size: 13px;
    outline: none;
}

.pf-woo-native-wrap .woocommerce button.button[name="apply_coupon"] {
    background: transparent !important;
    border: none !important;
    color: var(--color-terracotta) !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    font-size: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: 0.3s;
    text-decoration: none;
    box-shadow: none !important;
}
.pf-woo-native-wrap .woocommerce button.button[name="apply_coupon"]:hover {
    color: var(--color-accent-yellow) !important;
    text-decoration: underline;
    background: transparent !important;
}

.pf-woo-native-wrap .woocommerce button.button[name="update_cart"] {
    display: none !important;
}

/* Rappel discret de la bolsa (#pf-bag-nudge, inc/woocommerce/tote-bag-upsell.php)
   déplacé par JS sur la même ligne que le code promo : rappel à gauche,
   coupon à droite, tout sur UNE seule ligne (pas de wrap). Le wrapper est
   recréé à chaque MAJ AJAX du panier (le formulaire est remplacé en bloc),
   donc ce style doit tenir sans JS spécifique de layout. */
.pf-bag-nudge-coupon-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 12px;
    width: 100%;
    margin-top: 15px;
}

.pf-woo-native-wrap .pf-bag-nudge-coupon-row .coupon {
    margin-top: 0 !important;
    margin-left: auto !important; /* reste collé à droite même quand le rappel
       est caché (bolsa déjà dans le panier) — sans ça, space-between sur la
       ligne avec un seul enfant visible ramène le coupon tout à gauche. */
    flex: 0 0 auto;
    gap: 8px !important;
}

/* Champ de coupon compressé dans ce contexte pour laisser la place au
   rappel sur la même ligne — 160px, assez pour afficher le placeholder
   "Código de cupón" en entier sans le tronquer (120px le coupait). Doit
   égaler (ou dépasser) la spécificité de la règle générale à 290px
   (.pf-woo-native-wrap .woocommerce-cart-form__contents .coupon
   input.input-text, 4 classes) pour la gagner dans la cascade — un
   sélecteur à 3 classes ne suffit pas même en dernier dans le fichier. */
.pf-woo-native-wrap .pf-bag-nudge-coupon-row .coupon input.input-text {
    width: 160px !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
}

.pf-bag-nudge-coupon-row .pf-bag-nudge {
    margin: 0 !important;
    /* flex-grow:0 : ne prend QUE la taille de son contenu (le grow:1 d'avant
       étirait la boîte pointillée sur tout l'espace restant, écrasant
       visuellement le coupon à côté). space-between sur la ligne parente
       suffit à pousser le coupon à droite. */
    flex: 0 1 auto;
    min-width: 0;
}

/* =======================================================
   COLONNE DROITE : CARTE RÉSUMÉ (CART TOTALS)
   ======================================================= */
.pf-woo-native-wrap .cart-collaterals {
    flex: 0 0 400px;
    width: 400px;
    position: sticky;
    top: 40px;
}

.pf-woo-native-wrap .cart-collaterals .cart_totals {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 20px;
    padding: 25px !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4);
    width: 100%;
    box-sizing: border-box;
    float: none !important;
}

.pf-woo-native-wrap .cart-collaterals h2,
.pf-woo-native-wrap .cart_totals h2 {
    color: var(--color-creme-light);
    font-weight: 800;
    font-size: 16px !important;
    text-transform: uppercase;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    letter-spacing: 1px;
}

.pf-woo-native-wrap .cart-collaterals table,
.pf-woo-native-wrap .cart_totals table {
    width: 100%;
    border-collapse: collapse;
}

/* =======================================================
   LIGNES INTERMÉDIAIRES : SUBTOTAL + FEE
   Sélecteurs ultra-spécifiques pour gagner sur tout héritage
   ======================================================= */

/* TH — Labels (Subtotal, Envío, Tasas, Cupón) */
.pf-woo-native-wrap .cart_totals table.shop_table tr.cart-subtotal th,
.pf-woo-native-wrap .cart_totals table.shop_table tr.fee th,
.pf-woo-native-wrap .cart_totals table.shop_table tr.cart-discount th,
.pf-woo-native-wrap .cart-collaterals table.shop_table tr.cart-subtotal th,
.pf-woo-native-wrap .cart-collaterals table.shop_table tr.fee th,
.pf-woo-native-wrap .cart-collaterals table.shop_table tr.cart-discount th {
    color: rgba(255,255,255,0.4) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-align: left !important;
    vertical-align: middle !important;
    width: 60% !important;
    padding: 25px 12px 15px 0 !important; /* top:25 décolle du trait / right:12 respire du prix */
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    border-bottom: none !important;
    white-space: normal !important; /* autorise le wrap si le label est long */
}

/* TD — Prix (50.00€, 20.00€, 9.00€, -Q15.00) */
.pf-woo-native-wrap .cart_totals table.shop_table tr.cart-subtotal td,
.pf-woo-native-wrap .cart_totals table.shop_table tr.fee td,
.pf-woo-native-wrap .cart_totals table.shop_table tr.cart-discount td,
.pf-woo-native-wrap .cart-collaterals table.shop_table tr.cart-subtotal td,
.pf-woo-native-wrap .cart-collaterals table.shop_table tr.fee td,
.pf-woo-native-wrap .cart-collaterals table.shop_table tr.cart-discount td {
    color: var(--color-creme-light) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-align: right !important;
    vertical-align: middle !important;
    width: 40% !important;              /* fixe la colonne prix — le label prend le reste */
    padding: 25px 0 15px 0 !important;  /* top:25 symétrique avec le th */
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    border-bottom: none !important;
    white-space: nowrap !important;     /* prix jamais coupé */
}

/* Ligne cupón : la valeur (-Q15.00) + le lien "Quitar" ont besoin de plus de
   place que les autres lignes (juste un prix) — on ré-autorise le wrap et on
   distingue visuellement le montant en vert (une remise, pas un coût). */
.pf-woo-native-wrap .cart_totals table.shop_table tr.cart-discount td,
.pf-woo-native-wrap .cart-collaterals table.shop_table tr.cart-discount td {
    white-space: normal !important;
    line-height: 1.6;
}
.pf-woo-native-wrap .cart_totals table.shop_table tr.cart-discount td .woocommerce-Price-amount,
.pf-woo-native-wrap .cart-collaterals table.shop_table tr.cart-discount td .woocommerce-Price-amount {
    color: #2ecc71 !important;
}
.pf-woo-native-wrap .woocommerce-remove-coupon {
    display: inline-block;
    margin-left: 8px;
    color: var(--color-terracotta) !important;
    font-size: 11px !important;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.pf-woo-native-wrap .woocommerce-remove-coupon:hover {
    color: var(--color-accent-yellow) !important;
}

/* =======================================================
   NOTICES (succès / erreur) — ex: cupón appliqué ou refusé.
   Aucun style natif n'existait pour ces 2 classes (seul .woocommerce-info,
   réservé au panier vide, en avait un) : le message WooCommerce par défaut
   remontait donc en blanc/non stylé, hors charte.
   ======================================================= */
/* .woocommerce-message = <div> (un seul message) mais .woocommerce-error =
   <ul><li>...</li></ul> (peut contenir plusieurs erreurs) : le conteneur
   porte le style de carte, chaque <li> reste un bloc simple (pas de flex sur
   le <ul>, qui alignerait plusieurs erreurs côte à côte au lieu de les
   empiler). */
.pf-woo-native-wrap .woocommerce-message,
.pf-woo-native-wrap .woocommerce-error {
    display: block;
    list-style: none;
    background: rgba(46,204,113,0.08) !important;
    border: 1px solid rgba(46,204,113,0.2) !important;
    border-radius: 12px !important;
    color: var(--color-creme-light) !important;
    font-size: 13px !important;
    padding: 14px 20px !important;
    margin: 0 0 20px 0 !important;
    box-shadow: none !important;
}
.pf-woo-native-wrap .woocommerce-message::before,
.pf-woo-native-wrap .woocommerce-error::before {
    display: none !important;
}
.pf-woo-native-wrap .woocommerce-error {
    background: rgba(200,93,50,0.1) !important;
    border-color: rgba(200,93,50,0.3) !important;
}
.pf-woo-native-wrap .woocommerce-error li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pf-woo-native-wrap .woocommerce-error li::before {
    display: none !important;
}
.pf-woo-native-wrap .woocommerce-error li + li {
    margin-top: 8px;
}

/* Lien "¿Deshacer?" (restore-item, notice de suppression d'article) : bleu
   natif WordPress par défaut, hors charte. */
.pf-woo-native-wrap .woocommerce-message a.restore-item {
    color: var(--color-accent-yellow) !important;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.pf-woo-native-wrap .woocommerce-message a.restore-item:hover {
    color: var(--color-creme-light) !important;
}

/* Span interne WooCommerce — s'assure qu'il n'ajoute pas de marge parasite */
.pf-woo-native-wrap .cart_totals table.shop_table tr.fee td .woocommerce-Price-amount,
.pf-woo-native-wrap .cart-collaterals table.shop_table tr.fee td .woocommerce-Price-amount,
.pf-woo-native-wrap .cart_totals table.shop_table tr.cart-subtotal td .woocommerce-Price-amount,
.pf-woo-native-wrap .cart-collaterals table.shop_table tr.cart-subtotal td .woocommerce-Price-amount {
    display: inline !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =======================================================
   MÉTHODES D'EXPÉDITION (zone GT — liste radio)
   ======================================================= */
.woocommerce-shipping-methods {
    list-style: none;
    margin: 0;
    padding: 0;
}
.woocommerce-shipping-methods li {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}
.woocommerce-shipping-methods input[type="radio"] {
    accent-color: var(--color-terracotta);
}
.woocommerce-shipping-destination {
    display: none !important; /* "Shipping to Guatemala." — toujours masqué */
}

/* =======================================================
   CALCULATEUR D'EXPÉDITION (masqué par page-cart.php
   mais conservé ici pour robustesse)
   ======================================================= */
.woocommerce-shipping-calculator { margin-top: 15px !important; text-align: right; }
.shipping-calculator-button { color: var(--color-terracotta) !important; font-size: 12px !important; text-decoration: underline !important; font-weight: 700; }
.shipping-calculator-button:hover { color: var(--color-accent-yellow) !important; }
.woocommerce-shipping-calculator p.form-row { margin-bottom: 10px !important; }
.woocommerce-shipping-calculator input.input-text,
.woocommerce-shipping-calculator select {
    background: rgba(0,0,0,0.3) !important; border: 1px solid rgba(255,255,255,0.1) !important;
    color: var(--color-creme-light) !important; border-radius: 50px !important;
    padding: 10px 15px !important; font-size: 12px; width: 100%; box-sizing: border-box;
}
.woocommerce-shipping-calculator button[name="calc_shipping"] {
    background: rgba(255,255,255,0.1) !important; color: white !important; border: none !important;
    border-radius: 50px !important; padding: 12px 20px !important; font-size: 11px !important;
    text-transform: uppercase; font-weight: 800; margin-top: 5px; width: 100%;
    cursor: pointer; transition: 0.3s;
}
.woocommerce-shipping-calculator button[name="calc_shipping"]:hover { background: var(--color-terracotta) !important; }

/* -------------------------------------------------------
   TOTAL FINAL — séparé des fees par un trait en haut
   ------------------------------------------------------- */
.pf-woo-native-wrap .cart-collaterals table tr.order-total th,
.pf-woo-native-wrap .cart_totals table tr.order-total th {
    color: var(--color-creme-light) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-align: left !important;
    padding: 22px 0 8px 0 !important;   /* ← plus d'espace pour marquer la hiérarchie */
    border-top: 1px solid rgba(255,255,255,0.12) !important;  /* ← trait légèrement plus visible */
    border-bottom: none !important;
    vertical-align: bottom !important;
}

.pf-woo-native-wrap .cart-collaterals table tr.order-total td,
.pf-woo-native-wrap .cart_totals table tr.order-total td {
    color: var(--color-accent-yellow) !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important; /* ← resserre légèrement les grands chiffres */
    text-align: right !important;
    padding: 22px 0 8px 0 !important;
    border-top: 1px solid rgba(255,255,255,0.12) !important;
    border-bottom: none !important;
    white-space: nowrap !important;
    vertical-align: bottom !important;
}

/* =======================================================
   BOUTON FINAL "PAGAR"
   ======================================================= */
.pf-woo-native-wrap .woocommerce a.checkout-button {
    background-color: var(--color-accent-yellow) !important;
    color: var(--bg-main) !important;
    border-radius: 50px !important;
    font-weight: 900 !important;
    font-family: var(--font-main) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 18px !important;
    border: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 10px 25px rgba(242,201,76,0.2);
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 30px !important;
    font-size: 13px !important;
}
.pf-woo-native-wrap .woocommerce a.checkout-button:hover {
    background-color: #FFD54F !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 15px 35px rgba(242,201,76,0.4);
}

/* =======================================================
   ÉTAT PANIER VIDE
   ======================================================= */
.pf-woo-native-wrap .woocommerce-info,
.pf-woo-native-wrap .cart-empty {
    background: transparent !important; border: none !important;
    color: var(--color-creme-light) !important; font-size: 20px !important;
    font-weight: 800 !important; text-align: center; margin-bottom: 20px !important;
    padding: 0 !important; box-shadow: none !important; width: 100%;
}
.pf-woo-native-wrap .woocommerce-info::before,
.pf-woo-native-wrap .cart-empty::before { display: none !important; }
.pf-woo-native-wrap .return-to-shop { text-align: center; width: 100%; margin-top: 20px; }
.pf-woo-native-wrap .woocommerce .return-to-shop a.button {
    background-color: var(--color-accent-yellow) !important; color: var(--bg-main) !important;
    border-radius: 50px !important; font-weight: 900 !important; font-family: var(--font-main) !important;
    text-transform: uppercase; letter-spacing: 1px; padding: 20px 40px !important;
    border: none !important; transition: all 0.3s ease !important;
    box-shadow: 0 10px 25px rgba(242,201,76,0.2) !important;
    display: inline-block !important; width: auto !important; min-width: 250px; font-size: 14px !important;
}
.pf-woo-native-wrap .woocommerce .return-to-shop a.button:hover {
    background-color: #FFD54F !important; transform: translateY(-4px) !important;
    box-shadow: 0 15px 35px rgba(242,201,76,0.4) !important;
}

/* =======================================================
   ZONES EU/US : MASQUAGE COMPLET DU BLOC SHIPPING NATIF
   body.pf-zone-eu / body.pf-zone-us injectés par PHP (filtre body_class) :
   les deux zones désactivent la livraison native WooCommerce au profit de
   frais à plat (cf. inc/woocommerce/zone-shipping.php), donc les deux ont
   la même ligne "Shipping" native vide à masquer.
   Doit venir APRÈS les règles tr.shipping pour gagner la cascade.
   ======================================================= */

/* 1. Masque la ligne tableau tr.shipping */
body.pf-zone-eu .pf-woo-native-wrap .cart-collaterals table tr.shipping,
body.pf-zone-eu .pf-woo-native-wrap .cart_totals table tr.shipping,
body.pf-zone-us .pf-woo-native-wrap .cart-collaterals table tr.shipping,
body.pf-zone-us .pf-woo-native-wrap .cart_totals table tr.shipping {
    display: none !important;
}

/* 2. Masque le message "Enter your address to view shipping options"
   et tout contenu résiduel dans le td de livraison */
body.pf-zone-eu .woocommerce-shipping-totals,
body.pf-zone-eu .woocommerce-shipping-totals td,
body.pf-zone-eu .woocommerce-shipping-totals p,
body.pf-zone-eu td.woocommerce-shipping-totals,
body.pf-zone-us .woocommerce-shipping-totals,
body.pf-zone-us .woocommerce-shipping-totals td,
body.pf-zone-us .woocommerce-shipping-totals p,
body.pf-zone-us td.woocommerce-shipping-totals {
    display: none !important;
}

/* 3. Annule le pseudo-élément ::before du hack de traduction
   (qui afficherait "Costo de envío" même si la ligne est masquée) */
body.pf-zone-eu .pf-woo-native-wrap .cart-collaterals table tr.shipping th::before,
body.pf-zone-eu .pf-woo-native-wrap .cart_totals table tr.shipping th::before,
body.pf-zone-us .pf-woo-native-wrap .cart-collaterals table tr.shipping th::before,
body.pf-zone-us .pf-woo-native-wrap .cart_totals table tr.shipping th::before {
    content: none !important;
}

/* =======================================================
   HACK TRADUCTION "COSTO DE ENVÍO" (zone GT uniquement)
   Remplace le texte natif "Shipping" via pseudo-élément.
   color:transparent plutôt que visibility:hidden : ce dernier masque TOUTE
   la boîte (donc aussi son border-top), ce qui coupait le filet séparateur
   au-dessus du label côté gauche de la ligne (visible seulement côté droit,
   au-dessus de "Gratis").
   ======================================================= */
.pf-woo-native-wrap .cart-collaterals table tr.shipping th {
    font-size: 0 !important;
    color: transparent !important;
}
.pf-woo-native-wrap .cart-collaterals table tr.shipping th::before {
    content: "Costo de envío";
    font-size: 11px !important;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    font-weight: 400;
}

/* Compresse la ligne "Costo de envío" (zone GT) : label et valeur (Gratis +
   note sur 2 lignes) alignés en haut de ligne plutôt que centrés chacun de
   son côté sur une rangée devenue haute à cause du texte multi-ligne — c'est
   ce décalage qui donnait l'impression de 3 lignes de vide. Padding aligné
   sur les autres lignes (subtotal/fee) pour une hauteur cohérente. */
.pf-woo-native-wrap .cart-collaterals table tr.shipping th,
.pf-woo-native-wrap .cart_totals table tr.shipping th,
.pf-woo-native-wrap .cart-collaterals table tr.shipping td,
.pf-woo-native-wrap .cart_totals table tr.shipping td {
    padding: 22px 0 12px 0 !important;
    vertical-align: top !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
}
.pf-woo-native-wrap .cart-collaterals table tr.shipping th,
.pf-woo-native-wrap .cart_totals table tr.shipping th {
    padding-right: 12px !important;
}
.woocommerce-shipping-methods li {
    margin-bottom: 0 !important;
}

/* =======================================================
   ZONE EU — NEUTRALISE woocommerce.css "text-align: left"
   Sélecteur plus long = spécificité supérieure garantie.
   ======================================================= */

body.pf-zone-eu .pf-woo-native-wrap .woocommerce table.shop_table tr.fee th {
    padding: 25px 12px 15px 0 !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    border-bottom: none !important;
}

body.pf-zone-eu .pf-woo-native-wrap .woocommerce table.shop_table tr.fee td {
    text-align: right !important;
    padding: 25px 0 15px 0 !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    border-bottom: none !important;
    white-space: nowrap !important;
}

/* =======================================================
   WOOCOMMERCE CHECKOUT - DESIGN PREMIUM COHÉRENT
   ======================================================= */

.pf-checkout-wrap form.checkout {
    color: var(--color-creme);
    font-family: var(--font-main);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
}

.pf-checkout-wrap .woocommerce-notices-wrapper {
    width: 100%;
    margin-bottom: 20px;
}
/* Même bug que sur /cart/ (cf. .pf-woo-native-wrap .woocommerce-notices-wrapper
   plus haut) : vide la plupart du temps mais avec une margin-bottom fixe,
   ajoutant un vide avant le formulaire même sans aucune notice à afficher. */
.pf-checkout-wrap .woocommerce-notices-wrapper:empty {
    display: none;
}

/* =======================================================
   1. COLONNE GAUCHE : FORMULAIRES
   ======================================================= */
.pf-checkout-wrap #customer_details {
    flex: 1 1 55%;
    min-width: 320px;
}

.pf-checkout-wrap .col2-set .col-1,
.pf-checkout-wrap .col2-set .col-2 {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px;
}

.pf-checkout-wrap h3 {
    color: var(--color-creme-light);
    font-family: var(--font-main);
    text-transform: uppercase;
    font-weight: 900;
    font-size: 16px;
    margin-bottom: 25px;
    letter-spacing: 2px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 15px;
}

.pf-checkout-wrap .woocommerce form .form-row {
    margin-bottom: 15px;
}

.pf-checkout-wrap .woocommerce form .form-row label {
    color: rgba(255,255,255,0.5);
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: block;
}

.pf-checkout-wrap .woocommerce form .form-row label abbr {
    text-decoration: none;
    color: var(--color-terracotta);
}

.pf-checkout-wrap .woocommerce form .form-row input.input-text,
.pf-checkout-wrap .woocommerce form .form-row select,
.pf-checkout-wrap .woocommerce form .form-row textarea {
    background: rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: var(--color-creme-light) !important;
    border-radius: 50px !important;
    padding: 12px 20px !important;
    font-size: 13px;
    width: 100%;
    transition: 0.3s ease;
    box-sizing: border-box;
}

.pf-checkout-wrap .woocommerce form .form-row textarea {
    border-radius: 20px !important;
    min-height: 80px;
}

.pf-checkout-wrap .woocommerce form .form-row input.input-text:focus,
.pf-checkout-wrap .woocommerce form .form-row textarea:focus {
    border-color: var(--color-accent-yellow) !important;
    background: rgba(0,0,0,0.5) !important;
    outline: none;
}

/* Cache le (optional) injecté par WooCommerce */
.woocommerce-checkout .optional {
    display: none !important;
}

/* =======================================================
   2. COLONNE DROITE : RÉSUMÉ DE COMMANDE
   ======================================================= */
.pf-checkout-wrap #order_review_heading {
    display: none !important;
}

.pf-checkout-wrap #order_review {
    flex: 0 0 400px;
    width: 400px;
    position: sticky;
    top: 30px;
    background: var(--bg-card);
    border-radius: 20px;
    padding: 25px !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.05);
}

/* Tableau du résumé */
.pf-checkout-wrap table.shop_table {
    border: none !important;
    width: 100%;
    margin-bottom: 5px !important;
}

.pf-checkout-wrap table.shop_table th,
.pf-checkout-wrap table.shop_table td {
    padding: 8px 0 !important;
    border-top: none !important;
    border-bottom: 1px dashed rgba(255,255,255,0.05) !important;
    color: var(--color-creme-light) !important;
    font-size: 14px;
    background: transparent !important;
}

.pf-checkout-wrap table.shop_table .product-name { font-weight: 700; }
.pf-checkout-wrap table.shop_table .product-total { text-align: right; }

/* =======================================================
   LIGNES INTERMÉDIAIRES : Subtotal + Fee + Shipping
   Labels à gauche, prix à droite — uniformes
   ======================================================= */
.pf-checkout-wrap table.shop_table tr.cart-subtotal th,
.pf-checkout-wrap table.shop_table tr.fee th,
.pf-checkout-wrap table.shop_table tr.shipping th {
    color: rgba(255,255,255,0.4) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 400 !important;
    text-align: left !important;
    border-bottom: none !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    padding: 10px 8px 10px 0 !important;
    vertical-align: middle !important;
}

.pf-checkout-wrap table.shop_table tr.cart-subtotal td,
.pf-checkout-wrap table.shop_table tr.fee td,
.pf-checkout-wrap table.shop_table tr.shipping td {
    color: var(--color-creme-light) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: right !important;
    border-bottom: none !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    padding: 10px 0 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

/* Fix EU : woocommerce.css force text-align:left — on l'écrase sur le span interne */
body.pf-zone-eu .pf-checkout-wrap table.shop_table tr.fee td .woocommerce-Price-amount,
body.pf-zone-eu .pf-checkout-wrap table.shop_table tr.cart-subtotal td .woocommerce-Price-amount {
    display: block !important;
    text-align: right !important;
    width: 100% !important;
    float: right !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
}

/* =======================================================
   TOTAL FINAL — jaune, grand, gras
   ======================================================= */
.pf-checkout-wrap table.shop_table tr.order-total th,
.pf-checkout-wrap table.shop_table tr.order-total td {
    border-bottom: none !important;
    border-top: 1px solid rgba(255,255,255,0.12) !important;
    padding-top: 14px !important;
    padding-bottom: 8px !important;
}

.pf-checkout-wrap table.shop_table tr.order-total th {
    color: var(--color-creme-light) !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    text-align: left !important;
    vertical-align: bottom !important;
}

.pf-checkout-wrap table.shop_table tr.order-total td {
    color: var(--color-accent-yellow) !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    text-align: right !important;
    white-space: nowrap !important;
    vertical-align: bottom !important;
}

/* Fix EU : span .amount du total en jaune et aligné à droite */
body.pf-zone-eu .pf-checkout-wrap table.shop_table tr.order-total td .woocommerce-Price-amount {
    display: block !important;
    text-align: right !important;
    width: 100% !important;
    float: right !important;
    color: var(--color-accent-yellow) !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
}

/* =======================================================
   3. MÉTHODES DE PAIEMENT WOOCOMMERCE
   La liste ul.payment_methods est masquée visuellement
   car les infos bancaires sont injectées via PHP directement
   dans .pf-sidebar-bank-info (woocommerce_review_order_before_submit)
   ======================================================= */
.pf-checkout-wrap #payment {
    background: transparent !important;
    border: none !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

/* Cache la liste native des méthodes — nos infos bancaires PHP la remplacent */
.pf-checkout-wrap #payment ul.payment_methods {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

/* La payment_box native (vide pour nous) */
.pf-checkout-wrap #payment div.payment_box {
    display: none !important;
}

/* =======================================================
   4. INFOS BANCAIRES (.pf-sidebar-bank-info)
   Injectées par pf_bank_info_in_sidebar() dans functions.php
   Structure : GT → Enlace BI + <details> datos/QR + WhatsApp
               EU → Bouton Revolut + <details> IBAN + WhatsApp
   ======================================================= */

.pf-sidebar-bank-info {
    order: 1 !important;
    width: 100% !important;
    margin-top: 10px !important;
    margin-bottom: 20px !important;
    padding-top: 15px !important;
    border-top: 1px dashed rgba(255,255,255,0.1) !important;
}

.pf-sidebar-bank-info h4 {
    color: var(--color-accent-yellow);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 8px 0;
    text-align: center;
}

.pf-bank-subtitle {
    color: rgba(255,255,255,0.5);
    font-size: 11px;
    margin-bottom: 16px;
    text-align: center;
}

/* Bouton principal (Revolut EU / Enlace BI GT) */
.pf-bank-link-btn {
    display: block;
    text-align: center;
    background: transparent;
    border: 1px solid var(--color-accent-yellow);
    color: var(--color-accent-yellow) !important;
    padding: 12px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none !important;
    margin-bottom: 12px;
    transition: 0.3s;
}

.pf-bank-link-btn:hover {
    background: var(--color-accent-yellow);
    color: var(--bg-main) !important;
}

/* <details> dépliable — EU (IBAN) et GT (datos/QR) */
.pf-sidebar-bank-info details {
    width: 100%;
    cursor: pointer;
    margin-bottom: 12px;
}

.pf-sidebar-bank-info details summary {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-creme-light);
    outline: none;
    padding: 10px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    list-style: none;
}

.pf-sidebar-bank-info details summary::-webkit-details-marker {
    display: none;
}

/* Contenu IBAN (EU) */
.pf-sidebar-bank-info .pf-bank-text {
    background: rgba(0,0,0,0.2);
    padding: 14px;
    border-radius: 12px;
    margin-top: 10px;
}

.pf-sidebar-bank-info .pf-bank-text p {
    margin: 4px 0;
    font-size: 12px;
    color: var(--color-creme-light);
    line-height: 1.5;
}

.pf-sidebar-bank-info .pf-bank-text span {
    color: var(--color-terracotta);
    font-weight: 800;
    display: inline-block;
    min-width: 55px;
}

/* Grille datos + QR (GT) */
.pf-bank-grid-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,0,0,0.2);
    padding: 14px;
    border-radius: 12px;
    margin-top: 10px;
    gap: 12px;
}

.pf-bank-qr-mini {
    text-align: center;
    flex-shrink: 0;
    width: 80px;
}

.pf-bank-qr-mini img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    background: white;
    padding: 4px;
    margin-bottom: 4px;
    display: block;
}

.pf-bank-qr-mini span {
    font-size: 9px;
    text-transform: uppercase;
    font-weight: 800;
    color: rgba(255,255,255,0.4);
}

/* WhatsApp — commun GT + EU */
.pf-bank-whatsapp {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(242,201,76,0.08);
    padding: 12px 14px;
    border-radius: 12px;
    border-left: 3px solid var(--color-accent-yellow);
    margin-top: 4px;
}

.pf-bank-whatsapp svg {
    color: var(--color-accent-yellow);
    flex-shrink: 0;
    margin-top: 2px;
}

.pf-bank-whatsapp p {
    margin: 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--color-creme);
}

.pf-bank-whatsapp strong {
    color: var(--color-accent-yellow);
}

/* =======================================================
   5. ORDONNANCEMENT DU BLOC DE PAIEMENT
   ======================================================= */
.pf-checkout-wrap #payment .place-order {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    background: transparent !important;
    padding: 0 !important;
}

/* 1 — Infos bancaires */
.pf-sidebar-bank-info {
    order: 1 !important;
}

/* 2 — Bouton "Realizar pedido" */
.pf-checkout-wrap #place_order {
    order: 2 !important;
    width: 100% !important;
    margin: 0 0 15px 0 !important;
    padding: 20px !important;
    background-color: var(--color-accent-yellow) !important;
    color: var(--bg-main) !important;
    border-radius: 50px !important;
    border: none !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease !important;
    box-shadow: 0 10px 25px rgba(242,201,76,0.2);
}

.pf-checkout-wrap #place_order:hover {
    background-color: #FFD54F !important;
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(242,201,76,0.4);
}

/* 3 — Términos y condiciones */
.pf-checkout-wrap .woocommerce-terms-and-conditions-wrapper {
    order: 3 !important;
    width: 100% !important;
    margin: 15px 0 20px 0 !important;
    padding: 18px !important;
    background: rgba(0,0,0,0.2) !important;
    border-radius: 12px !important;
}

.pf-checkout-wrap .woocommerce-terms-and-conditions-wrapper label.checkbox {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255,255,255,0.8) !important;
    font-size: 13px !important;
    cursor: pointer !important;
    margin: 0 !important;
    text-transform: none !important;
    outline: none !important;
    border: none !important;
}

.woocommerce-terms-and-conditions-checkbox-text {
    display: inline-block !important;
    line-height: 1.4 !important;
    text-align: left !important;
    margin-left: 12px !important;
}

.pf-checkout-wrap input#terms {
    appearance: auto !important;
    accent-color: var(--color-accent-yellow) !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

input#terms {
    accent-color: var(--color-accent-yellow);
    transform: scale(1.1);
    margin-right: 8px !important;
}

.pf-checkout-wrap .woocommerce-terms-and-conditions-wrapper a,
.pf-checkout-reassurance a {
    color: var(--color-accent-yellow) !important;
    text-decoration: underline !important;
    font-weight: 800 !important;
    transition: opacity 0.3s ease;
}

.pf-checkout-wrap .woocommerce-terms-and-conditions-wrapper a:hover,
.pf-checkout-reassurance a:hover {
    opacity: 0.8;
}

.pf-checkout-wrap .woocommerce-terms-and-conditions-wrapper label.checkbox abbr.required {
    color: var(--color-terracotta) !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    margin-left: 4px !important;
}

/* 4 — Política de privacidad */
.pf-checkout-wrap .woocommerce-privacy-policy-text {
    order: 4 !important;
    display: block !important;
    text-align: center !important;
    margin-bottom: 20px !important;
}

.pf-checkout-wrap .woocommerce-privacy-policy-text p {
    font-size: 11px !important;
    color: rgba(255,255,255,0.4) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* 5 — Garantía de tranquilidad */
.pf-checkout-reassurance {
    order: 5 !important;
    width: 100% !important;
    margin-top: 10px !important;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-left: 3px solid var(--color-terracotta);
    border-radius: 12px;
    padding: 15px 20px;
    text-align: left;
}

.pf-checkout-reassurance strong {
    color: var(--color-creme-light);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 11px;
    display: block;
    margin-bottom: 6px;
}

.pf-checkout-reassurance p {
    color: rgba(255,255,255,0.6);
    font-size: 11px;
    line-height: 1.5;
}

/* =======================================================
   6. CHAMPS DE FACTURE (Guatemala uniquement)
   ======================================================= */
.pf-invoice-field {
    display: none !important;
}

.pf-invoice-field.is-visible {
    display: block !important;
    animation: fadeIn 0.3s ease;
}

.pf-invoice-toggle-simple {
    margin-top: 5px !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.pf-invoice-toggle-simple label {
    font-size: 11px !important;
    color: rgba(255,255,255,0.5) !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: 0.3s;
}

.pf-invoice-toggle-simple label:hover {
    color: var(--color-accent-yellow) !important;
}

.pf-invoice-toggle-simple input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    accent-color: var(--color-terracotta);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =======================================================
   7. SELECT2 (MENUS DÉROULANTS PAYS / DÉPARTEMENT)
   ======================================================= */
.select2-container--default .select2-selection--single {
    background-color: rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 50px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-creme-light) !important;
    padding-left: 20px !important;
    padding-right: 40px !important;
    font-size: 13px !important;
    line-height: 48px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow * {
    display: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow::before,
.select2-container--default .select2-selection--single .select2-selection__arrow::after {
    display: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 15px !important;
    width: 24px !important;
    position: absolute !important;
    display: block !important;
    top: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D46A54' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px !important;
    transition: transform 0.3s ease !important;
}

.select2-container--default.select2-container--open .select2-selection__arrow {
    transform: rotate(180deg) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2C94C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

.select2-dropdown {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--color-terracotta) !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    margin-top: 5px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    z-index: 9999 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: rgba(0,0,0,0.2) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: var(--color-creme-light) !important;
    border-radius: 8px !important;
    padding: 8px !important;
}

.select2-results__option {
    padding: 12px 20px !important;
    color: var(--color-creme) !important;
    font-size: 13px !important;
    background-color: transparent !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: rgba(255,255,255,0.05) !important;
    color: var(--color-accent-yellow) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-terracotta) !important;
    color: white !important;
}

/* =======================================================
   8. BADGE DE CONFIANCE
   ======================================================= */
.pf-checkout-trust-badge {
    background: rgba(46,204,113,0.1);
    border: 1px solid rgba(46,204,113,0.2);
    border-radius: 10px;
    padding: 12px 20px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-creme-light);
    font-size: 12px;
}

/* =======================================================
   9. OVERLAY DE CHARGEMENT WOOCOMMERCE
   ======================================================= */
.pf-checkout-wrap .blockUI.blockOverlay {
    background-color: var(--bg-card) !important;
    opacity: 0.6 !important;
}

/* =======================================================
   10. RADIO BOUTONS MÉTHODES DE PAIEMENT
   ======================================================= */
.pf-checkout-wrap input[type="radio"] {
    accent-color: var(--color-terracotta);
}

/* =======================================================
   PAGE DE REMERCIEMENT (THANK YOU PAGE) - FINAL PREMIUM
   ======================================================= */

/* 1. CACHER LE HEADER DU CHECKOUT (Pago, Volver, Flecha, etc.) */
body.woocommerce-order-received .btn-txt-desktop,
body.woocommerce-order-received h1,
body.woocommerce-order-received span[style*="letter-spacing: 4px"],
body.woocommerce-order-received a[href*="cart"],
body.woocommerce-order-received a[href*="carrito"] {
    display: none !important; 
}

/* 2. CACHER LE DESIGN WOOCOMMERCE PAR DÉFAUT */
body.woocommerce-order-received .woocommerce-order > p.woocommerce-notice,
body.woocommerce-order-received .woocommerce-order > ul.woocommerce-order-overview,
body.woocommerce-order-received .woocommerce-order > section.woocommerce-order-details,
body.woocommerce-order-received .woocommerce-order > section.woocommerce-customer-details {
    display: none !important;
}

/* 3. LE DESIGN GÉNÉRAL */
.pf-ty-wrap { 
    margin: 20px auto 80px; 
    font-family: var(--font-main); 
    color: var(--color-creme); 
    max-width: 1000px; 
}

/* En-tête de succès */
.pf-ty-header { 
    background: linear-gradient(135deg, rgba(242, 201, 76, 0.08) 0%, rgba(242, 201, 76, 0.02) 100%); 
    border: 1px solid rgba(242, 201, 76, 0.3); 
    padding: 35px 40px; 
    border-radius: 16px; 
    margin-bottom: 50px; 
    text-align: center; 
    box-shadow: 0 10px 30px rgba(242, 201, 76, 0.05);
}
.pf-ty-header h2 { color: var(--color-accent-yellow); font-size: 26px; font-weight: 800; margin: 0 0 10px 0; letter-spacing: 0.5px; text-transform: uppercase;}
.pf-ty-header p { color: rgba(255,255,255,0.7); margin: 0; font-size: 15px; font-weight: 400;}

/* =======================================================
   1. CACHER LE BADGE "PAGO 100% SEGURO" DU CHECKOUT
   ======================================================= */
body.woocommerce-order-received .pf-checkout-trust-badge {
    display: none !important;
}

/* =======================================================
   🌟 NOUVEAU BLOC D'INSTRUCTIONS PREMIUM (DOUX ET CHIC)
   ======================================================= */
.pf-ty-premium-step {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 35px 40px;
    margin: 0 auto 40px auto;
    max-width: 600px;
    text-align: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.pf-step-subtitle {
    color: var(--color-accent-yellow);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 800;
    display: block;
    margin-bottom: 10px;
}

.pf-ty-premium-step h3 {
    color: var(--color-creme-light);
    font-size: 20px !important;
    font-weight: 800;
    margin: 0 0 15px 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border: none !important;
    padding: 0 !important;
}

.pf-ty-premium-step p {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
    font-weight: 400;
}

.pf-ty-contact-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.pf-btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--color-accent-yellow);
    color: var(--bg-main) !important;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.3s, box-shadow 0.3s;
}

.pf-btn-whatsapp svg {
    width: 18px;
    height: 18px;
}

.pf-btn-whatsapp:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 25px rgba(242, 201, 76, 0.3);
}

.pf-link-email {
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    text-decoration: underline;
    transition: 0.3s;
}

.pf-link-email:hover {
    color: var(--color-terracotta);
}

@media (max-width: 600px) {
    .pf-ty-premium-step { padding: 30px 20px; }
}

/* =======================================================
   BLOC NAVIGATION (BORDURE JAUNE & TEXTE JAUNE)
   ======================================================= */
.pf-ty-buttons-top { 
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap; 
    gap: 15px; 
    margin-top: 30px; 
}

.pf-btn-outline { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; /* Espace entre l'icône/emoji et le texte */
    
    padding: 14px 24px; 
    
    /* LE DESIGN DE BASE (Texte et bordure jaunes, fond transparent) */
    background-color: transparent; 
    color: var(--color-accent-yellow) !important; 
    border: 2px solid var(--color-accent-yellow); 
    
    border-radius: 12px; 
    text-decoration: none !important; 
    font-weight: 800; 
    font-size: 12px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    transition: all 0.3s ease; 
}

/* L'icône prend automatiquement la couleur jaune du texte */
.pf-btn-outline svg {
    stroke: currentColor; 
    transition: all 0.3s ease;
}

/* =======================================================
   LE DESIGN AU SURVOL (HOVER)
   ======================================================= */
.pf-btn-outline:hover { 
    /* Le bouton se remplit en jaune */
    background-color: var(--color-accent-yellow); 
    
    /* Le texte passe en bleu (ou ta couleur primaire) */
    color: var(--color-primary) !important; 
    
    /* Petit effet de soulèvement très sympa */
    transform: translateY(-4px); 
    box-shadow: 0 10px 20px rgba(242, 201, 76, 0.4); /* Ombre jaune qui apparaît au survol */
}

/* =======================================================
   GRILLE ET CARTES (GLASSMORPHISM)
   ======================================================= */
.pf-ty-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 30px; align-items: start; }
.pf-ty-col { display: flex; flex-direction: column; gap: 30px; }

.pf-ty-card { 
    background: rgba(255, 255, 255, 0.02); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px; 
    padding: 30px 35px; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.2); 
    border: 1px solid rgba(255,255,255,0.06); 
}
.pf-ty-card h3 { 
    color: #fff; font-size: 12px; text-transform: uppercase; 
    font-weight: 800; letter-spacing: 2px; 
    border-bottom: 1px solid rgba(255,255,255,0.08); 
    padding-bottom: 15px; margin-top: 0; margin-bottom: 25px; 
}

/* Informations de commande (Gauche) */
.pf-ty-info-list { list-style: none; padding: 0; margin: 0; }
.pf-ty-info-list li { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px dashed rgba(255,255,255,0.08); font-size: 14px; }
.pf-ty-info-list li:last-child { border-bottom: none; padding-bottom: 0; }
.pf-ty-info-list li span { color: rgba(255,255,255,0.5); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 10px; }
.pf-ty-info-list li strong { color: #fff; text-align: right; font-weight: 500;}

/* Reçu d'achat (Droite) */
.ty-items { margin-bottom: 25px; }
.ty-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.ty-item-name strong { color: #fff; font-weight: 600; font-size: 14px; display: block; margin-bottom: 6px;}
.ty-qty { color: var(--color-accent-yellow); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;}
.ty-item-total { color: #fff; font-weight: 600; font-size: 14px;}

/* Lignes Totaux */
.ty-total-line { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; font-size: 12px; color: rgba(255,255,255,0.6); font-weight: 600; text-transform: uppercase; letter-spacing: 1px;}
.ty-total-line.order_total { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 20px; margin-top: 10px; color: #fff; font-size: 14px; }
.ty-total-line.order_total strong { color: var(--color-accent-yellow); font-size: 24px; font-weight: 800; }

/* =======================================================
   🚀 SUPPRESSION DE L'ESPACE GÉANT EN HAUT (THANK YOU)
   ======================================================= */

/* 1. On réduit le padding du conteneur principal sur cette page */
body.woocommerce-order-received .pf-checkout-immersive {
    padding-top: 0px !important;
}

/* 2. On réduit la marge du bloc de contenu principal */
body.woocommerce-order-received .pf-ty-wrap {
    margin-top: 0 !important;
}

/* 3. On réduit la marge interne du header de succès */
body.woocommerce-order-received .pf-ty-header {
    margin-top: 0 !important;
}

/* 4. On s'assure qu'aucun titre caché ne prend de la place */
body.woocommerce-order-received .entry-title,
body.woocommerce-order-received .woocommerce-notice--success {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- Ajustement spécifique Mobile --- */
@media (max-width: 768px) {
    body.woocommerce-order-received .pf-checkout-immersive {
        padding-top: 0px !important;
    }
}

/* =======================================================
   📱 RESPONSIVE MOBILE PREMIUM CART (APP EXPERIENCE - ULTRA COMPACT)
   ======================================================= */

@media (max-width: 900px) {
    
    /* 1. Tuer les espaces fantômes natifs de WooCommerce */
    .pf-woo-native-wrap .woocommerce {
        flex-direction: column;
        gap: 15px !important; /* Espace global réduit au minimum */
    }

    .pf-woo-native-wrap .woocommerce-cart-form,
    .pf-woo-native-wrap table.shop_table {
        margin-bottom: 0 !important; /* Tue la marge de 2em cachée de Woo */
    }

    .pf-woo-native-wrap .woocommerce-notices-wrapper:empty {
        display: none !important; /* Détruit le bloc d'alerte s'il est vide */
        margin: 0 !important;
    }

    .pf-woo-native-wrap .woocommerce-cart-form,
    .pf-woo-native-wrap .cart-collaterals {
        flex: 1 1 100%;
        width: 100% !important;
        max-width: 100%;
        min-width: 0 !important; /* 🔧 Override le min-width: 300px desktop */
        margin-top: 0 !important; 
    }

    /* 2. Carte des totaux ultra-compactée */
    .pf-woo-native-wrap .cart-collaterals {
        position: static !important;
    }
    .pf-woo-native-wrap .cart-collaterals .cart_totals {
        padding: 15px !important; /* Marges de la carte réduites */
    }

    /* =======================================
       TRANSFORMATION DU TABLEAU EN "CARTES"
       ======================================= */
    
    .pf-woo-native-wrap .woocommerce-cart-form__contents, 
    .pf-woo-native-wrap .woocommerce-cart-form__contents tbody, 
    .pf-woo-native-wrap .woocommerce-cart-form__contents tr, 
    .pf-woo-native-wrap .woocommerce-cart-form__contents td {
        display: block;
        width: 100%;
        text-align: left !important;
    }
    
    .pf-woo-native-wrap .woocommerce-cart-form__contents thead { display: none !important; }
    .pf-woo-native-wrap .woocommerce-cart-form__contents td::before { display: none !important; }

    /* 🌟 LA CARTE PRODUIT MOBILE */
    .pf-woo-native-wrap .woocommerce-cart-form__contents tr.cart_item {
        position: relative;
        padding: 12px 0 !important; /* Lignes rapprochées au max */
        display: grid !important;
        grid-template-columns: 70px 1fr; 
        gap: 0 12px; /* 0 en hauteur pour coller les textes */
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    }

    .pf-woo-native-wrap .woocommerce-cart-form__contents td {
        padding: 0 !important;
        border: none !important;
    }

    /* 📸 L'IMAGE */
    .pf-woo-native-wrap .woocommerce-cart-form__contents td.product-thumbnail {
        display: block !important;
        grid-column: 1;
        grid-row: 1 / 4; 
        width: 70px !important; 
        opacity: 1 !important;
    }
    .pf-woo-native-wrap .woocommerce-cart-form__contents td.product-thumbnail a { display: block !important; }
    .pf-woo-native-wrap .woocommerce-cart-form__contents td.product-thumbnail img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        border-radius: 8px !important;
    }

    /* 🏷️ LE TITRE ET LA COULEUR/TAILLE */
    .pf-woo-native-wrap .woocommerce-cart-form__contents td.product-name {
        grid-column: 2;
        grid-row: 1;
        padding-right: 25px !important;
    }
    
    .pf-woo-native-wrap .woocommerce-cart-form__contents td.product-name > a {
        font-size: 14px !important; 
        line-height: 1.2 !important;
        display: block !important;
        margin-bottom: 2px !important; 
        white-space: normal !important; 
    }

    .pf-woo-native-wrap .woocommerce-cart-form__contents td.product-name .variation {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important; 
        margin: 0 !important;
    }
    
    .pf-woo-native-wrap .woocommerce-cart-form__contents td.product-name .variation dt { display: none !important; }
    
    .pf-woo-native-wrap .woocommerce-cart-form__contents td.product-name .variation dd {
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .pf-woo-native-wrap .woocommerce-cart-form__contents td.product-name .variation dd p {
        margin: 0 !important;
        font-size: 12px !important; 
        color: rgba(255,255,255,0.5) !important;
        text-transform: capitalize !important;
        display: inline-block !important;
    }

    .pf-woo-native-wrap .woocommerce-cart-form__contents td.product-price { display: none !important; }

    /* 🔢 La Quantité */
    .pf-woo-native-wrap .woocommerce-cart-form__contents td.product-quantity {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
        margin-top: 4px !important;
    }

    /* 💵 Le Sous-total */
    .pf-woo-native-wrap .woocommerce-cart-form__contents td.product-subtotal {
        grid-column: 2;
        grid-row: 3;
        align-self: center;
        color: var(--color-accent-yellow) !important;
        font-size: 14px !important;
        margin-top: 2px !important;
    }

    /* ❌ La Croix */
    .pf-woo-native-wrap .woocommerce-cart-form__contents td.product-remove {
        position: absolute;
        top: 10px; 
        right: 0;
        width: auto !important;
        z-index: 10;
    }
    .pf-woo-native-wrap .woocommerce-cart-form__contents a.remove {
        font-size: 18px !important;
        width: 24px;
        height: 24px;
    }

    /* =======================================
       COUPON SUR UNE SEULE LIGNE (MOBILE)
       ======================================= */
    .pf-woo-native-wrap .woocommerce-cart-form__contents .coupon {
        display: flex !important;
        flex-direction: row !important; /* 🌟 Force la mise en ligne horizontale */
        flex-wrap: nowrap !important; /* Empêche de passer à la ligne */
        align-items: center !important;
        gap: 8px !important; /* Espace entre le champ et le bouton */
        margin-top: 15px !important;
        padding-bottom: 0 !important;
        border: none !important;
    }
    
    .pf-woo-native-wrap .woocommerce-cart-form__contents .coupon input.input-text {
        flex: 1 !important; /* 🌟 Le champ prend tout l'espace libre */
        width: 100% !important; 
        padding: 10px 15px !important; 
        font-size: 12px !important;
        margin: 0 !important;
    }
    
    .pf-woo-native-wrap .woocommerce button.button[name="apply_coupon"] {
        flex: 0 0 auto !important; /* 🌟 Le bouton prend juste la place de son texte */
        width: auto !important;
        padding: 10px 15px !important; 
        font-size: 11px !important;
        margin: 0 !important;
        white-space: nowrap !important; /* Empêche le texte "Aplicar" de se couper sur 2 lignes */
    }
    
    /* Alertes (Design compact) */
    .pf-woo-native-wrap .woocommerce-message,
    .pf-woo-native-wrap .woocommerce-error,
    .pf-woo-native-wrap .woocommerce-info {
        flex-direction: column;
        align-items: stretch !important;
        text-align: center;
        gap: 8px;
        font-size: 12px;
        padding: 10px 12px !important;
        margin-bottom: 15px !important; /* Divisé par 2 */
    }
    
    .btn-txt-desktop { display: none !important; }
    
    /* =======================================
       RÉTABLISSEMENT DES TOTAUX (Subtotal / Envío)
       ======================================= */
    .pf-woo-native-wrap .cart-collaterals table.shop_table { display: table !important; }
    .pf-woo-native-wrap .cart-collaterals table.shop_table tbody { display: table-row-group !important; }
    .pf-woo-native-wrap .cart-collaterals table.shop_table tr { display: table-row !important; }
    .pf-woo-native-wrap .cart-collaterals table.shop_table th,
    .pf-woo-native-wrap .cart-collaterals table.shop_table td { display: table-cell !important; }
    
    /* 🌟 C'EST ICI QU'ON TUE L'ANGLAIS CACHÉ DE WOOCOMMERCE SUR MOBILE */
    .pf-woo-native-wrap .cart-collaterals table.shop_table td::before { display: none !important; }
}

/* =======================================================
   📱 VERSION RESPONSIVE (ULTRA-OPTIMISÉE MOBILE)
   ======================================================= */

/* --- TABLETTES & PETITS ÉCRANS (< 950px) --- */
@media (max-width: 950px) {
    /* 1. Formulaire et Panier s'empilent en 1 colonne */
    .pf-checkout-wrap form.checkout {
        flex-direction: column !important; 
        gap: 40px !important;
    }

    .pf-checkout-wrap #customer_details, 
    .pf-checkout-wrap #order_review {
        flex: 1 1 100% !important; 
        width: 100% !important; 
        max-width: 100% !important;
        min-width: 0 !important; /* 🔧 Override le min-width: 320px desktop
                                       qui force le débordement sur petits écrans */
    }

    /* 2. Désactiver le "Sticky" et ajuster la carte noire */
    .pf-checkout-wrap #order_review {
        position: relative !important;
        top: 0 !important;
        padding: 25px 20px !important; 
    }
}

/* --- TÉLÉPHONES (< 768px) --- */
@media (max-width: 768px) {
    
    /* 🌟 FIX MAGIQUE iOS : Empêche le zoom auto insupportable sur iPhone */
    .pf-checkout-wrap .woocommerce form .form-row input.input-text,
    .pf-checkout-wrap .woocommerce form .form-row select,
    .pf-checkout-wrap .woocommerce form .form-row textarea,
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        font-size: 16px !important; /* Taille stricte pour bloquer le zoom iOS */
        padding: 14px 20px !important; /* Plus de hauteur pour les gros doigts */
    }
    
    .select2-container--default .select2-selection--single {
        height: 52px !important; /* Menu déroulant plus grand */
    }

    /* 3. En-tête : Titre plus petit et on cache le texte "Volver" pour ne garder que la flèche */
    .pf-checkout-immersive h1 { font-size: 32px !important; }
    .btn-txt-desktop { display: none !important; }
    
    /* 4. Réduire les titres de sections pour gagner de la hauteur */
    .pf-checkout-wrap h3 { font-size: 14px !important; margin-bottom: 20px !important; }

    /* 5. Optimisation du bloc d'infos bancaires */
    .pf-bank-grid-compact {
        flex-direction: column !important; 
        text-align: center !important;
        gap: 15px !important;
        padding: 20px 15px !important;
    }

    .pf-bank-text span {
        width: 100% !important; /* Le libellé passe au-dessus de la valeur */
        display: block !important;
        margin-bottom: 2px !important;
        font-size: 11px !important;
    }
    
    .pf-bank-text p { margin-bottom: 12px !important; font-size: 14px !important; }

    .pf-bank-qr-mini {
        width: 100px !important; /* QR un peu plus grand pour être scanné sur l'écran */
        margin: 10px auto 0 auto !important;
    }

    /* 6. Bouton de paiement (Zone de clic massive) */
    .pf-checkout-wrap #place_order {
        padding: 22px 10px !important;
        font-size: 15px !important;
        border-radius: 15px !important; /* Forme "Bouton d'Appli" (Apple Pay style) convertit mieux sur mobile */
    }
}

/* --- TRÈS PETITS TÉLÉPHONES (iPhone SE etc. < 400px) --- */
@media (max-width: 400px) {
    .pf-checkout-wrap table.shop_table .order-total td { font-size: 24px !important; }
    .pf-checkout-wrap table.shop_table th, 
    .pf-checkout-wrap table.shop_table td { font-size: 13px !important; }
}

/* Texte d'expédition : nowrap UNIQUEMENT en desktop pour préserver la mise en page
   de la sidebar de droite. Sur mobile, on autorise le retour à la ligne sinon
   l'adresse longue déborde et pousse tout le checkout en overflow horizontal. */
@media (min-width: 951px) {
    .woocommerce-shipping-destination {
        white-space: nowrap !important;
        display: block !important;
    }
    .pf-checkout-wrap table.shop_table tr.shipping td {
        white-space: nowrap !important;
    }
}

/* Sur mobile : retour à la ligne normal + display block pour le span */
@media (max-width: 950px) {
    .woocommerce-shipping-destination {
        white-space: normal !important;
        display: block !important;
        word-wrap: break-word;
    }
    .pf-checkout-wrap table.shop_table tr.shipping td {
        white-space: normal !important;
        word-wrap: break-word;
    }
}

/* 🌟 CENTRER LE TITRE ET LE SOUS-TITRE DE LA BANQUE */
.pf-sidebar-bank-info h4,
.pf-bank-subtitle {
    text-align: center !important;
}

/* =======================================================
   📱 RESPONSIVE PREMIUM (CHECKOUT & THANK YOU)
   ======================================================= */

/* --- TABLETTES & LAPTOPS ( < 1024px ) --- */
@media (max-width: 1024px) {
    .pf-checkout-wrap form.checkout,
    .pf-ty-grid {
        gap: 30px !important;
    }
}

/* --- TRANSITION MOBILE ( < 950px ) --- */
@media (max-width: 950px) {
    /* Empilement vertical */
    .pf-checkout-wrap form.checkout,
    .pf-ty-grid {
        flex-direction: column !important;
        display: flex !important;
    }

    .pf-checkout-wrap #customer_details, 
    .pf-checkout-wrap #order_review,
    .pf-ty-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* On enlève le sticky pour que le panier suive le flux */
    .pf-checkout-wrap #order_review {
        position: relative !important;
        top: 0 !important;
    }

    /* Inversion sur mobile : On veut voir ce qu'on achète (le résumé) AVANT de payer */
    /* Note : Optionnel, mais recommandé pour l'UX mobile */
    .pf-checkout-wrap form.checkout {
        display: flex;
        flex-direction: column;
    }
    .pf-checkout-wrap #order_review {
        order: 2; /* Le résumé passe après les infos de livraison */
    }
}

/* --- SMARTPHONES ( < 768px ) --- */
@media (max-width: 768px) {
    
    /* 🌟 ANTI-ZOOM iOS & TOUCH COMFORT */
    .pf-checkout-wrap .woocommerce form .form-row input.input-text,
    .pf-checkout-wrap .woocommerce form .form-row select,
    .pf-checkout-wrap .woocommerce form .form-row textarea,
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        font-size: 16px !important; /* Indispensable pour éviter le zoom forcé sur iPhone */
        padding: 14px 18px !important;
    }

    .select2-container--default .select2-selection--single {
        height: 52px !important;
    }

    /* 🏎️ EN-TÊTE ÉPURÉ */
    .pf-checkout-immersive h1 {
        font-size: 30px !important;
        letter-spacing: -1px !important;
    }
    .btn-txt-desktop { display: none !important; } /* On ne garde que la flèche */

    /* 🛡️ BADGE DE CONFIANCE COMPACT */
    .pf-checkout-trust-badge {
        flex-direction: column;
        text-align: center;
        padding: 15px;
        font-size: 11px;
    }

    /* 🏦 BLOC BANQUE : STACK VERTICAL */
    .pf-bank-grid-compact {
        flex-direction: column !important;
        gap: 20px !important;
        padding: 20px !important;
    }
    
    .pf-bank-text p {
        font-size: 14px !important;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        padding-bottom: 8px;
    }

    .pf-bank-qr-mini {
        width: 120px !important;
        margin: 10px auto !important;
    }

    /* ✨ THANK YOU PAGE : PREMIUM STEP */
    .pf-ty-header {
        padding: 30px 20px !important;
    }

    .pf-ty-premium-step {
        padding: 25px 20px !important;
        margin-bottom: 30px !important;
    }

    .pf-btn-whatsapp {
        width: 100%; /* Bouton pleine largeur pour le pouce */
        justify-content: center;
    }

    /* 💰 BOUTON DE PAIEMENT "APP STYLE" */
    .pf-checkout-wrap #place_order {
        padding: 22px !important;
        font-size: 16px !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 30px rgba(242, 201, 76, 0.2) !important;
    }
}

/* --- ULTRA-SMALL ( < 380px ) --- */
@media (max-width: 380px) {
    .pf-checkout-immersive h1 { font-size: 26px !important; }
    .pf-ty-header h2 { font-size: 20px !important; }
    .pf-ty-buttons-top { gap: 10px !important; }
    .pf-btn-outline { padding: 10px 15px !important; font-size: 10px !important; }
}

/* ==========================================================================
   CEINTURE DE SÉCURITÉ MOBILE — CART & CHECKOUT
   ==========================================================================
   Filet de sécurité ultime : même si un futur élément (input avec valeur très
   longue, message d'erreur WooCommerce, contenu dynamique) tente de déborder,
   il sera contenu dans le viewport. Aucun overflow horizontal possible.
   ========================================================================== */
@media (max-width: 950px) {
    .pf-cart-immersive,
    .pf-checkout-immersive {
        max-width: 100vw;
        overflow-x: hidden;
    }

    .pf-woo-native-wrap,
    .pf-checkout-wrap {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* ==========================================================================
   PASSERELLE PLEIN ÉCRAN — BOLSA DE ALGODÓN (avant contenu du panier)
   Un seul écran, une seule décision. Doit tenir dans un viewport desktop
   sans scroll (voir mémoire feedback_no_scroll_desktop) : le budget hauteur
   de chaque règle ci-dessous est dimensionné pour ~700px de haut ; la media
   query "short viewport" en fin de bloc resserre encore pour les fenêtres
   plus basses, et l'overflow-y:auto en tout dernier recours ne sert que de
   filet de sécurité, jamais l'état visé par défaut.
   ========================================================================== */
.pf-bag-gate {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(4,10,14,0.74);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 1;
    transition: opacity 0.35s ease;
    overflow-y: auto;
}

.pf-bag-gate.is-leaving {
    opacity: 0;
    pointer-events: none;
}

.pf-bag-gate.is-hidden {
    display: none;
}

.pf-bag-gate__inner {
    position: relative;
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%), var(--bg-card, #142832);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 28px;
    padding: 44px 36px 36px 36px;
    box-shadow: 0 40px 90px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.02) inset;
}

.pf-bag-gate__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--color-creme-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pf-bag-gate__close:hover {
    background: rgba(255,255,255,0.12);
    color: var(--color-creme-light);
}

.pf-bag-gate__eyebrow {
    display: inline-block;
    font-family: var(--font-main);
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-terracotta);
    margin-bottom: 18px;
}

/* Même traitement que la boîte produit de la playera (.compact-stage,
   css/shop.css) : fond radial plein, pas un glow translucide — crème sur
   fond bleu (var(--color-primary)), navy sur fond crème, cf. .mode-navy. */
.pf-bag-gate__visual {
    width: 168px;
    height: 168px;
    border-radius: 20px;
    background: var(--visual-bg, radial-gradient(circle, rgba(255,255,255,0.08) 0%, var(--color-primary) 90%));
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    transition: background 0.25s ease;
}

.pf-bag-gate__visual img {
    height: 92%;
    width: auto;
    max-width: 96%;
    object-fit: contain;
    filter: drop-shadow(0 14px 24px rgba(0,0,0,0.35));
    transition: opacity 0.2s ease;
}

.pf-bag-gate__title {
    font-family: var(--font-main);
    font-size: 24px;
    font-weight: 900;
    color: var(--color-creme-light);
    margin: 0 0 14px 0;
    line-height: 1.15;
    text-wrap: balance;
}

.pf-bag-gate__benefits {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--color-creme-dim);
    opacity: 0.65;
    margin: 0 0 28px 0;
}

.pf-bag-gate__colors {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 26px;
}

.pf-bag-gate__color-label {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-creme-dim);
    opacity: 0.7;
}

.pf-bag-gate__swatches {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pf-bag-swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--swatch-color);
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
}

.pf-bag-swatch:hover {
    transform: scale(1.08);
}

.pf-bag-swatch.is-active {
    border-color: var(--color-accent-yellow);
    box-shadow: 0 0 0 1px var(--color-accent-yellow), 0 0 12px rgba(242,201,76,0.5);
    transform: scale(1.1);
}

.pf-bag-gate__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 320px;
}

.pf-bag-gate__accept {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    font-family: var(--font-main);
    font-weight: 900;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-creme-light);
    background-color: var(--color-terracotta);
    border: none;
    border-radius: 50px;
    padding: 16px 24px;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(200,93,50,0.25);
    transition: all 0.3s ease;
}

.pf-bag-gate__accept:hover:not(:disabled) {
    background-color: #D9703F;
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(200,93,50,0.4);
}

.pf-bag-gate__accept:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

.pf-bag-gate__price {
    font-weight: 800;
    opacity: 0.9;
    white-space: nowrap;
}

.pf-bag-gate__price .woocommerce-Price-amount { color: inherit; }

.pf-bag-gate__skip {
    background: transparent;
    border: none;
    color: var(--color-creme-dim);
    font-family: var(--font-main);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    padding: 6px;
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

.pf-bag-gate__skip:hover {
    opacity: 1;
    color: var(--color-creme-light);
}

@media (max-width: 480px) {
    .pf-bag-gate__inner { padding: 36px 24px 28px 24px; border-radius: 22px; }
    .pf-bag-gate__visual { width: 140px; height: 140px; }
    .pf-bag-gate__title { font-size: 21px; }
}

/* Filet de sécurité pour les petites hauteurs (laptops bas de gamme, fenêtres
   réduites) : resserre les marges avant de laisser overflow-y prendre le relais. */
@media (max-height: 700px) {
    .pf-bag-gate__inner { padding: 30px 32px 26px 32px; }
    .pf-bag-gate__visual { width: 120px; height: 120px; margin-bottom: 14px; }
    .pf-bag-gate__eyebrow { margin-bottom: 10px; }
    .pf-bag-gate__benefits { margin-bottom: 18px; }
    .pf-bag-gate__colors { margin-bottom: 18px; }
}

/* ==========================================================================
   RAPPEL DISCRET — laissé dans le panier une fois la passerelle déclinée.
   Volontairement minimal (une ligne) : ne doit jamais rivaliser visuellement
   avec le tableau du panier, juste garder la porte ouverte.
   ========================================================================== */
.pf-bag-nudge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 18px 0 26px 0;
    padding: 10px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px dashed rgba(255,255,255,0.14);
    border-radius: 12px;
    min-width: 0;
}

.pf-bag-nudge.is-hidden {
    display: none;
}

.pf-bag-nudge__text {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-creme-dim);
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.pf-bag-nudge__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid rgba(242,201,76,0.35);
    color: var(--color-accent-yellow);
    font-family: var(--font-main);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 7px 14px;
    border-radius: 50px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.pf-bag-nudge__cta:hover {
    background: rgba(242,201,76,0.1);
    border-color: var(--color-accent-yellow);
}

.pf-bag-nudge__price {
    opacity: 0.75;
    font-weight: 700;
}