/* =============================================================================
   MDN Cart — Styles
   Override de woocommerce/cart/cart.php + cart-totals.php
   ============================================================================= */

:root {
	--mdn-green: #005D4B;
	--mdn-green-dark: #003c30;
	--mdn-green-soft: #e8f1ec;
	--mdn-brown: #EF8544;
	--mdn-brown-soft: #fff2e6;
	--mdn-ink: #1f2722;
	--mdn-ink-2: #4b544f;
	--mdn-ink-3: #7a847e;
	--mdn-line: #e3e1d8;
	--mdn-line-2: #eeede5;
	--mdn-paper: #ffffff;
	--mdn-canvas: #f6f4ee;
	--mdn-stock: #16a34a;
	--mdn-radius: 6px;
}

/* ---------------------------------------------------------------------------
   Layout 2 colonnes — force la grille même dans le widget Elementor Cart
   --------------------------------------------------------------------------- */
.woocommerce-cart .mdn-cart-layout,
.elementor-widget-woocommerce-cart .mdn-cart-layout {
	display: grid !important;
	grid-template-columns: 1fr 380px;
	gap: 28px;
	align-items: start;
	width: 100%;
}

.mdn-cart-main {
	min-width: 0;
}

.mdn-cart-aside {
	position: sticky;
	top: 100px;
	align-self: start;
	min-width: 0;
	display: block !important;
}

/* Neutraliser les wrappers Elementor résiduels si certains restent en place */
.elementor-widget-woocommerce-cart .e-cart__container,
.elementor-widget-woocommerce-cart .e-cart__column,
.elementor-widget-woocommerce-cart .e-cart__column-inner {
	display: contents !important;
}

/* ---------------------------------------------------------------------------
   Carte panier
   --------------------------------------------------------------------------- */
.mdn-cart-card {
	background: var(--mdn-paper);
	border: 1px solid var(--mdn-line);
	border-radius: var(--mdn-radius);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
	overflow: hidden;
}

/* Entête grille */
.mdn-cart-thead,
.mdn-cart-row {
	display: grid;
	grid-template-columns: 32px 96px 1fr 110px 130px 130px;
	gap: 16px;
	align-items: center;
	padding: 18px 24px;
}

.mdn-cart-thead {
	font-size: 15px;
	font-weight: 700;
	color: var(--mdn-ink);
	background: #fff;
}

.mdn-th-name { padding-left: 4px; }
.mdn-th-price,
.mdn-th-subtotal { text-align: right; }
.mdn-th-qty { text-align: center; }

/* Lignes */
.mdn-cart-row {
	padding: 22px 24px;
	border-top: 1px solid var(--mdn-line);
}

/* Remove */
.mdn-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: var(--mdn-ink-3);
	background: none;
	border: 0;
	padding: 0;
	font-size: 22px;
	line-height: 1;
	text-decoration: none;
	border-radius: 50%;
	transition: background 0.15s, color 0.15s;
}

.mdn-remove:hover {
	color: var(--mdn-ink);
	background: var(--mdn-line-2);
}

/* Vignette */
.mdn-cell-thumb img,
.mdn-cell-thumb .mdn-thumb-link img {
	width: 88px;
	height: 88px;
	object-fit: cover;
	border: 1px solid var(--mdn-line);
	border-radius: 4px;
	display: block;
}

.mdn-cell-thumb a { display: inline-block; line-height: 0; }

/* Nom + stock */
.mdn-product-name,
.mdn-cell-name a {
	color: var(--mdn-brown);
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
	line-height: 1.3;
	display: inline-block;
}

.mdn-product-name:hover,
.mdn-cell-name a:hover { text-decoration: underline; }

.mdn-stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mdn-stock::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.mdn-stock--in { color: var(--mdn-stock); }
.mdn-stock--out { color: #b91c1c; }
.mdn-stock--backorder { color: var(--mdn-brown); margin: 8px 0 0; }

/* Variations / attributs WC */
.mdn-cell-name dl.variation {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--mdn-ink-2);
}

.mdn-cell-name dl.variation dt,
.mdn-cell-name dl.variation dd {
	display: inline;
	margin: 0;
}

.mdn-cell-name dl.variation dd { margin-right: 8px; }

/* Prix + Sous-total */
.mdn-cell-price,
.mdn-cell-subtotal {
	font-weight: 700;
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--mdn-ink);
}

.mdn-cell-price .woocommerce-Price-amount,
.mdn-cell-subtotal .woocommerce-Price-amount { font-weight: 700; }

/* Quantité */
.mdn-cell-qty {
	display: flex;
	justify-content: center;
}

.mdn-cell-qty .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--mdn-ink);
	border-radius: 2px;
	overflow: hidden;
}

.mdn-cell-qty .quantity > * { margin: 0 !important; }

/* Boutons +/- injectés par notre JS (ou plugin mdn-qty-buttons) */
.mdn-cell-qty .mdn-qty-btn {
	width: 32px;
	height: 36px;
	background: #fff;
	border: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--mdn-ink);
	cursor: pointer;
	transition: background 0.15s;
}

.mdn-cell-qty .mdn-qty-btn:hover { background: var(--mdn-green-soft); }
.mdn-cell-qty .mdn-qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.mdn-cell-qty input.qty,
.mdn-cell-qty input.mdn-qty-input {
	width: 46px;
	height: 36px;
	border: 0;
	border-left: 1px solid var(--mdn-line);
	border-right: 1px solid var(--mdn-line);
	text-align: center;
	font-weight: 600;
	font-size: 15px;
	box-shadow: none !important;
	padding: 0 !important;
	-moz-appearance: textfield;
}

.mdn-cell-qty input.qty::-webkit-outer-spin-button,
.mdn-cell-qty input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Estimateur de frais d'expédition (intégré dans la sidebar)
   --------------------------------------------------------------------------- */
.mdn-totals-row--calc {
	display: block;
	padding: 12px 0 0;
	border-top: 1px dashed var(--mdn-line);
	margin-top: 4px;
}

/* État 1 : pas d'adresse → form ouvert, button d'expand caché */
.mdn-calc--open .shipping-calculator-button { display: none !important; }
.mdn-calc--open .shipping-calculator-form { display: block !important; }

/* État 2 : adresse calculée → recap + lien "Modifier la livraison", form caché par défaut */
.mdn-calc__recap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 12px;
	row-gap: 12px;
	align-items: baseline;
}

.mdn-calc__address {
	font-size: 13px;
	color: var(--mdn-ink-2);
	font-weight: 500;
	min-width: 0;
	grid-column: 1;
	grid-row: 1;
}

/* Le form WC ne participe pas au layout — ses enfants deviennent grid items */
.mdn-calc__recap > .woocommerce-shipping-calculator {
	display: contents !important;
	margin: 0;
}

.mdn-calc__recap .shipping-calculator-button {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
}

/* Le form section saute sur sa propre ligne pleine largeur quand visible */
.mdn-calc__recap .shipping-calculator-form {
	grid-column: 1 / -1;
	width: 100%;
	max-width: none;
}

.mdn-calc--collapsed .shipping-calculator-button {
	display: inline-block;
	color: var(--mdn-brown);
	font-weight: 600;
	font-size: 13px;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}

.mdn-calc--collapsed .shipping-calculator-button:hover {
	color: var(--mdn-green);
}

/* Formulaire calc — style commun aux deux états */
.mdn-totals-row--calc .woocommerce-shipping-calculator { margin: 0; }

.mdn-totals-row--calc .shipping-calculator-form {
	margin-top: 12px;
	padding: 0;
}

.mdn-totals-row--calc .shipping-calculator-form .form-row {
	margin: 0 0 10px;
}

.mdn-totals-row--calc .shipping-calculator-form label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--mdn-ink-2);
	margin-bottom: 4px;
}

.mdn-totals-row--calc .shipping-calculator-form input[type="text"],
.mdn-totals-row--calc .shipping-calculator-form select,
.mdn-totals-row--calc .shipping-calculator-form .select2-container .select2-selection {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--mdn-line);
	border-radius: var(--mdn-radius);
	font-size: 13px;
	box-sizing: border-box;
}

.mdn-totals-row--calc .shipping-calculator-form button[name="calc_shipping"] {
	background: var(--mdn-brown) !important;
	color: #fff !important;
	border: 0 !important;
	padding: 9px 18px !important;
	border-radius: var(--mdn-radius) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	transition: background 0.2s;
	width: 100%;
}

.mdn-totals-row--calc .shipping-calculator-form button[name="calc_shipping"]:hover {
	background: #d96f2b !important;
}

/* ---------------------------------------------------------------------------
   Sidebar — Récap
   --------------------------------------------------------------------------- */
.mdn-cart-collaterals .cross-sells { display: none; } /* Cross-sells WC natifs : on les remplace par le plugin perso */

.mdn-cart-totals {
	background: var(--mdn-paper);
	border: 1px solid var(--mdn-line);
	border-radius: var(--mdn-radius);
	padding: 24px;
}

.mdn-cart-totals__title {
	margin: 0 0 18px;
	font-size: 20px;
	font-weight: 700;
	color: var(--mdn-ink);
}

.mdn-cart-totals__rows {
	display: flex;
	flex-direction: column;
}

.mdn-totals-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 8px 0;
	font-size: 15px;
}

.mdn-totals-row__label {
	font-weight: 600;
	color: var(--mdn-ink);
}

.mdn-totals-row__value {
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: var(--mdn-ink);
}

.mdn-totals-row__label--muted,
.mdn-totals-row__value--muted {
	color: var(--mdn-ink-3);
	font-weight: 500;
	font-size: 13px;
}

/* Ligne expédition — méthodes en colonne */
.mdn-totals-row--shipping {
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
}

.mdn-totals-row--shipping .mdn-totals-row__label {
	font-weight: 700;
	margin-bottom: 2px;
}

.mdn-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mdn-shipping-methods li {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	text-align: left;
}

.mdn-shipping-methods input[type="radio"] {
	flex-shrink: 0;
	margin: 0;
	accent-color: var(--mdn-green);
}

.mdn-shipping-methods label {
	flex: 1;
	cursor: pointer;
	text-align: left;
	margin: 0;
	padding: 0;
}

.mdn-shipping-empty {
	color: var(--mdn-ink-3);
	font-size: 13px;
	font-style: italic;
}

/* Calculateur dans la sidebar (fallback si pas d'adresse) */
.mdn-totals-row--shipping-empty .shipping-calculator-button {
	display: inline-block;
	margin-top: 6px;
	color: var(--mdn-brown);
	font-weight: 600;
	font-size: 13px;
	text-decoration: none;
}

.mdn-totals-row--shipping-empty .shipping-calculator-button:hover { text-decoration: underline; }

.mdn-totals-row--shipping-empty .shipping-calculator-form {
	margin-top: 10px;
}

/* Ligne total */
.mdn-totals-row--total {
	padding-top: 16px;
	margin-top: 8px;
	border-top: 1px solid var(--mdn-line);
	font-size: 17px;
	font-weight: 800;
}

.mdn-totals-row--total .mdn-totals-row__label { font-weight: 800; }

.mdn-totals-row--total .mdn-totals-row__value,
.mdn-totals-row--total .woocommerce-Price-amount {
	font-size: 20px;
	font-weight: 800;
}

/* small (TVA inline) après le total */
.mdn-totals-row--total .woocommerce-Price-amount + small,
.mdn-totals-row--total small {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: var(--mdn-ink-3);
	margin-top: 2px;
}

/* Bouton "Passer la commande" */
.mdn-proceed-to-checkout {
	margin-top: 18px;
}

.mdn-proceed-to-checkout .checkout-button.button {
	width: 100%;
	display: block;
	padding: 16px !important;
	background: var(--mdn-green) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--mdn-radius) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	text-decoration: none !important;
	transition: background 0.2s;
}

.mdn-proceed-to-checkout .checkout-button.button:hover {
	background: var(--mdn-green-dark) !important;
}

/* ---------------------------------------------------------------------------
   Page layout — élargir le contenu (cohérent avec checkout)
   --------------------------------------------------------------------------- */
.woocommerce-cart .page-content,
body.woocommerce-cart .page-content {
	width: 90% !important;
	max-width: 90% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}

/* Masquer les notices natives "Mettre à jour le panier" affichées sous la table car update auto */
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message {
	border-radius: var(--mdn-radius);
}

/* ---------------------------------------------------------------------------
   Responsive — tablette large (la grille 2-col casse vers 1380px car
   le tableau a 6 colonnes fixes ~498px + 1fr ; on stack dès 1279px)
   --------------------------------------------------------------------------- */
@media (max-width: 1279px) {
	.woocommerce-cart .mdn-cart-layout,
	.elementor-widget-woocommerce-cart .mdn-cart-layout {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.mdn-cart-aside {
		position: static;
		top: auto;
		max-width: 560px;
		width: 100%;
		margin: 0 auto;
	}
}

/* ---------------------------------------------------------------------------
   Responsive — tablette portrait (1023px) : resserrage des colonnes
   --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
	.mdn-cart-thead,
	.mdn-cart-row {
		grid-template-columns: 28px 80px 1fr 90px 110px 110px;
		gap: 10px;
		padding: 16px;
	}

	.mdn-cell-thumb img,
	.mdn-cell-thumb .mdn-thumb-link img {
		width: 72px;
		height: 72px;
	}

	.mdn-product-name { font-size: 15px; }
}

/* ---------------------------------------------------------------------------
   Responsive — mobile (≤767px)
   Refonte en cartes inspirée de la maquette claude-design :
   - thumb à gauche sur 2 rangs
   - nom + prix unitaire à droite
   - séparateur dashed
   - qty (gauche) + sous-total (droite) en bas
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {

	.mdn-cart-thead { display: none; }

	/* Le wrapper "card" global disparaît : chaque ligne devient sa propre carte */
	.mdn-cart-card {
		background: transparent;
		border: 0;
		box-shadow: none;
		overflow: visible;
	}

	.mdn-cart-tbody {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.mdn-cart-row {
		grid-template-columns: 84px 1fr;
		grid-template-rows: auto auto auto auto;
		gap: 4px 14px;
		padding: 14px;
		background: var(--mdn-paper);
		border: 1px solid var(--mdn-line);
		border-radius: var(--mdn-radius);
		position: relative;
		align-items: start;
	}

	/* Séparateur dashed avant la ligne qty/subtotal */
	.mdn-cart-row::after {
		content: "";
		grid-column: 1 / -1;
		grid-row: 3;
		border-top: 1px dashed var(--mdn-line);
		margin: 10px 0 2px;
	}

	/* Bouton × en absolu en haut à droite */
	.mdn-cell-remove {
		position: absolute;
		top: 6px;
		right: 6px;
	}
	.mdn-cell-remove .mdn-remove {
		width: 26px;
		height: 26px;
		font-size: 20px;
	}

	/* Vignette : col 1, span 2 lignes (nom + prix) */
	.mdn-cell-thumb {
		grid-column: 1;
		grid-row: 1 / span 2;
	}
	.mdn-cell-thumb img,
	.mdn-cell-thumb .mdn-thumb-link img {
		width: 84px;
		height: 84px;
	}

	/* Nom + stock */
	.mdn-cell-name {
		grid-column: 2;
		grid-row: 1;
		padding-right: 28px; /* place pour le × */
	}
	.mdn-product-name,
	.mdn-cell-name a {
		font-size: 14px;
	}
	.mdn-stock {
		font-size: 11px;
		margin-top: 4px;
	}

	/* Prix unitaire sous le nom, dans la même colonne */
	.mdn-cell-price {
		grid-column: 2;
		grid-row: 2;
		text-align: left;
		font-size: 13px;
		color: var(--mdn-ink-3);
		font-weight: 500;
		align-self: start;
	}
	.mdn-cell-price::before { display: none; }
	.mdn-cell-price .woocommerce-Price-amount {
		color: var(--mdn-ink);
		font-weight: 700;
	}

	/* Bas de carte : qty à gauche, sous-total à droite */
	.mdn-cell-qty {
		grid-column: 1;
		grid-row: 4;
		justify-content: flex-start;
	}

	.mdn-cell-subtotal {
		grid-column: 2;
		grid-row: 4;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		text-align: right;
		font-size: 17px;
		font-weight: 800;
	}

	/* Sidebar : récap plus compact */
	.mdn-cart-totals { padding: 18px; }
	.mdn-cart-totals__title { font-size: 18px; }
	.mdn-totals-row { font-size: 14px; }
	.mdn-totals-row--total { font-size: 16px; }
	.mdn-totals-row--total .mdn-totals-row__value,
	.mdn-totals-row--total .woocommerce-Price-amount {
		font-size: 18px;
	}

	/* Page : pleine largeur sur mobile */
	.woocommerce-cart .page-content,
	body.woocommerce-cart .page-content {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	/* Bouton checkout reste pleine largeur */
	.mdn-proceed-to-checkout .checkout-button.button {
		padding: 14px !important;
		font-size: 15px !important;
	}
}

/* ---------------------------------------------------------------------------
   Responsive — très petits écrans (≤380px) : ajustements fins
   --------------------------------------------------------------------------- */
@media (max-width: 380px) {
	.mdn-cart-row {
		grid-template-columns: 72px 1fr;
		padding: 12px;
	}
	.mdn-cell-thumb img,
	.mdn-cell-thumb .mdn-thumb-link img {
		width: 72px;
		height: 72px;
	}
	.mdn-cell-qty input.qty,
	.mdn-cell-qty input.mdn-qty-input {
		width: 38px;
	}
	.mdn-cell-qty .mdn-qty-btn {
		width: 28px;
	}
}