/**
 * Tunnel de commande et compte client.
 *
 * Ces deux pages n'ont pas d'équivalent à copier : la référence les
 * délègue à Shopify, qui les sert sur son propre domaine. Elles ne sont
 * donc pas calées au pixel comme le reste du site, mais habillées avec
 * ses jetons — mêmes typographies, mêmes champs que le formulaire de
 * contact, mêmes boutons, même largeur de colonne.
 *
 * Les gabarits de WooCommerce ne sont pas reconstruits : seul leur habit
 * change, comme partout ailleurs dans ce thème.
 */

/* ------------------------------------------------------------------ */
/* Conteneur                                                           */
/* ------------------------------------------------------------------ */

body.woocommerce-checkout .ast-container.ast-container,
body.woocommerce-account .ast-container.ast-container {
	max-width: 1240px;
	padding-left: 31.5px;
	padding-right: 31.5px;
}

body.woocommerce-checkout #primary#primary,
body.woocommerce-account #primary#primary {
	margin-top: 42px;
	margin-bottom: 63px;
}

/* ------------------------------------------------------------------ */
/* Titres                                                              */
/* ------------------------------------------------------------------ */

body.woocommerce-checkout .entry-title,
body.woocommerce-account .entry-title {
	margin: 0 0 31.5px;
	font-family: var(--baba-font-heading);
	font-weight: var(--baba-font-weight-normal);
	font-size: var(--baba-text-h1);
	line-height: 52px;
	letter-spacing: var(--baba-heading-letter-spacing);
	color: var(--baba-color-text-solid);
	text-align: left;
	text-transform: none;
}

body.woocommerce-checkout h3,
body.woocommerce-account h2,
.woocommerce-checkout h3#order_review_heading {
	margin: 0 0 21px;
	padding: 0;
	border: 0;
	font-family: var(--baba-font-heading);
	font-weight: var(--baba-font-weight-normal);
	font-size: var(--baba-text-h2);
	line-height: 31.2px;
	letter-spacing: var(--baba-heading-letter-spacing);
	color: var(--baba-color-text-solid);
	text-transform: none;
}

/* ------------------------------------------------------------------ */
/* Champs                                                              */
/* ------------------------------------------------------------------ */

.woocommerce form .form-row {
	margin-bottom: 21px;
	padding: 0;
}

.woocommerce form .form-row label,
.woocommerce-account form label {
	display: block;
	margin-bottom: 8.4px;
	font-family: var(--baba-font-body);
	font-weight: var(--baba-font-weight-normal);
	font-size: var(--baba-text-md);
	line-height: 21px;
	letter-spacing: var(--baba-nav-letter-spacing);
	color: var(--baba-color-text);
}

.woocommerce form .form-row .required {
	color: var(--baba-color-text);
	text-decoration: none;
}

/* Même dessin de champ que le formulaire de contact et la recherche :
   47,25px de haut, cadre d'1px à 55 % de noir, angles vifs. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account form input.input-text,
.woocommerce-account form input[type='password'],
.select2-container .select2-selection--single {
	width: 100%;
	height: 47.25px;
	padding: 0 15.75px;
	background-color: var(--baba-color-bg);
	border: 0;
	border-radius: var(--baba-radius-none);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
	font-family: var(--baba-font-body);
	font-weight: var(--baba-font-weight-normal);
	font-size: var(--baba-text-base);
	line-height: 24.8px;
	letter-spacing: 0.42px;
	color: var(--baba-color-text-solid);
}

.woocommerce form .form-row textarea {
	height: 105px;
	padding: 15.75px;
	resize: vertical;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-account form input:focus {
	outline: 0;
	box-shadow: 0 0 0 1px var(--baba-color-text-solid);
}

.woocommerce form .form-row ::placeholder {
	color: rgba(0, 0, 0, 0.4);
}

/* Les cases à cocher gardent leur taille native, seul l'espacement change. */
.woocommerce form .form-row.woocommerce-validated input.input-text {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
}

.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 8.4px;
	margin-bottom: 21px;
}

.woocommerce-form__label-for-checkbox input {
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* Messages                                                            */
/* ------------------------------------------------------------------ */

/* WooCommerce encadre ses messages d'un liseré bleu vif, hérité de son
   habillage par défaut : on lui rend la sobriété du reste du site. */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	margin: 0 0 31.5px;
	padding: 15.75px 21px;
	background-color: var(--baba-color-bg-alt);
	border-top: 0;
	border-radius: var(--baba-radius-none);
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-md);
	line-height: 25.2px;
	letter-spacing: var(--baba-nav-letter-spacing);
	color: var(--baba-color-text);
}

.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
	display: none;
}

.woocommerce-error {
	background-color: rgba(0, 0, 0, 0.06);
}

.woocommerce-info a,
.woocommerce-message a,
.woocommerce-error a {
	color: var(--baba-color-accent);
}

/* Le bouton glissé dans le message d'ajout au panier reste au bleu
   d'Astra : il reprend celui du thème, comme tous les autres. La classe
   est doublée pour passer devant la règle d'Astra, plus spécifique. */
.woocommerce-info a.button.button,
.woocommerce-message a.button.button,
.woocommerce-error a.button.button {
	background-color: var(--baba-color-accent);
	color: var(--baba-color-text-inverse);
}

/* ------------------------------------------------------------------ */
/* Récapitulatif de commande                                           */
/* ------------------------------------------------------------------ */

.woocommerce-checkout #order_review {
	padding: 31.5px;
	background-color: var(--baba-color-bg-alt);
	border: 0;
	box-shadow: none;
	outline: 0;
}

/**
 * Le récapitulatif n'est plus dessiné en colonnes de tableau mais en
 * lignes : intitulé à gauche, montant à droite.
 *
 * Le modèle de tableau liait toutes les lignes à une même grille de
 * colonnes, et les libellés de livraison — « Livraison en point de retrait
 * Mondial Relay (choix après le paiement) » — y étaient de loin le contenu
 * le plus long : ils faisaient enfler la colonne de droite, écrasaient
 * celle des produits (« Spray Anti- » à la ligne « THC ») et finissaient
 * eux-mêmes coupés sur cinq lignes. Chaque ligne étant désormais
 * indépendante, celle de l'expédition peut prendre toute la largeur du
 * récapitulatif sans rien imposer aux autres.
 */
.woocommerce-checkout table.shop_table,
.woocommerce-checkout table.shop_table thead,
.woocommerce-checkout table.shop_table tbody,
.woocommerce-checkout table.shop_table tfoot {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-md);
	line-height: 25.2px;
	letter-spacing: var(--baba-nav-letter-spacing);
	color: var(--baba-color-text);
}

/* Le filet passe sur la ligne : porté par les cellules, il s'arrêtait au
   bord de la colonne. */
.woocommerce-checkout table.shop_table tr {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 21px;
	padding: 15.75px 0;
	border-bottom: 1px solid var(--baba-color-border);
}

.woocommerce-checkout table.shop_table tfoot tr:last-child {
	border-bottom: 0;
}

.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
	display: block;
	padding: 0;
	border: 0;
	text-align: left;
}

.woocommerce-checkout table.shop_table th {
	font-weight: var(--baba-font-weight-normal);
	color: var(--baba-color-text-solid);
}

/* Le montant : à droite, d'un seul tenant, et jamais rétréci par un
   intitulé trop long à sa gauche. */
.woocommerce-checkout table.shop_table td:last-child,
.woocommerce-checkout table.shop_table th:last-child {
	flex: none;
	text-align: right;
	white-space: nowrap;
}

.woocommerce-checkout table.shop_table tfoot tr:last-child th,
.woocommerce-checkout table.shop_table tfoot tr:last-child td {
	font-size: var(--baba-text-base);
	color: var(--baba-color-text-solid);
}

/* Expédition : l'intitulé au-dessus, les modes de livraison en dessous,
   sur toute la largeur. */
.woocommerce-checkout table.shop_table .woocommerce-shipping-totals {
	display: block;
}

.woocommerce-checkout table.shop_table .woocommerce-shipping-totals td {
	padding-top: 10.5px;
	white-space: normal;
}

/* La quantité suit le nom sur la même ligne : c'est un complément, pas un
   second titre — WooCommerce la met en <strong>. */
.woocommerce-checkout table.shop_table .product-quantity {
	font-weight: var(--baba-font-weight-normal);
	color: var(--baba-color-text);
	white-space: nowrap;
}

/* Les modes de livraison sont une liste : elle n'a pas à porter de puces
   ni de retrait. */
.woocommerce-checkout #shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-checkout #shipping_method li {
	display: flex;
	align-items: flex-start;
	gap: 10.5px;
	margin: 0 0 10.5px;
	text-align: left;
}

.woocommerce-checkout #shipping_method li:last-child {
	margin-bottom: 0;
}

/**
 * Deux réglages de WooCommerce à défaire, et il y faut trois identifiants.
 *
 * Le premier est un retrait suspendu posé en style « inline » :
 *   ul#shipping_method li:not(.elementor-… #shipping_method li) {
 *       padding-left: 22px; text-indent: -22px }
 * — le :not() compte dans le calcul, ce qui porte la règle à (2,1,3). Ce
 * retrait suppose que le bouton radio coule dans le texte ; notre
 * disposition en flexbox l'en sort déjà, si bien que le retrait ne faisait
 * plus que ramener la première ligne du libellé SOUS le bouton, par-dessus
 * sa première lettre.
 *
 * Le second est la marge du bouton lui-même,
 *   .woocommerce-js ul#shipping_method li input { margin: 3px .5ex }
 * qui le décale à droite et le pose trop haut.
 */
#order_review #shipping_method#shipping_method li {
	padding: 0;
	text-indent: 0;
}

/* 6,1px : de quoi centrer un bouton de 13px sur la première ligne du
   libellé, haute de 25,2px. */
#order_review #shipping_method#shipping_method input {
	flex: none;
	margin: 6.1px 0 0;
}

/* L'alignement à droite vient de la cellule, où Astra le pose avec une
   spécificité qu'aucun de nos sélecteurs de tableau ne dépasse : on le
   corrige donc sur l'étiquette elle-même. */
.woocommerce-checkout #shipping_method label {
	margin: 0;
	text-align: left;
}

/* Le tarif est dans le libellé, à la suite du texte : il se lit comme un
   montant, dans la couleur pleine du reste des chiffres, et ne se coupe
   jamais en fin de ligne. */
.woocommerce-checkout #shipping_method label .woocommerce-Price-amount {
	color: var(--baba-color-text-solid);
	font-weight: var(--baba-font-weight-semibold);
	white-space: nowrap;
}

.woocommerce-checkout #payment {
	background: none;
	border-radius: var(--baba-radius-none);
}

/* Les moyens de paiement sont une liste eux aussi : ni puces, ni retrait,
   ni fond gris hérité de WooCommerce. */
.woocommerce-checkout #payment ul.payment_methods {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	list-style: none;
}

/*
 * Chaque moyen de paiement est une carte encadrée, comme les blocs du
 * récapitulatif. Sans elle, WooCommerce empile un titre nu et un
 * paragraphe qui flottent entre les frais de port et la case des
 * conditions générales : rien ne dit au client qu'il regarde le moment où
 * il choisit comment payer.
 */
.woocommerce-checkout #payment ul.payment_methods > li {
	margin: 0 0 10.5px;
	padding: 0;
	background-color: var(--baba-color-bg);
	border: 1px solid var(--baba-color-border);
	border-radius: var(--baba-radius-none);
}

.woocommerce-checkout #payment ul.payment_methods > li:last-child {
	margin-bottom: 0;
}

/*
 * Le moyen retenu se marque comme une variante retenue sur une fiche
 * produit : bordure pleine noire. C'est l'idiome du site
 * (.baba-variations__pill--selected), et il reste lisible quand il n'y a
 * qu'un seul moyen — le cas aujourd'hui, où WooCommerce masque le bouton
 * radio faute de choix à offrir.
 */
.woocommerce-checkout #payment ul.payment_methods > li:has( input.input-radio:checked ) {
	border-color: var(--baba-color-text-solid);
}

/* La ligne de choix : bouton radio et libellé sur une même ligne de base. */
.woocommerce-checkout #payment ul.payment_methods > li > label {
	display: flex;
	gap: 10.5px;
	align-items: baseline;
	margin: 0;
	padding: 15.75px;
	font-family: var(--baba-font-heading);
	font-size: var(--baba-text-md);
	font-weight: var(--baba-font-weight-semibold);
	line-height: 1.4;
	letter-spacing: var(--baba-heading-letter-spacing);
	color: var(--baba-color-text-solid);
	cursor: pointer;
}

/* Toute la carte est cliquable, pas seulement les mots du libellé. */
.woocommerce-checkout #payment ul.payment_methods > li > input.input-radio {
	flex: none;
	margin: 0;
}

/* Le logo qu'une passerelle peut fournir — Monetico en aura un — se pose
   à droite du libellé sans le déformer. */
.woocommerce-checkout #payment ul.payment_methods > li > label img {
	max-height: 24px;
	width: auto;
	margin: 0 0 0 auto;
	float: none;
}

/*
 * Le panneau d'explication, rattaché à la carte plutôt que posé dessous.
 * WooCommerce lui donne un fond gris-mauve et une flèche en
 * pseudo-élément qui n'ont rien à faire ici.
 */
.woocommerce-checkout #payment ul.payment_methods > li .payment_box {
	margin: 0;
	padding: 15.75px;
	background-color: var(--baba-color-bg-alt);
	border-top: 1px solid var(--baba-color-border);
	border-radius: var(--baba-radius-none);
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-md);
	line-height: var(--baba-line-height-body);
	color: var(--baba-color-text);
}

.woocommerce-checkout #payment ul.payment_methods > li .payment_box::before {
	content: none;
}

.woocommerce-checkout #payment ul.payment_methods > li .payment_box p {
	margin: 0;
}

.woocommerce-checkout #payment ul.payment_methods > li .payment_box p + p {
	margin-top: 10.5px;
}

.woocommerce-checkout #payment .woocommerce-info {
	margin: 0;
	padding: 15.75px;
	background-color: var(--baba-color-bg);
	border: 0;
	box-shadow: 0 0 0 1px var(--baba-color-border);
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-md);
	line-height: 24.8px;
	color: var(--baba-color-text);
}

/* WooCommerce loge une pastille en pseudo-élément devant ses messages ;
   la référence n'a pas d'équivalent. */
.woocommerce-checkout #payment .woocommerce-info::before {
	content: none;
}

.woocommerce-checkout #payment .place-order {
	padding: 21px 0 0;
}

.woocommerce-privacy-policy-text {
	margin: 0 0 21px;
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-sm);
	line-height: 21px;
	letter-spacing: var(--baba-nav-letter-spacing);
	color: var(--baba-color-text);
}

/* Le bouton de validation prend toute la largeur du récapitulatif, comme
   celui du panier. */
.woocommerce-checkout #place_order.button {
	width: 100%;
}

/* ------------------------------------------------------------------ */
/* Compte client                                                       */
/* ------------------------------------------------------------------ */

/* La colonne de connexion n'a pas besoin de toute la largeur de l'écran :
   la référence garde ses formulaires dans une colonne étroite. */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword {
	max-width: 525px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--baba-radius-none);
}

.woocommerce-account .woocommerce-form-login__rememberme {
	margin-bottom: 21px;
}

.woocommerce-account .woocommerce-LostPassword {
	margin: 21px 0 0;
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-md);
}

.woocommerce-account .woocommerce-LostPassword a {
	color: var(--baba-color-accent);
}

/* Espace client connecté : le menu latéral reprend la typographie du
   pied de page. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0 0 12.6px;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-md);
	line-height: 25.2px;
	letter-spacing: var(--baba-nav-letter-spacing);
	color: var(--baba-color-text);
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	color: var(--baba-color-text-solid);
}

/* ------------------------------------------------------------------ */
/* Coordonnées bancaires, sur la page de remerciement                  */
/* ------------------------------------------------------------------ */

/*
 * C'est la page qui décide si l'argent arrive. Le client y lit un IBAN
 * qu'il doit recopier dans sa banque, et WooCommerce le sert comme une
 * ligne de liste parmi d'autres — même corps, même graisse que la date de
 * commande. Une erreur de saisie, et le virement part ailleurs.
 *
 * Le bloc est donc encadré comme les autres panneaux de la commande, et
 * l'IBAN reçoit le traitement d'un numéro à recopier : plus grand, espacé,
 * sur sa propre ligne.
 */
.woocommerce-order .woocommerce-bacs-bank-details {
	margin: 31.5px 0;
	padding: 21px;
	background-color: var(--baba-color-bg-alt);
	border: 1px solid var(--baba-color-border);
	border-radius: var(--baba-radius-none);
}

/*
 * Astra coiffe ce titre-là d'un filet gris de 3px et le rembourre — dans
 * un panneau déjà encadré, le filet ne se lisait plus que comme un trait
 * perdu au-dessus du texte.
 *
 * Sa règle vise .woocommerce-page.woocommerce-checkout .woocommerce-order
 * h2.wc-bacs-bank-details-heading, soit quatre classes : c'est ce nombre
 * qu'il faut égaler, les éléments ne départageant qu'à classes égales.
 * D'où body et section ajoutés devant, qui portent le sélecteur à (0,4,3).
 */
body.woocommerce-checkout .woocommerce-order section.woocommerce-bacs-bank-details h2.wc-bacs-bank-details-heading {
	margin: 0 0 5.25px;
	padding: 0;
	border: 0;
	font-family: var(--baba-font-heading);
	font-size: var(--baba-text-lg);
	font-weight: var(--baba-font-weight-semibold);
	line-height: 1.3;
	letter-spacing: var(--baba-heading-letter-spacing);
	color: var(--baba-color-text-solid);
}

/* Le titulaire du compte : une précision, pas un titre de section. */
.woocommerce-order section.woocommerce-bacs-bank-details h3.wc-bacs-bank-details-account-name {
	margin: 0 0 15.75px;
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-md);
	font-weight: var(--baba-font-weight-normal);
	line-height: var(--baba-line-height-body);
	letter-spacing: 0;
	color: var(--baba-color-text);
}

/*
 * Les champs en colonne, chacun sur sa ligne. WooCommerce réutilise ici la
 * classe « order_details », qu'Astra dispose en rangée avec des séparateurs
 * verticaux : un IBAN de vingt-sept caractères y était comprimé dans un
 * tiers de la largeur.
 */
.woocommerce-order ul.wc-bacs-bank-details.bacs_details,
.woocommerce-order ul.wc-bacs-bank-details.bacs_details.order_details {
	display: flex;
	flex-direction: column;
	gap: 10.5px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-order ul.wc-bacs-bank-details.bacs_details > li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-sm);
	line-height: 1.4;
	letter-spacing: var(--baba-nav-letter-spacing);
	text-transform: uppercase;
	color: var(--baba-color-text);
}

.woocommerce-order ul.wc-bacs-bank-details.bacs_details > li strong {
	font-size: var(--baba-text-md);
	font-weight: var(--baba-font-weight-semibold);
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--baba-color-text-solid);
}

/*
 * L'IBAN et le BIC se recopient caractère par caractère : on les espace
 * pour que l'œil sépare les groupes, et on autorise la coupure de ligne
 * pour qu'un IBAN long ne déborde pas sur un téléphone.
 */
.woocommerce-order ul.wc-bacs-bank-details.bacs_details > li.iban strong,
.woocommerce-order ul.wc-bacs-bank-details.bacs_details > li.bic strong {
	font-size: var(--baba-text-lg);
	letter-spacing: 1px;
	word-break: break-word;
}

/* ------------------------------------------------------------------ */
/* Mobile                                                              */
/* ------------------------------------------------------------------ */

@media (max-width: 749px) {
	body.woocommerce-checkout .ast-container.ast-container,
	body.woocommerce-account .ast-container.ast-container {
		padding-left: 21px;
		padding-right: 21px;
	}

	body.woocommerce-checkout .entry-title,
	body.woocommerce-account .entry-title {
		margin-bottom: 21px;
		font-size: 20px;
		line-height: 26px;
	}

	body.woocommerce-checkout h3,
	body.woocommerce-account h2 {
		font-size: 20px;
		line-height: 26px;
	}

	.woocommerce-checkout #order_review {
		padding: 21px;
	}
}