/* Panier, commande, confirmation : habille le HTML des gabarits woocommerce/ du thème (maquettes panier, commande, commande-recue).
   Les classes de la maquette (p-tunnel.css) font le gros du travail ; ce fichier adapte ce que WooCommerce et ses extensions ajoutent. */

/* Zone de paiement express : vide tant qu'aucun bouton Apple Pay, Google Pay, PayPal n'est affiché par les extensions */
.sg .sg-express { display: none; grid-template-columns: minmax(0, 1fr); gap: var(--sg-3); margin-top: var(--sg-6); }
.sg .sg-express.a-du-contenu { display: grid; }
.sg .sg-express .wc-proceed-to-checkout, .sg .sg-express > div { margin: 0; padding: 0; width: 100%; }
.sg .sg-express [id*="separator"], .sg .sg-express [class*="separator"], .sg .sg-express legend { display: none !important; }
.sg .sg-ou[hidden] { display: none; }
.sg .formulaire .sg-express { margin-top: 0; }

/* Quantités : − [champ] + comme la maquette */
.sg .qte .quantity { display: contents; }
.sg .qte .quantity label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sg .woocommerce .qte input.qty { width: 44px; height: 44px !important; border: 0 !important; padding: 0 !important; text-align: center; background: transparent !important; -moz-appearance: textfield; }
.sg .qte input.qty::-webkit-inner-spin-button, .sg .qte input.qty::-webkit-outer-spin-button { -webkit-appearance: none; }
.sg .retirer { display: inline-flex; align-items: center; }
.sg .ligne-corps h2 a { color: inherit; text-decoration: none; }
.sg .lignes { list-style: none; margin: 0; padding: 0; }
.sg .sg-js-panier .sg-maj-panier, .sg.sg-js-panier .sg-maj-panier, .sg-js-panier .sg-maj-panier { display: none !important; }
.sg .sg-maj-panier { margin-top: var(--sg-4); }
.sg .ligne img { height: auto; }

/* Récapitulatif */
.sg .tunnel-grille > .cart_totals, .sg .tunnel-grille > .recap-carte { margin: 0; }
.sg .recap-carte .checkout-button { display: flex; align-items: center; justify-content: center; text-decoration: none; margin-top: var(--sg-5); }
.sg .recap-carte .totaux { padding: 0; }
.sg .recap-carte .totaux dt, .sg .recap-carte .totaux dd { margin: 0; }
.sg .recap-carte .woocommerce-remove-coupon { margin-left: var(--sg-2); font-size: var(--sg-t-legende); }
.sg .mini-lignes { list-style: none; padding: 0; }

/* Champs : deux colonnes (prénom/nom, code postal/ville), le reste en pleine largeur */
.sg .formulaire .woocommerce-billing-fields__field-wrapper, .sg .formulaire .woocommerce-shipping-fields__field-wrapper {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-4);
}
.sg .formulaire p.form-row { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
.sg .formulaire p.form-row-wide, .sg .formulaire p.validate-email, .sg .formulaire p#billing_address_1_field, .sg .formulaire p#shipping_address_1_field { grid-column: 1 / -1; }
.sg .formulaire p.form-row label { display: block; margin-bottom: var(--sg-2); }
.sg .formulaire p.form-row .woocommerce-input-wrapper, .sg .formulaire .select2-container { width: 100% !important; display: block; }
.sg .formulaire .woocommerce-billing-fields, .sg .formulaire .woocommerce-shipping-fields, .sg .formulaire .woocommerce-additional-fields { margin: 0; }
.sg .formulaire .woocommerce-account-fields { margin-top: var(--sg-3); }
.sg .formulaire .woocommerce-account-fields p { margin: 0; }
@media (max-width: 479px) {
  .sg .formulaire .woocommerce-billing-fields__field-wrapper, .sg .formulaire .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }
}
.sg .shipping_address { margin-top: var(--sg-4); }

/* Paiement : chaque moyen proposé par WooCommerce a l'allure d'un choix de la maquette */
.sg .woocommerce-checkout #payment { background: transparent !important; padding: 0; border: 0; }
.sg #payment ul.wc_payment_methods { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sg-3); border: 0; }
.sg #payment li.wc_payment_method { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0 var(--sg-4); border: 1px solid var(--sg-champ); border-radius: var(--sg-rayon); background: var(--sg-blanc); }
.sg #payment li.wc_payment_method:has(input:checked) { border-color: var(--sg-encre); box-shadow: inset 0 0 0 1px var(--sg-encre); }
.sg #payment li.wc_payment_method > input { width: 20px; height: 20px; accent-color: var(--sg-encre); flex: none; margin: 0 var(--sg-3) 0 0; }
.sg #payment li.wc_payment_method > label { flex: 1; display: flex; align-items: center; gap: var(--sg-2); min-height: 56px; margin: 0; font-weight: 500; cursor: pointer; }
.sg #payment li.wc_payment_method > label img { max-height: 24px; width: auto; margin-left: auto; }
.sg #payment div.payment_box { flex-basis: 100%; margin: 0 calc(var(--sg-4) * -1); padding: var(--sg-4) !important; border-top: 1px solid var(--sg-trait); background: var(--sg-papier) !important; }
.sg #payment div.payment_box::before { display: none !important; }
.sg #payment .place-order { padding: 0; margin: 0; }
.sg #payment .woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--sg-4); }
.sg #payment #place_order { width: 100%; float: none; }
.sg #payment .place-order p.petit { margin-top: var(--sg-4); }

/* Confirmation */
.sg .confirme .woocommerce-order-overview, .sg .confirme .woocommerce-thankyou-order-received { display: none; }
.sg .confirme-faits dd address { font-style: normal; }

/* Code promo à la commande : le lien de WooCommerce héritait du blanc de Divi (invisible sur fond blanc), le champ et le bouton étaient éloignés */
.sg .woocommerce-form-coupon-toggle { max-width: var(--sg-wrap, 1200px); margin: var(--sg-6) auto 0; padding-inline: var(--sg-4); }
.sg .woocommerce-form-coupon-toggle .woocommerce-info { margin: 0; padding: var(--sg-4); background: var(--sg-blanc) !important; border: 1px solid var(--sg-trait); border-top: 3px solid var(--sg-encre) !important; color: var(--sg-encre) !important; font: 400 var(--sg-t-petit)/1.4 var(--sg-sans); }
.sg .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; }
.sg .woocommerce-form-coupon-toggle a.showcoupon { color: var(--sg-lien) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sg form.checkout_coupon { max-width: calc(var(--sg-wrap, 1200px) - 2 * var(--sg-4)); margin: var(--sg-3) auto 0; padding: var(--sg-4); background: var(--sg-blanc); border: 1px solid var(--sg-trait); }
.sg form.checkout_coupon p { margin: 0 0 var(--sg-3); }
.sg form.checkout_coupon .form-row-first, .sg form.checkout_coupon .form-row-last { float: none !important; display: inline-block; vertical-align: top; margin: 0 var(--sg-3) 0 0 !important; }
.sg form.checkout_coupon .form-row-first { width: min(360px, 100%) !important; }
.sg form.checkout_coupon .form-row-last { width: auto !important; }
@media (max-width: 479px) { .sg form.checkout_coupon .form-row-last, .sg form.checkout_coupon .form-row-last .button { width: 100% !important; } }

/* Code promo du panier */
.sg .code-promo { margin-top: var(--sg-4); border: 1px solid var(--sg-trait); background: var(--sg-blanc); padding: 0 var(--sg-4); }
.sg .code-promo summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--sg-lien); }
.sg .code-promo .coupon { display: flex; gap: var(--sg-3); padding-bottom: var(--sg-4); flex-wrap: wrap; }
.sg .code-promo .coupon input { flex: 1 1 220px; }