/* 1337 — habillage des pages WooCommerce (panier, commande, compte, side cart).
 *
 * Principe : on habille le markup existant, on ne le restructure jamais. Rien
 * ici ne déplace, ne masque ni ne réordonne un champ du tunnel de paiement ;
 * les conteneurs des passerelles (PayPlug, PayPal) ne reçoivent que des
 * couleurs. Tout est porté par body.leet-woo pour ne rien faire fuiter sur les
 * pages Divi.
 */

body.leet-woo {
	--l-brand: #9b46ff;
	--l-violet: #d31ad1;
	--l-bg: #05030c;
	--l-bg2: #0c0620;
	--l-card: rgba(255, 255, 255, .028);
	--l-ink: #f5eefe;
	--l-muted: #a596c0;
	--l-faint: #6d5f86;
	--l-line: rgba(255, 255, 255, .09);
	--l-line2: rgba(255, 255, 255, .18);
	--l-ok: #4CD137;
	--l-display: "Chakra Petch", sans-serif;
	--l-body: "Space Grotesk", sans-serif;
	--l-mono: "JetBrains Mono", monospace;

	background: var(--l-bg);
	background-image: radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 22px 22px;
	color: var(--l-ink);
	font-family: var(--l-body);
}

body.leet-woo #main-content,
body.leet-woo .entry-content,
body.leet-woo #content-area,
body.leet-woo .et_pb_section {
	background: transparent;
}

body.leet-woo .woocommerce {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
}

/* --- titres ------------------------------------------------------------- */
body.leet-woo h1,
body.leet-woo h2,
body.leet-woo h3 {
	font-family: var(--l-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--l-ink);
}

body.leet-woo .entry-title {
	font-size: clamp(28px, 5vw, 46px);
	margin-bottom: 28px;
}

/* --- tableaux (panier + récap commande) --------------------------------- */
body.leet-woo table.shop_table {
	border: 1px solid var(--l-line);
	border-radius: 16px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--l-card);
	backdrop-filter: blur(6px);
}

body.leet-woo table.shop_table th {
	font-family: var(--l-mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--l-faint);
	background: rgba(255, 255, 255, .02);
	border-bottom: 1px solid var(--l-line);
	padding: 14px 16px;
	font-weight: 500;
}

body.leet-woo table.shop_table td {
	border-top: 1px solid var(--l-line);
	padding: 16px;
	color: var(--l-ink);
	background: transparent;
}

body.leet-woo table.shop_table tr:first-child td {
	border-top: none;
}

body.leet-woo .product-thumbnail img {
	width: 62px;
	height: auto;
	border-radius: 10px;
	border: 1px solid var(--l-line);
	background: rgba(255, 255, 255, .03);
}

body.leet-woo td.product-name a {
	font-family: var(--l-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--l-ink);
	transition: color .18s;
}

body.leet-woo td.product-name a:hover {
	color: var(--l-brand);
}

body.leet-woo .woocommerce-Price-amount {
	font-family: var(--l-mono);
	font-weight: 700;
	color: var(--l-ink);
}

body.leet-woo .product-remove a.remove {
	color: var(--l-faint) !important;
	background: transparent !important;
	font-size: 20px;
	line-height: 1;
	transition: color .18s, transform .18s;
	display: inline-block;
}

body.leet-woo .product-remove a.remove:hover {
	color: #ff6b7d !important;
	transform: scale(1.15);
}

/* --- champs de saisie ---------------------------------------------------- */
body.leet-woo input[type="text"],
body.leet-woo input[type="email"],
body.leet-woo input[type="tel"],
body.leet-woo input[type="password"],
body.leet-woo input[type="number"],
body.leet-woo input[type="search"],
body.leet-woo textarea,
body.leet-woo select,
body.leet-woo .select2-selection {
	background: rgba(255, 255, 255, .04) !important;
	border: 1px solid var(--l-line2) !important;
	border-radius: 10px !important;
	color: var(--l-ink) !important;
	font-family: var(--l-body) !important;
	font-size: 14px !important;
	padding: 12px 14px !important;
	transition: border-color .18s, box-shadow .18s;
	box-shadow: none !important;
}

body.leet-woo input:focus,
body.leet-woo textarea:focus,
body.leet-woo select:focus {
	border-color: var(--l-brand) !important;
	box-shadow: 0 0 0 3px rgba(155, 70, 255, .18) !important;
	outline: none !important;
}

body.leet-woo ::placeholder {
	color: var(--l-faint);
	opacity: 1;
}

body.leet-woo label,
body.leet-woo .form-row label {
	font-family: var(--l-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--l-muted);
	margin-bottom: 6px;
	display: block;
}

body.leet-woo .required {
	color: var(--l-violet);
	border: none;
}

/* --- boutons ------------------------------------------------------------- */
body.leet-woo .button,
body.leet-woo button.button,
body.leet-woo input.button,
body.leet-woo #place_order,
body.leet-woo .checkout-button {
	font-family: var(--l-mono) !important;
	font-size: 12px !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	font-weight: 700 !important;
	color: #fff !important;
	background: linear-gradient(135deg, var(--l-brand), var(--l-violet)) !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 14px 26px !important;
	box-shadow: 0 6px 22px -6px rgba(155, 70, 255, .65) !important;
	transition: transform .18s, box-shadow .18s, opacity .18s !important;
	cursor: pointer;
}

body.leet-woo .button:hover,
body.leet-woo #place_order:hover,
body.leet-woo .checkout-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 30px -6px rgba(155, 70, 255, .85) !important;
}

body.leet-woo .button:disabled,
body.leet-woo .button.disabled {
	opacity: .5;
	cursor: not-allowed;
	transform: none;
}

/* Bouton secondaire : « Mettre à jour le panier », « Continuer mes achats ». */
body.leet-woo button[name="update_cart"],
body.leet-woo .wc-backward {
	background: rgba(255, 255, 255, .06) !important;
	border: 1px solid var(--l-line2) !important;
	box-shadow: none !important;
	color: var(--l-muted) !important;
}

body.leet-woo button[name="update_cart"]:hover,
body.leet-woo .wc-backward:hover {
	color: #fff !important;
	background: rgba(255, 255, 255, .1) !important;
}

/* --- totaux -------------------------------------------------------------- */
body.leet-woo .cart_totals,
body.leet-woo #order_review,
body.leet-woo .woocommerce-checkout-review-order {
	background: linear-gradient(160deg, rgba(155, 70, 255, .07), rgba(211, 26, 209, .03));
	border: 1px solid var(--l-line);
	border-radius: 16px;
	padding: 22px;
}

body.leet-woo .cart_totals h2,
body.leet-woo #order_review_heading {
	font-size: 15px;
	letter-spacing: .12em;
	margin-bottom: 16px;
	color: var(--l-muted);
}

body.leet-woo .order-total .woocommerce-Price-amount {
	font-size: 22px;
	background: linear-gradient(90deg, var(--l-brand), var(--l-violet));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Ligne de remise dégressive : la rendre lisible d'un coup d'œil. */
body.leet-woo tr.fee th,
body.leet-woo tr.fee td {
	color: var(--l-ok);
}

body.leet-woo tr.fee .woocommerce-Price-amount {
	color: var(--l-ok);
}

/* --- messages ------------------------------------------------------------ */
body.leet-woo .woocommerce-message,
body.leet-woo .woocommerce-info,
body.leet-woo .woocommerce-error {
	background: rgba(255, 255, 255, .04);
	border: 1px solid var(--l-line2);
	border-top: 2px solid var(--l-brand);
	border-radius: 12px;
	color: var(--l-ink);
	font-size: 14px;
	padding: 14px 18px;
}

body.leet-woo .woocommerce-error {
	border-top-color: #ff6b7d;
}

body.leet-woo .woocommerce-message {
	border-top-color: var(--l-ok);
}

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

/* --- paiement : couleurs seulement, aucune modification de structure ------ */
body.leet-woo .woocommerce-checkout-payment,
body.leet-woo #payment {
	background: transparent !important;
	border-radius: 14px;
}

body.leet-woo .wc_payment_methods li {
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--l-line);
	border-radius: 12px;
	margin-bottom: 10px;
	padding: 14px 16px;
	list-style: none;
}

body.leet-woo .wc_payment_methods li label {
	font-family: var(--l-body);
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--l-ink);
	display: inline;
}

body.leet-woo .payment_box {
	background: rgba(255, 255, 255, .04) !important;
	color: var(--l-muted);
	border-radius: 10px;
	font-size: 13px;
}

body.leet-woo .payment_box::before {
	display: none !important;
}

/* --- side cart (Side Cart WooCommerce / xoo-wsc) ------------------------- */
body.leet-woo .xoo-wsc-modal,
.xoo-wsc-modal {
	font-family: "Space Grotesk", sans-serif;
}

.xoo-wsc-container,
.xoo-wsc-footer {
	background: #0a0616 !important;
	color: #f5eefe !important;
}

.xoo-wsc-header,
.xoo-wsch-top {
	background: #0a0616 !important;
	border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
	color: #f5eefe !important;
}

.xoo-wsch-text {
	font-family: "Chakra Petch", sans-serif !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #f5eefe !important;
}

.xoo-wsc-product {
	border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
	background: transparent !important;
}

.xoo-wsc-pname a {
	font-family: "Chakra Petch", sans-serif !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	font-size: 13px !important;
	color: #f5eefe !important;
}

.xoo-wsc-pprice,
.xoo-wsc-subtotal,
.xoo-wsc-ft-amt-value {
	font-family: "JetBrains Mono", monospace !important;
	color: #f5eefe !important;
}

.xoo-wsc-ft-btn,
.xoo-wsc-btn {
	font-family: "JetBrains Mono", monospace !important;
	font-size: 12px !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	border-radius: 10px !important;
	background: linear-gradient(135deg, #9b46ff, #d31ad1) !important;
	color: #fff !important;
	border: none !important;
}

.xoo-wsc-ft-btn-continue {
	background: rgba(255, 255, 255, .06) !important;
	border: 1px solid rgba(255, 255, 255, .18) !important;
	color: #a596c0 !important;
}

.xoo-wsc-basket {
	background: linear-gradient(135deg, #9b46ff, #d31ad1) !important;
	color: #fff !important;
	box-shadow: 0 6px 22px -6px rgba(155, 70, 255, .7) !important;
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 768px) {
	body.leet-woo .woocommerce {
		padding: 0 14px;
	}
	body.leet-woo table.shop_table td {
		padding: 12px;
	}
	body.leet-woo .cart_totals,
	body.leet-woo #order_review {
		padding: 16px;
	}
}

/* --- page de confirmation de commande ------------------------------------ */

body.leet-woo .woocommerce-notice--success,
body.leet-woo .woocommerce-thankyou-order-received {
	font-family: var(--l-display);
	font-size: clamp(20px, 3.2vw, 30px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--l-ink);
	background: linear-gradient(140deg, rgba(76, 209, 55, .1), rgba(155, 70, 255, .06));
	border: 1px solid rgba(76, 209, 55, .35);
	border-radius: 16px;
	padding: 26px 28px;
	margin-bottom: 30px;
	text-align: center;
}

/* Bandeau récapitulatif : n° de commande, date, total, moyen de paiement. */
body.leet-woo ul.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	list-style: none;
	margin: 0 0 34px;
	padding: 0;
	border: none;
}

body.leet-woo ul.woocommerce-order-overview li {
	background: var(--l-card);
	border: 1px solid var(--l-line);
	border-radius: 14px;
	padding: 16px 18px;
	font-family: var(--l-mono);
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--l-faint);
	border-right: 1px solid var(--l-line);
	float: none;
	margin: 0;
}

body.leet-woo ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 8px;
	font-family: var(--l-display);
	font-size: 17px;
	letter-spacing: .02em;
	text-transform: none;
	color: var(--l-ink);
}

body.leet-woo ul.woocommerce-order-overview li.woocommerce-order-overview__total strong {
	background: linear-gradient(90deg, var(--l-brand), var(--l-violet));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

body.leet-woo .woocommerce-order-details__title,
body.leet-woo .woocommerce-column__title,
body.leet-woo .woocommerce-customer-details h2 {
	font-family: var(--l-display);
	font-size: 15px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--l-muted);
	margin: 0 0 14px;
}

body.leet-woo .woocommerce-table--order-details tfoot th {
	background: transparent;
	color: var(--l-muted);
	text-align: left;
}

body.leet-woo .woocommerce-table--order-details tfoot td {
	font-family: var(--l-mono);
	font-weight: 700;
}

/* Adresses de facturation / livraison. */
body.leet-woo .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin-top: 30px;
}

body.leet-woo .woocommerce-columns--addresses .woocommerce-column {
	width: auto;
	float: none;
	background: var(--l-card);
	border: 1px solid var(--l-line);
	border-radius: 14px;
	padding: 20px;
}

body.leet-woo .woocommerce-customer-details address {
	border: none;
	padding: 0;
	font-style: normal;
	color: var(--l-muted);
	line-height: 1.7;
	border-radius: 0;
}

/* --- espace compte ------------------------------------------------------- */
body.leet-woo .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

body.leet-woo .woocommerce-MyAccount-navigation li a {
	display: block;
	font-family: var(--l-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--l-muted);
	background: rgba(255, 255, 255, .04);
	border: 1px solid var(--l-line);
	border-radius: 9px;
	padding: 10px 14px;
	transition: color .18s, border-color .18s, background .18s;
}

body.leet-woo .woocommerce-MyAccount-navigation li.is-active a,
body.leet-woo .woocommerce-MyAccount-navigation li a:hover {
	color: #fff;
	border-color: rgba(155, 70, 255, .5);
	background: rgba(155, 70, 255, .12);
}

/* --- code promo : le champ natif est trop etroit une fois restyle --------- */
body.leet-woo .coupon {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	float: none;
	width: auto;
}

body.leet-woo #coupon_code,
body.leet-woo .coupon input[type="text"] {
	width: auto !important;
	min-width: 190px;
	flex: 1 1 190px;
}

body.leet-woo .actions {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
}

/* Le formulaire de code promo du checkout, replie par defaut. */
body.leet-woo .checkout_coupon .form-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

body.leet-woo .checkout_coupon .form-row-first,
body.leet-woo .checkout_coupon .form-row-last {
	width: auto;
	float: none;
}

/* --- checkout : deux colonnes sur desktop, resume collant a droite -------
 * Mise en page uniquement (grille CSS sur le markup existant). Aucun champ
 * n'est deplace dans le DOM, l'ordre de tabulation et le tunnel de paiement
 * restent ceux de WooCommerce. */
@media (min-width: 1000px) {
	body.leet-woo form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.4fr) minmax(330px, 0.85fr);
		grid-template-rows: auto 1fr;
		column-gap: 36px;
		align-items: start;
	}

	body.leet-woo form.checkout #customer_details {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	body.leet-woo form.checkout #order_review_heading {
		grid-column: 2;
		grid-row: 1;
		margin-top: 0;
	}

	body.leet-woo form.checkout #order_review {
		grid-column: 2;
		grid-row: 2;
		position: sticky;
		top: calc(var(--nav-h, 58px) + 20px);
	}

	/* Dans une colonne plus etroite, facturation et livraison s'empilent. */
	body.leet-woo #customer_details .col-1,
	body.leet-woo #customer_details .col-2 {
		width: 100%;
		float: none;
		margin: 0 0 8px;
	}
}

/* Les deux bandeaux repliables (connexion, code promo) : discrets, pas des
 * blocs violets qui captent l'attention avant le formulaire. */
body.leet-woo .woocommerce-form-login-toggle .woocommerce-info,
body.leet-woo .woocommerce-form-coupon-toggle .woocommerce-info,
body.leet-woo .woocommerce-info {
	border: 1px solid var(--l-line);
	border-top: 1px solid var(--l-line);
	background: rgba(255, 255, 255, .025);
	color: var(--l-muted);
	font-size: 13px;
	padding: 12px 16px;
	border-radius: 10px;
}

body.leet-woo .woocommerce-info a {
	color: var(--l-brand);
	font-weight: 600;
}

/* Récapitulatif : hiérarchie plus lisible. */
body.leet-woo .woocommerce-checkout-review-order-table tfoot .order-total th,
body.leet-woo .woocommerce-checkout-review-order-table tfoot .order-total td {
	padding-top: 16px;
	border-top: 1px solid var(--l-line2);
}

body.leet-woo #order_review_heading {
	font-size: 15px;
	letter-spacing: .12em;
	color: var(--l-muted);
	margin-bottom: 14px;
}

/* Le recapitulatif est deja porte par le panneau #order_review : le tableau
 * qu'il contient ne doit pas redessiner sa propre carte, sinon on empile deux
 * fonds et deux bordures. */
body.leet-woo #order_review table.shop_table,
body.leet-woo .cart_totals table.shop_table {
	background: transparent;
	border: none;
	border-radius: 0;
	backdrop-filter: none;
	margin: 0;
	width: 100%;
}

body.leet-woo #order_review table.shop_table th,
body.leet-woo .cart_totals table.shop_table th {
	background: transparent;
	border-bottom: 1px solid var(--l-line);
	padding: 10px 0;
}

body.leet-woo #order_review table.shop_table td,
body.leet-woo .cart_totals table.shop_table td {
	padding: 12px 0;
	border-top: 1px solid var(--l-line);
	text-align: right;
}

body.leet-woo #order_review table.shop_table td:first-child,
body.leet-woo #order_review table.shop_table th:first-child,
body.leet-woo .cart_totals table.shop_table th:first-child {
	text-align: left;
}

/* La ligne produit reste lisible : nom a gauche, montant a droite. */
body.leet-woo #order_review .cart_item td.product-name {
	color: var(--l-ink);
	font-weight: 600;
}

body.leet-woo #order_review .cart_item td.product-name .product-quantity {
	color: var(--l-faint);
	font-family: var(--l-mono);
	font-size: 12px;
}

/* Les intitules de totaux : discrets, alignes a gauche. */
body.leet-woo #order_review tfoot th,
body.leet-woo .cart_totals tfoot th,
body.leet-woo .cart_totals th {
	font-family: var(--l-mono);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--l-faint);
	font-weight: 500;
	vertical-align: top;
}