/**
 * 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;
}

.woocommerce-checkout table.shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	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-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
	padding: 15.75px 0;
	border: 0;
	border-bottom: 1px solid var(--baba-color-border);
	text-align: left;
	vertical-align: top;
}

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

.woocommerce-checkout table.shop_table td:last-child,
.woocommerce-checkout table.shop_table th:last-child {
	text-align: right;
}

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

/* La cellule des modes de livraison est la dernière de sa ligne et
   hériterait de l'alignement à droite des montants : ses libellés, eux,
   se lisent de gauche à droite. */
.woocommerce-checkout table.shop_table td[data-title='Expédition'],
.woocommerce-checkout table.shop_table .woocommerce-shipping-totals td {
	text-align: left;
}

/* 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: 8.4px;
	margin: 0 0 8.4px;
	text-align: left;
}

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

.woocommerce-checkout #shipping_method input {
	margin: 6px 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;
}

.woocommerce-checkout #payment {
	background: none;
	border-radius: var(--baba-radius-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);
}

/* ------------------------------------------------------------------ */
/* 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;
	}
}