/* ==========================================================
   BANANA LOVER · woo.css
   Habillage des pages WooCommerce classiques (panier, commande,
   compte, boutique) aux couleurs de la marque (thème sombre).
   Chargé uniquement sur les pages Woo (voir inc/woocommerce.php).
   ========================================================== */

/* ---------- Conteneur de page ---------- */
.page-main{max-width:var(--container);margin:0 auto;padding:130px var(--pad) 90px;min-height:60vh}
.page-main.is-checkout{max-width:1180px}
.page-head{margin-bottom:36px}
.page-head h1{font-family:var(--font-display);font-weight:600;font-size:clamp(30px,3.6vw,44px);letter-spacing:-.02em}

/* ---------- Notices ---------- */
.woocommerce-message,.woocommerce-error,.woocommerce-info,.woocommerce-noreviews{
  list-style:none;background:var(--surface-raised);border:1px solid var(--border-subtle);
  border-radius:var(--radius-m);padding:16px 18px;margin:0 0 22px;
  font:500 14.5px var(--font-body);color:var(--text-primary);display:flex;flex-wrap:wrap;align-items:center;gap:12px}
/* On neutralise l'icône positionnée en absolu de WooCommerce (elle chevauchait
   le texte) et on la remplace par une pastille alignée en flex. */
.woocommerce-info::before,.woocommerce-noreviews::before{content:none}
.woocommerce-message::before,.woocommerce-error::before{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;position:static;margin:0;
  width:22px;height:22px;border-radius:50%;font-family:var(--font-display);font-weight:700;font-size:14px;line-height:1}
.woocommerce-message{background:rgba(46,179,186,.08);border-color:rgba(46,179,186,.38)}
.woocommerce-message::before{content:"✓";background:var(--bl-teal-2);color:var(--bl-noir)}
/* Erreur : alerte visible sans barre latérale (fond + bordure rosés, pastille « ! »). */
.woocommerce-error{background:rgba(215,22,91,.1);border-color:rgba(215,22,91,.5)}
.woocommerce-error::before{content:"!";background:var(--bl-pink);color:var(--bl-blanc)}
.woocommerce-message a,.woocommerce-error a,.woocommerce-info a{color:var(--bl-pink-2)}
.woocommerce-message .button,.woocommerce-error .button,.woocommerce-info .button{margin-left:auto}

/* ---------- Boutons ---------- */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce .button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:transparent;color:var(--text-primary);border:1.5px solid var(--border-strong);
  border-radius:var(--radius-m);font-family:var(--font-display);font-weight:600;font-size:14.5px;
  letter-spacing:.01em;padding:14px 24px;line-height:1;cursor:pointer;text-transform:none;
  transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,.woocommerce .button:hover{
  border-color:var(--bl-blanc);color:var(--bl-blanc);background:rgba(251,248,249,.04);transform:translateY(-1px)}
/* Boutons primaires (validation, commande) */
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,
.woocommerce .checkout-button,.woocommerce #place_order,.woocommerce .wc-forward.checkout-button{
  background:var(--accent);color:var(--bl-blanc);border-color:var(--accent);
  box-shadow:0 10px 30px rgba(215,22,91,.32)}
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover,
.woocommerce .checkout-button:hover,.woocommerce #place_order:hover{
  background:var(--accent-hover);border-color:var(--accent-hover);color:var(--bl-blanc);
  transform:translateY(-2px);box-shadow:0 14px 38px rgba(215,22,91,.5)}
.woocommerce .button:disabled,.woocommerce .button.disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}

/* ---------- Champs de formulaire ---------- */
.woocommerce form .form-row{margin:0 0 16px}
.woocommerce form .form-row label,.woocommerce-account .woocommerce label,
.woocommerce-checkout label{display:block;margin-bottom:7px;font:600 12.5px var(--font-display);
  letter-spacing:.04em;color:var(--text-secondary)}
.woocommerce .required{color:var(--bl-pink);border:0}
/* Rustine visuelle : affiche « * » sur le téléphone tant que l'OPcache sert
   l'ancien PHP (le champ est déjà rendu obligatoire côté code, voir inc/checkout.php).
   Ne cible QUE l'état « pas encore requis » : dès que WooCommerce ajoute
   .validate-required (PHP à jour après flush OPcache), ces règles se désactivent
   et le vrai <abbr class="required"> reprend la main (pas de double « ** »).
   ⚠ Cosmétique uniquement : n'impose pas la saisie tant que le PHP n'est pas actif. */
#billing_phone_field:not(.validate-required) .optional{display:none}
#billing_phone_field:not(.validate-required)>label::after{content:" *";color:var(--bl-pink)}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce #order_comments,
.woocommerce input[type=text],.woocommerce input[type=email],
.woocommerce input[type=tel],.woocommerce input[type=password],
.woocommerce input[type=number],.woocommerce select{
  width:100%;background:var(--surface-raised);border:1.5px solid var(--border-subtle);
  border-radius:var(--radius-m);color:var(--text-primary);padding:12px 14px;
  font:400 15px var(--font-body);transition:border-color var(--dur-fast)}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce input:focus,.woocommerce select:focus{outline:none;border-color:var(--field-focus);box-shadow:0 0 0 3px var(--field-focus-ring)}
.woocommerce ::placeholder{color:var(--text-faint)}
.woocommerce form .form-row.woocommerce-invalid input.input-text{border-color:var(--bl-pink)}

/* select2 (pays / état) au thème sombre */
.select2-container--default .select2-selection--single{background:var(--surface-raised)!important;
  border:1.5px solid var(--border-subtle)!important;border-radius:var(--radius-m)!important;height:46px!important}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--text-primary)!important;line-height:44px!important;padding-left:12px!important}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:44px!important}
.select2-dropdown{background:var(--surface-overlay)!important;border:1px solid var(--border-subtle)!important;color:var(--text-primary)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--selected)!important}
.select2-search--dropdown .select2-search__field{background:var(--surface-raised)!important;
  border:1px solid var(--border-subtle)!important;color:var(--text-primary)!important}

/* ---------- Tableaux (panier, récap commande) ---------- */
/* Des styles globaux (layout theme.json) forcent display:grid sur les éléments
   de bloc, ce qui casse les <table>. On rétablit explicitement le rendu tableau. */
.woocommerce table.shop_table{display:table!important}
.woocommerce table.shop_table thead{display:table-header-group}
.woocommerce table.shop_table tbody{display:table-row-group}
.woocommerce table.shop_table tfoot{display:table-footer-group}
.woocommerce table.shop_table tr{display:table-row}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{display:table-cell}
.woocommerce table.shop_table{width:100%;border:1px solid var(--border-subtle);border-radius:var(--radius-l);
  border-collapse:separate;border-spacing:0;overflow:hidden;background:var(--surface-raised);margin:0}
.woocommerce table.shop_table th{font:600 12px var(--font-display);letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);padding:16px 18px;border-bottom:1px solid var(--border-strong);text-align:left}
.woocommerce table.shop_table td{padding:16px 18px;border-top:1px solid var(--border-subtle);
  color:var(--text-secondary);vertical-align:middle;background:transparent}
.woocommerce table.shop_table tbody tr:first-child td{border-top:0}
.woocommerce td.product-price,.woocommerce td.product-subtotal,.woocommerce .amount{color:var(--text-primary);font-weight:600}
/* Bouton « supprimer » générique (mini-panier, etc.) : rond discret. */
.woocommerce a.remove{color:var(--text-faint)!important;font-size:20px;line-height:1;width:24px;height:24px;
  border-radius:50%;display:inline-grid;place-items:center;transition:color var(--dur-fast),background var(--dur-fast)}
.woocommerce a.remove:hover{color:var(--bl-blanc)!important;background:var(--bl-pink)}

/* Quantité (input number) */
.woocommerce .quantity input.qty{width:72px;background:var(--surface-page);border:1.5px solid var(--border-subtle);
  border-radius:var(--radius-m);color:var(--text-primary);padding:10px;text-align:center;
  font:600 15px var(--font-display);-moz-appearance:textfield}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---------- Panier : ligne produit fluide ---------- */
.bl-cart-table td{padding:22px 18px;vertical-align:middle}
.bl-cart-table th.product-price,.bl-cart-table td.product-price,
.bl-cart-table th.product-subtotal,.bl-cart-table td.product-subtotal{text-align:right;white-space:nowrap;width:130px}
.bl-cart-table th.product-quantity,.bl-cart-table td.product-quantity{text-align:center;width:132px}
.bl-cart-table td.product-subtotal .amount{font-size:16px;color:var(--bl-blanc)}

.bl-cart-line{display:flex;align-items:center;gap:18px}
.bl-cart-thumb{flex:0 0 auto;display:block;width:112px;height:112px;border-radius:var(--radius-m);overflow:hidden;background:var(--bl-blanc)}
/* !important : une règle globale img{height:auto} empêchait la photo de remplir
   le cadre (elle restait à sa taille naturelle, en haut à gauche). */
.bl-cart-thumb img{width:100%!important;height:100%!important;max-width:100%!important;object-fit:cover;object-position:center;display:block;margin:0}
.bl-cart-info{display:flex;flex-direction:column;min-width:0}
.bl-cart-title{font-family:var(--font-display);font-weight:600;font-size:17px;line-height:1.25;color:var(--text-primary);transition:color var(--dur-fast)}
a.bl-cart-title:hover{color:var(--bl-pink-2)}
.bl-cart-info .variation{margin:6px 0 0;font:400 13.5px/1.5 var(--font-body);color:var(--text-faint);display:flex;flex-wrap:wrap;gap:2px 6px}
.bl-cart-info .variation dt{margin:0;font-weight:600}
.bl-cart-info .variation dd,.bl-cart-info .variation dd p{margin:0}
.woocommerce a.remove.bl-cart-remove{width:auto;height:auto;margin:12px 0 0;padding:0;border-radius:0;background:none;
  display:inline-flex;align-items:center;gap:5px;text-transform:none;letter-spacing:.02em;
  font:600 12.5px var(--font-body)!important;color:var(--text-faint)!important}
.woocommerce a.remove.bl-cart-remove span{font-size:17px;line-height:0}
.woocommerce a.remove.bl-cart-remove:hover{color:var(--bl-pink)!important;background:none}

/* ---------- Panier : mise en page ---------- */
.woocommerce-cart .woocommerce{display:grid;grid-template-columns:1fr;gap:36px}
.woocommerce-cart .woocommerce-cart-form{min-width:0}
/* WooCommerce fait flotter les totaux à droite par défaut : on l'annule à
   TOUTES les largeurs (le grid ci-dessous les repositionne en desktop). Sans
   ça, sous 1000px les totaux partaient à droite et la page devenait bancale. */
.woocommerce-cart .cart-collaterals,.woocommerce-cart .cart_totals,.woocommerce-cart .cross-sells{float:none!important;width:auto!important;margin-left:0;margin-right:0}
.bl-cart-table td.actions{padding-top:24px}
.bl-cart-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.bl-cart-actions .coupon{display:flex;gap:10px;flex:1 1 340px;min-width:0;max-width:480px}
.bl-cart-actions .coupon input{flex:1;min-width:0;height:52px;background:var(--surface-page);border:1.5px solid var(--border-subtle);
  border-radius:var(--radius-m);color:var(--text-primary);padding:0 16px;font:500 15px var(--font-body);transition:border-color var(--dur-fast)}
.bl-cart-actions .coupon input::placeholder{color:var(--text-faint)}
.bl-cart-actions .coupon input:focus{outline:none;border-color:var(--field-focus)}
.bl-cart-actions .button{height:52px;padding:0 22px;white-space:nowrap}
.woocommerce-cart .cart_totals{background:var(--surface-raised);border:1px solid var(--border-subtle);
  border-radius:var(--radius-l);padding:26px}
.woocommerce-cart .cart_totals h2{font-family:var(--font-display);font-weight:600;font-size:22px;margin-bottom:16px}
.woocommerce-cart .cart_totals table.shop_table{border:0;background:transparent;border-radius:0}
.woocommerce-cart .cart_totals table th,.woocommerce-cart .cart_totals table td{padding:12px 0;border-top:1px solid var(--border-subtle)}
.woocommerce-cart .cart_totals tr.order-total td .amount{font-size:20px;color:var(--bl-blanc)}
.woocommerce-cart .wc-proceed-to-checkout{padding:20px 0 0}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button{width:100%;height:58px;font-size:16px}
/* Le wrapper de notices (souvent vide) ne doit pas occuper une cellule de grille */
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper{grid-column:1 / -1}
@media(min-width:1000px){
  .woocommerce-cart .woocommerce{grid-template-columns:1.6fr 1fr;align-items:start}
  .woocommerce-cart .woocommerce-cart-form{grid-column:1;grid-row:2}
  .woocommerce-cart .cart-collaterals{grid-column:2;grid-row:2;position:sticky;top:100px}
  .woocommerce-cart .cart-collaterals,.woocommerce-cart .cart_totals{width:100%!important;float:none!important}
}

/* ---------- Checkout : mise en page ---------- */
.woocommerce-checkout #customer_details{margin-bottom:8px}
.woocommerce-checkout h3,.woocommerce-checkout #order_review_heading{
  font-family:var(--font-display);font-weight:600;font-size:20px;margin:0 0 18px;letter-spacing:-.01em}
.woocommerce-checkout #payment{background:var(--surface-raised);border:1px solid var(--border-subtle);
  border-radius:var(--radius-l);padding:22px;margin-top:16px}
.woocommerce-checkout #payment ul.payment_methods{border:0;padding:0;margin:0 0 14px;list-style:none}
.woocommerce-checkout #payment ul.payment_methods li{margin-bottom:10px;color:var(--text-secondary)}
.woocommerce-checkout #payment div.payment_box{background:var(--surface-overlay);color:var(--text-secondary);
  border-radius:var(--radius-m);font:400 13.5px var(--font-body);padding:18px;border:1px solid var(--border-subtle)}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--surface-overlay)}
/* Stripe : les formulaires de carte sont des <fieldset> qui gardent la bordure
   blanche du navigateur (2px #efefef) : elle contraste trop et serre les champs
   (y compris le petit encadré de la case « enregistrer », un fieldset sans
   classe). On retire la bordure de TOUS les fieldset de #payment ; l'air vient
   du padding du payment_box ci-dessus. */
.woocommerce-checkout #payment fieldset,
.woocommerce-checkout #payment .wc-stripe-elements-field{border:0;margin:0;padding:0;min-width:0}
.woocommerce-checkout #payment .wc-stripe-upe-element,
.woocommerce-checkout #payment .StripeElement{margin-top:4px}
/* Boutons express (Apple Pay / Google Pay) empiles trop serres (risque de
   mis-tap au doigt). ATTENTION : le conteneur est force en display:block par le
   gating mode-livraison plus bas, donc `gap` (flex only) serait inerte. On aere
   avec une marge verticale sur le 2e bouton (Google Pay), qui marche en block
   comme en flex. Selecteur d'adjacence : ne s'applique que si les DEUX boutons
   sont presents (jamais d'espace en trop quand un seul est affiche). */
#wc-stripe-express-checkout-element-applePay + #wc-stripe-express-checkout-element-googlePay{margin-top:16px}
@media(max-width:640px){
  #wc-stripe-express-checkout-element-applePay + #wc-stripe-express-checkout-element-googlePay{margin-top:22px}
}
.woocommerce-checkout #place_order{width:100%;height:60px;font-size:17px;margin-top:8px}
/* Paiement express Stripe (Apple Pay / Google Pay) : réservé à la livraison à
   domicile. Le paiement express contourne notre page checkout (sélecteur de
   retrait, détail du point de retrait, champs conditionnels, modale précommande)
   et impose une adresse de livraison dans la feuille native Apple/Google : il est
   donc incompatible avec le retrait sur place (click & collect). On le masque par
   défaut (le retrait est le mode par défaut) et on ne l'affiche qu'en mode
   « Expédier », piloté par data-bl-ship-mode sur <body> (voir checkout.js).
   Masqué par défaut = pas de flash au chargement (FOUC). */
#wc-stripe-express-checkout-element,
#wc-stripe-express-checkout-button-separator{display:none !important}
body[data-bl-ship-mode="expedier"] #wc-stripe-express-checkout-element{display:block !important}
body[data-bl-ship-mode="expedier"] #wc-stripe-express-checkout-button-separator{display:block !important}
/* Filet de sécurité : jamais de paiement express sur le panier ni la fiche
   produit (aucun mode de livraison n'y est choisi → même incompatibilité avec le
   retrait). L'express reste réservé à la page commande, mode « Expédier ».
   Doublonne le réglage plugin (emplacements = Commande uniquement) au cas où il
   serait réactivé par mégarde. */
body.woocommerce-cart #wc-stripe-express-checkout-element,
body.woocommerce-cart #wc-stripe-express-checkout-button-separator,
body.single-product #wc-stripe-express-checkout-element,
body.single-product #wc-stripe-express-checkout-button-separator{display:none !important}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{margin:12px 0}
.woocommerce form.checkout #order_review{background:transparent}
/* Bloc facturation : #customer_details EST le .col2-set (même élément).
   On empile les sous-colonnes (facturation puis notes). */
.woocommerce-checkout #customer_details.col2-set{display:block}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2{width:100%;float:none;margin:0}
.woocommerce-checkout #customer_details .col-2{margin-top:20px}
/* Prénom / Nom sur une ligne */
.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper{
  display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper > .form-row-wide,
.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper > .notes{grid-column:1 / -1}
/* Mobile : Prenom et Nom cote a cote donnent deux champs trop etroits (~demi
   largeur). On empile le wrapper facturation en 1 colonne sous 640px : chaque
   champ prend toute la largeur, comme les autres (rue, code postal, ville). */
@media(max-width:640px){
  .woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper{
    grid-template-columns:1fr}
}
@media(min-width:1000px){
  /* Deux colonnes indépendantes (form-checkout.php les enveloppe) : chacune
     empile son contenu depuis le haut, sans rangs partagés. Résultat : la
     Livraison + la facturation à gauche, et le récap « Votre commande » qui
     démarre BIEN EN HAUT à droite (plus poussé en bas par la bande Livraison). */
  .woocommerce-checkout form.checkout.woocommerce-checkout{display:grid;
    grid-template-columns:1.15fr .85fr;column-gap:44px;align-items:start}
  .woocommerce-checkout .bl-co-col{min-width:0}
  .woocommerce-checkout .bl-co-col--right #order_review_heading{margin-top:0}
  /* Erreurs de validation : WooCommerce (submit_error) injecte la notice EN
     ENFANT DIRECT du <form>, donc dans la grille à 2 colonnes. Sans règle, elle
     prend une cellule et décale les colonnes (vue « cassée / espacée »). On la
     force à occuper toute la largeur, sur sa propre rangée en haut : les deux
     colonnes restent côte à côte en dessous. */
  .woocommerce-checkout form.checkout.woocommerce-checkout > .woocommerce-NoticeGroup,
  .woocommerce-checkout form.checkout.woocommerce-checkout > .woocommerce-error,
  .woocommerce-checkout form.checkout.woocommerce-checkout > .woocommerce-message,
  .woocommerce-checkout form.checkout.woocommerce-checkout > .woocommerce-info{
    grid-column:1 / -1;margin-bottom:8px}
}

/* ---------- Panier vide ---------- */
.cart-empty.woocommerce-info{justify-content:center;text-align:center}
.woocommerce .return-to-shop{margin-top:8px}
.bl-cart-empty{max-width:520px;margin:10px 0 46px;padding:0}
.bl-cart-empty__title{font:600 22px/1.25 var(--font-display);color:var(--bl-blanc);margin:0 0 10px}
.bl-cart-empty__text{font:400 16px/1.6 var(--font-body);color:var(--text-secondary);margin:0 0 22px}
.bl-cart-empty .return-to-shop{margin:0}

/* ---------- Mon compte ---------- */
.woocommerce-account .woocommerce{display:grid;gap:32px}
.woocommerce-MyAccount-navigation ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0 0 8px}
.woocommerce-MyAccount-navigation li a{display:inline-block;padding:10px 16px;border:1.5px solid var(--border-subtle);
  border-radius:var(--radius-pill);font:600 13px var(--font-display);color:var(--text-secondary);transition:all var(--dur-fast)}
.woocommerce-MyAccount-navigation li.is-active a,.woocommerce-MyAccount-navigation li a:hover{
  border-color:var(--selected);color:var(--bl-blanc)}
.woocommerce-account .col2-set{display:grid;gap:32px}
@media(min-width:800px){
  .woocommerce-account .col2-set{grid-template-columns:1fr 1fr}
  .woocommerce-account .col2-set .col-1,.woocommerce-account .col2-set .col-2{width:auto;float:none}
}
.woocommerce-account form.login,.woocommerce-account form.register{
  background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-l);padding:28px}

/* ---------- Boutique (archive produits) ---------- */
.page-main.is-shop .page-head{margin-bottom:14px}
.page-main.is-shop .page-head .eyebrow{display:inline-flex;margin-bottom:8px}
.shop-intro{max-width:640px;color:var(--text-secondary);font:400 16px/1.6 var(--font-body);margin:0 0 30px}
.shop-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 34px}
.shop-filters .flabel{font:600 12px var(--font-display);letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);margin-right:4px}
.filter-chip{appearance:none;cursor:pointer;background:transparent;border:1.5px solid var(--border-strong);
  border-radius:var(--radius-pill);color:var(--text-secondary);font:600 13px var(--font-display);
  letter-spacing:.01em;padding:9px 18px;display:inline-flex;align-items:center;gap:8px;line-height:1;
  transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)}
.filter-chip:hover{border-color:var(--bl-blanc);color:var(--bl-blanc);transform:translateY(-1px)}
.filter-chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--bl-blanc)}
.filter-chip .swatch{width:12px;height:12px;border-radius:50%;border:1px solid rgba(255,255,255,.35);display:inline-block}
/* [hidden] est plus spécifique que .card (display:block) : masque au filtrage. */
.card[hidden]{display:none}
.shop-empty{color:var(--text-secondary);font:400 16px/1.6 var(--font-body)}

/* ---------- Responsive ---------- */
@media(max-width:640px){
  .page-main{padding:110px var(--pad) 70px}
  .woocommerce table.shop_table thead{display:none}
}

/* ---------- Panier : bascule en cartes empilées ----------
   Sous 1000px (la sidebar totaux passe sous le panier), on centre et on borne
   la largeur pour une lecture confortable, et le tableau devient des cartes.
   On ne s'appuie PAS sur shop_table_responsive de Woo (breakpoint 768 +
   « Produit: … » désaligné) : la classe est retirée du template. */
@media(max-width:999px){
  /* Les deux cartes (articles + totaux) à la MÊME largeur : toutes deux en
     pleine largeur de leur conteneur commun (réf. = la carte des totaux). */
  .woocommerce-cart .woocommerce{max-width:none;margin-inline:0}
  .woocommerce-cart .woocommerce-cart-form,.woocommerce-cart .cart-collaterals{width:100%!important;max-width:none;margin:0}
  /* !important : la règle de base .woocommerce table.shop_table thead est plus
     spécifique et ré-affichait l'en-tête par-dessus les cartes empilées. */
  .bl-cart-table thead{display:none!important}
  /* La table remplit (width:100%) ; SEULES les lignes/cellules passent en auto.
     Une table en width:auto se rétrécit à son contenu => carte plus étroite. */
  .bl-cart-table{display:block!important;width:100%!important}
  .bl-cart-table tbody,.bl-cart-table tr,.bl-cart-table td{display:block!important;width:auto!important}
  .bl-cart-table tr.woocommerce-cart-form__cart-item{border:1px solid var(--border-subtle);border-radius:var(--radius-m);margin:0 0 14px;padding:14px}
  .bl-cart-table td{border:0!important;text-align:left!important;padding:0}
  .bl-cart-table td.product-name{margin-bottom:6px}
  .bl-cart-table td.product-price,.bl-cart-table td.product-quantity,.bl-cart-table td.product-subtotal{
    display:flex!important;justify-content:space-between;align-items:center;gap:12px;white-space:normal;
    padding:11px 0;border-top:1px solid var(--border-subtle)!important}
  .bl-cart-table td.product-price::before,.bl-cart-table td.product-quantity::before,.bl-cart-table td.product-subtotal::before{
    content:attr(data-title);font:600 11px var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
  .bl-cart-table td.product-quantity .quantity{margin-left:auto}
  /* Actions : pile serrée alignée en haut (fini le trou vertical du space-between). */
  .bl-cart-table td.actions{padding-top:18px}
  .bl-cart-actions{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:12px}
  /* Code promo empilé : champ pleine largeur (saisissable), bouton en dessous.
     On NE met PAS le bouton coupon en width:100% via .button global, sinon il
     écrasait le champ. */
  .bl-cart-actions .coupon{flex-direction:column;width:100%;max-width:none;flex:none}
  .bl-cart-actions .coupon input{width:100%!important;flex:none;box-sizing:border-box}
  .bl-cart-actions .coupon .button,.bl-cart-actions .bl-update-cart{display:flex;justify-content:center;width:100%!important}
}

/* ---------- CTA du tunnel de vente (blocs Panier & Commande) ----------
   Le panier/checkout utilise les blocs WooCommerce : leur bouton de validation
   ne porte PAS les classes classiques (.checkout-button/#place_order) stylées
   plus haut, il restait donc gris par défaut. On met en avant le CTA de
   validation (« Valider la commande » / « Passer la commande ») aux couleurs
   de la marque pour qu'il ressorte nettement. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
  background:var(--accent)!important;color:var(--bl-blanc)!important;
  border:0!important;border-radius:var(--radius-m)!important;
  font-family:var(--font-display)!important;font-weight:700!important;
  font-size:17px!important;letter-spacing:.02em!important;
  min-height:60px!important;padding:18px 28px!important;
  box-shadow:0 12px 34px rgba(215,22,91,.42)!important;
  transition:transform var(--dur-fast) var(--ease-out),
             background var(--dur-fast),box-shadow var(--dur-fast)!important}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover{
  background:var(--accent-hover)!important;color:var(--bl-blanc)!important;
  transform:translateY(-2px);box-shadow:0 16px 44px rgba(215,22,91,.55)!important}
.wc-block-cart__submit-button:active,
.wc-block-components-checkout-place-order-button:active{transform:translateY(0)}
.wc-block-cart__submit-button:focus-visible,
.wc-block-components-checkout-place-order-button:focus-visible{
  outline:2px solid var(--bl-blanc);outline-offset:3px}

/* ---------- Sélecteur de quantité (bloc Panier) : accessibilité ----------
   Les boutons -/+ natifs faisaient ~30x15px, sous la cible tactile recommandée
   (WCAG 2.5.5/2.5.8 ~44px). On agrandit boutons et champ, et on force la
   largeur du conteneur pour que la bordure englobe bien « - N + » (sinon le
   bouton + agrandi débordait du cadre). Le champ flexe au centre. */
.wc-block-components-quantity-selector{
  width:150px!important;max-width:150px!important;min-height:46px!important;box-sizing:border-box!important}
.wc-block-components-quantity-selector__button{
  flex:0 0 auto!important;width:46px!important;min-width:46px!important;
  min-height:46px!important;height:46px!important;
  font-size:22px!important;line-height:1!important;
  display:flex!important;align-items:center!important;justify-content:center!important}
.wc-block-components-quantity-selector__input{
  flex:1 1 auto!important;width:auto!important;min-height:44px!important;
  font-size:16px!important;font-weight:600!important}

/* ============ Checkout (bloc Commande) : habillage DA des champs ============
   Le bloc Commande utilise les classes .wc-block-components-* et n'herite PAS
   du CSS checkout classique du theme (.woocommerce form .form-row input…) : les
   champs restaient blancs, hors DA, avec des labels flottants illisibles. On
   habille ici champs, select, textarea, labels, cases a cocher et titres aux
   couleurs de la marque.
   NB : le champ carte bancaire est un iframe Stripe (cross-origin) ; son
   apparence se regle cote plugin Stripe, pas dans ce CSS. */

/* Champs de saisie (email, prenom, nom, adresse, CP, ville, tel) + textarea + select */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-textarea,
.wc-blocks-components-select__select{
  background:var(--surface-raised)!important;color:var(--text-primary)!important;
  border:1.5px solid var(--border-subtle)!important;border-radius:var(--radius-m)!important;
  font-family:var(--font-body)!important}
.wc-block-components-text-input input:focus,
.wc-block-components-text-input textarea:focus,
.wc-block-components-textarea:focus,
.wc-blocks-components-select__select:focus{
  border-color:var(--field-focus)!important;box-shadow:0 0 0 3px var(--field-focus-ring)!important;outline:none!important}

/* Labels flottants (font office de placeholder : doivent rester lisibles sur fond sombre) */
.wc-block-components-text-input label,
.wc-blocks-components-select__label{color:var(--text-faint)!important}
.wc-block-components-text-input.is-active label{
  color:var(--text-secondary)!important;background:var(--surface-raised)!important;padding:0 4px!important}

/* Select pays : fond transparent + fleche/valeur lisibles */
.wc-blocks-components-select,.wc-blocks-components-select__container{background:transparent!important}
.wc-blocks-components-select__expand,.wc-blocks-components-select svg{
  fill:var(--text-primary)!important;color:var(--text-primary)!important}

/* Cases a cocher : case + coche rose, texte espace (corrige un chevauchement natif) */
.wc-block-components-checkbox label{
  display:flex!important;align-items:flex-start!important;column-gap:11px!important;position:relative!important}
.wc-block-components-checkbox__input[type=checkbox]{
  flex:0 0 auto!important;width:20px!important;height:20px!important;margin:1px 0 0 0!important;
  background:var(--surface-raised)!important;border:1.5px solid var(--border-strong)!important;
  border-radius:var(--radius-s)!important}
.wc-block-components-checkbox__input[type=checkbox]:checked{
  background:var(--selected)!important;border-color:var(--selected)!important}
.wc-block-components-checkbox__mark{
  position:absolute!important;left:0!important;top:1px!important;width:20px!important;height:20px!important;
  fill:var(--bl-blanc)!important;pointer-events:none!important}
.wc-block-components-checkbox__label{margin:0!important;line-height:1.4!important;color:var(--text-secondary)!important}

/* Titres de section, descriptions, liens utilitaires, options radio */
.wc-block-components-checkout-step__title{font-family:var(--font-display)!important;color:var(--text-primary)!important}
.wc-block-components-checkout-step__description{color:var(--text-faint)!important}
.wc-block-components-address-form__address_2-toggle{color:var(--bl-pink-2)!important}
.wc-block-components-radio-control__option,
.wc-block-components-radio-control label{color:var(--text-primary)!important}
/* ============================================================================
   Checkout custom Banana Lover : sélecteur de livraison « Retrait | Expédier »
   (shortcode classique, rendu par inc/checkout.php). Remplace l'ancien habillage
   du bloc Commande (trop rigide : troncature « Lire la suite » indéfaisable, pas
   d'élément prix, a11y cassée).
   ========================================================================== */
.bl-ship{margin:0 0 26px}
.bl-ship__legend{font:600 15px var(--font-display);letter-spacing:.02em;color:var(--text-primary);margin:0 0 12px}

/* Tuiles Retrait | Expédier : deux colonnes égales, jamais empilées (sauf ≤480px).
   Largeur bornée : la bande Livraison est pleine largeur mais le contenu reste
   aligné à gauche, à la largeur de la colonne formulaire. */
.bl-ship__toggle{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:640px}
.bl-ship__panel{max-width:640px}
.bl-ship__tile{
  appearance:none;cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:12px;
  min-height:66px;padding:12px 16px;
  background:var(--surface-raised);
  border:1.5px solid var(--border-subtle);
  border-radius:var(--radius-m);color:var(--text-secondary);
  transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast),color var(--dur-fast);
}
.bl-ship__tile:hover{border-color:var(--border-strong);color:var(--text-primary)}
.bl-ship__tile:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.bl-ship__tile[aria-checked="true"]{
  background:var(--selected-tint);border-color:var(--selected);color:var(--text-primary);
  box-shadow:inset 0 0 0 1px var(--selected);
}
.bl-ship__tile-icon{flex:0 0 auto;display:inline-flex;color:currentColor}
.bl-ship__tile-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.bl-ship__tile-label{font:600 15px var(--font-display);color:inherit;line-height:1.1}
.bl-ship__tile[aria-checked="true"] .bl-ship__tile-label{font-weight:700}
.bl-ship__tile-price{font:500 12.5px var(--font-body);color:var(--text-faint)}
.bl-ship__tile[aria-checked="true"] .bl-ship__tile-price{color:var(--selected)}

/* Vraies radios WooCommerce : cachées (pilotées par les tuiles/options),
   mais elles restent dans le formulaire donc leur valeur est bien postée. */
.bl-ship__rates{display:none}

.bl-ship__panel{margin-top:14px}
.bl-ship__panel[hidden]{display:none}

/* Carte détail du point de retrait : tout affiché, zéro troncature. */
.bl-pickup{
  background:var(--surface-raised);border:1.5px solid var(--border-subtle);
  border-radius:var(--radius-l);padding:18px 20px;
}
.bl-pickup__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.bl-pickup__name{font:700 16px var(--font-display);color:var(--text-primary);margin:0 0 2px}
.bl-pickup__addr{font:400 14px var(--font-body);color:var(--text-secondary);margin:0}
.bl-pickup__free{flex:0 0 auto;font:700 12px var(--font-display);letter-spacing:.08em;color:var(--selected)}
.bl-pickup__intro{font:400 14px/1.55 var(--font-body);color:var(--text-secondary);margin:12px 0 0}
.bl-pickup__meta{margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--border-subtle);display:grid;gap:10px}
.bl-pickup__row{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:start}
.bl-pickup__row dt{font:600 12px var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin:0}
.bl-pickup__row dd{margin:0;font:400 14px/1.5 var(--font-body);color:var(--text-secondary)}
.bl-pickup__hours-line{display:block}
.bl-pickup__row dd a{color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--border-strong)}
.bl-pickup__row dd a:hover{border-color:var(--selected)}

/* Sous-options d'expédition (Colissimo / Point Relais) */
.bl-ship__options{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bl-ship__option-label{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  padding:14px 16px;background:var(--surface-raised);
  border:1.5px solid var(--border-subtle);border-radius:var(--radius-m);
  transition:border-color var(--dur-fast) var(--ease-out);
}
.bl-ship__option-label:hover{border-color:var(--border-strong)}
.bl-ship__option-proxy{accent-color:var(--selected);flex:0 0 auto;width:18px;height:18px;margin:0}
.bl-ship__option-name{flex:1 1 auto;font:500 14.5px var(--font-body);color:var(--text-primary)}
.bl-ship__option-price{flex:0 0 auto;font:600 14px var(--font-display);color:var(--text-secondary)}
.bl-ship__option-label:has(.bl-ship__option-proxy:checked){border-color:var(--selected);box-shadow:inset 0 0 0 1px var(--selected)}
.bl-ship__option-label:has(.bl-ship__option-proxy:checked) .bl-ship__option-price{color:var(--selected)}

/* Champ d'adresse masqué en mode retrait */
.bl-addr-field.bl-hidden{display:none!important}
/* Case « Expédier à une adresse différente ? » masquée en mode retrait */
.woocommerce-shipping-fields.bl-hidden{display:none!important}

/* Résumé lecture seule de l'expédition dans les totaux (order review) */
.bl-ship-summary{color:var(--text-secondary)}
.bl-ship-summary strong{color:var(--text-primary);font-weight:600}
/* Retrait « click & collect » dans les totaux du panier : on nomme le retrait
   à la box et on met en avant l'économie de frais de port (teal = positif). */
.woocommerce-shipping-methods li{margin-bottom:10px}
.bl-ship-hint{display:block;margin-top:4px}
.bl-ship-hint__badge{display:inline-block;font-weight:600;font-size:12px;line-height:1.4;
  color:var(--bl-teal-3);background:color-mix(in srgb,var(--bl-teal) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--bl-teal) 40%,transparent);
  border-radius:14px;padding:5px 12px;letter-spacing:.01em}
.bl-ship-hint__desc{display:block;margin-top:5px;color:var(--text-secondary);
  font-size:12.5px;line-height:1.45;max-width:34em}

/* ---------- Modale de confirmation précommande ---------- */
.bl-modal[hidden]{display:none}
.bl-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.bl-modal__scrim{position:absolute;inset:0;background:rgba(5,16,15,.72);backdrop-filter:blur(3px)}
.bl-modal__box{
  position:relative;width:min(460px,100%);
  background:var(--surface-raised);border:1px solid var(--border-strong);
  border-radius:var(--radius-l);padding:28px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  animation:bl-modal-in var(--dur-320,320ms) var(--ease-out);
}
.bl-modal__title{font:700 20px var(--font-display);color:var(--text-primary);margin:0 0 10px}
.bl-modal__body{font:400 15px/1.6 var(--font-body);color:var(--text-secondary);margin:0 0 22px}
.bl-modal__actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}
/* Boutons de la modale : hors du wrapper .woocommerce, on reprend la DA bouton. */
.bl-modal__actions .button{
  appearance:none;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:600;font-size:14.5px;letter-spacing:.01em;
  padding:13px 22px;line-height:1;border-radius:var(--radius-m);cursor:pointer;
  border:1.5px solid var(--border-strong);background:transparent;color:var(--text-primary);
  transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);
}
.bl-modal__actions .button:hover{border-color:var(--bl-blanc);background:rgba(251,248,249,.04);transform:translateY(-1px)}
.bl-modal__actions .button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.bl-modal__confirm{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--bl-blanc)!important;box-shadow:0 10px 30px rgba(215,22,91,.32)}
.bl-modal__confirm:hover{background:var(--accent-hover)!important;border-color:var(--accent-hover)!important;transform:translateY(-2px);box-shadow:0 14px 38px rgba(215,22,91,.5)}
.bl-modal-open{overflow:hidden}
@keyframes bl-modal-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media(max-width:480px){
  .bl-ship__toggle{grid-template-columns:1fr}
  .bl-pickup__row{grid-template-columns:1fr;gap:2px}
  .bl-modal__actions{justify-content:stretch}
  .bl-modal__actions .button{flex:1 1 auto;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .bl-modal__box{animation:none}
}