/*
 * Page panier, mise en page mobile (inc/shop/panier-mobile.php).
 * Chargée seulement si activée (classe body.pn-m2). Tout est sous 768 px : tablette et
 * ordinateur gardent la page actuelle. Mêmes repères que la fiche produit mobile.
 */

.m2-only { display: none; }
/* Tablette et ordinateur : jamais les blocs mobiles, même si un style du site leur donne un affichage. */
@media (min-width: 768px) { .m2-only { display: none !important; } }

@media (max-width: 767.98px) {

	/* Barre noire du haut : retirée, le panier est déjà dans le bandeau. */
	body.pn-m2 > .bg-ink.text-cream { display: none; }

	body.pn-m2 #main > section.bg-cream > div { padding: 16px 0 0; }

	/* ---------- Titre et livraison ---------- */
	body.pn-m2 .pn-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 18px; }
	body.pn-m2 .pn-tete h1 { margin: 0; font-size: 33px; line-height: 1.02; font-weight: 500; }
	body.pn-m2 .pn-nb { display: inline; font-size: 12.5px; color: #7a7268; }
	body.pn-m2 .pn-port { display: block; margin: 12px 16px 0; padding: 11px 14px; border-radius: 14px; background: #F1EBE2; font-size: 13px; line-height: 1.45; color: #3d3832; }
	body.pn-m2 .pn-port[hidden] { display: none; }
	body.pn-m2 .pn-port.ok { display: flex; align-items: center; gap: 8px; background: #EDF3EE; color: #2F6B45; }
	body.pn-m2 .pn-port.ok i { flex: none; width: 7px; height: 7px; border-radius: 4px; background: #3C8A63; }
	body.pn-m2 .pn-port .barre { display: block; height: 5px; margin-top: 8px; border-radius: 3px; background: rgba(29,26,23,.08); overflow: hidden; }
	body.pn-m2 .pn-port .barre span { display: block; height: 100%; border-radius: 3px; background: #C9A979; transition: width .3s; }
	body.pn-m2 #cart-progress-wrap { display: none !important; }
	body.pn-m2 #cart-stock-msg { margin: 12px 16px 0 !important; }

	/* ---------- Articles ---------- */
	body.pn-m2 #cart-wrap:not(.hidden) { display: block; margin-top: 12px; }
	body.pn-m2 #cart-items { margin: 0 16px; padding: 0 12px; border-radius: 16px; box-shadow: none; border: 1px solid rgba(29,26,23,.07); }
	body.pn-m2 #cart-items > li { gap: 12px; padding: 12px 0; align-items: flex-start; }
	body.pn-m2 #cart-items .cart-img { width: 64px; height: 64px; border-radius: 12px; }
	body.pn-m2 #cart-items .cart-name { display: block; font-family: Inter, system-ui, sans-serif; font-style: normal; font-size: 14px; font-weight: 500; line-height: 1.3; color: #1D1A17; background: none; }
	body.pn-m2 #cart-items .cart-variant { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: #F1EBE2; font-size: 11.5px; color: #3d3832; }
	body.pn-m2 #cart-items .cart-variant:empty { display: none; }
	body.pn-m2 #cart-items .pn-u { display: block; margin-top: 3px; font-size: 12px; color: #7a7268; }
	body.pn-m2 #cart-items .cart-actions { margin-top: 8px; }
	body.pn-m2 #cart-items .cart-qtybox { height: 34px; background: #fff; }
	body.pn-m2 #cart-items .cart-qtybox button { width: 32px; height: 32px; padding: 0; font-size: 16px; color: #5a544c; }
	body.pn-m2 #cart-items .cart-qty { font-weight: 500; }
	body.pn-m2 #cart-items .cart-side { min-height: 0; align-self: stretch; }
	body.pn-m2 #cart-items .cart-line-total { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
	body.pn-m2 #cart-items .cart-remove { margin-top: auto; padding: 8px 0 6px; border: 0; background: none; color: #7a7268; font-size: 12.5px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
	body.pn-m2 #cart-items .cart-remove svg { display: none; }
	body.pn-m2 #cart-items .cart-remove::before { content: "Retirer"; }

	/* ---------- Récapitulatif : une carte, un ordre de lecture ---------- */
	body.pn-m2 #cart-wrap > aside { display: flex; flex-direction: column; margin: 16px 16px 0; padding: 16px; border-radius: 16px; box-shadow: none; border: 1px solid rgba(29,26,23,.07); }
	body.pn-m2 #cart-wrap > aside > h2, body.pn-m2 #cart-wrap > aside > .hairline { display: none; }
	/* Deux cases côte à côte (en ligne plutôt qu'en grille : un fieldset en grille est capricieux sous Safari) */
	body.pn-m2 .mld-recep { order: 1; margin: 0; font-size: 0; }
	body.pn-m2 .mld-recep legend { margin: 0 0 8px; font-size: 11px; letter-spacing: .1em; color: #7a7268; }
	body.pn-m2 .mld-recep label { position: relative; display: inline-flex; vertical-align: top; width: calc(50% - 4px); flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; padding: 10px 12px; border-radius: 12px; }
	body.pn-m2 .mld-recep label + label { margin-left: 8px; }
	body.pn-m2 .mld-recep label:has(input:checked) { border: 1.5px solid #1D1A17; background: #FAF8F6; }
	body.pn-m2 .mld-recep input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; min-width: 0; }
	body.pn-m2 .mld-recep label:has(input:focus-visible) { outline: 2px solid #7E6040; outline-offset: 2px; }
	body.pn-m2 .mld-recep-n { font-size: 13.5px; font-weight: 500; }
	body.pn-m2 .mld-recep-p { font-size: 12px; font-weight: 400; color: #7a7268; }
	body.pn-m2 .mld-recep-adr { margin: 8px 0 0; padding: 0; font-size: 12.5px; color: #5a544c; }
	body.pn-m2 .mld-decompte { order: 2; margin: 14px 0 0; gap: 7px; font-size: 13.5px; }
	body.pn-m2 .mld-promo { order: 3; margin: 10px 0 0; }
	body.pn-m2 .mld-promo summary { font-size: 12.5px; font-weight: 600; text-decoration: none; }
	body.pn-m2 .pn-o-total { order: 4; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(29,26,23,.08); }
	body.pn-m2 .pn-o-total > span:first-child { font-weight: 600; }
	body.pn-m2 #cart-total { font-family: Inter, system-ui, sans-serif; font-size: 24px; font-weight: 600; color: #6E4E2E; font-variant-numeric: tabular-nums; }
	body.pn-m2 .pn-o-tva { order: 5; margin: 2px 0 0; text-align: right; font-style: normal; color: #7a7268; }
	body.pn-m2 .mld-coord { order: 6; margin-top: 14px; }
	body.pn-m2.logged-in .mld-coord > label[for="cart-email"], body.pn-m2.logged-in #cart-email, body.pn-m2.logged-in #cart-email + .mld-coord-aide { display: none; }
	body.pn-m2 .mld-coord-aide { margin-bottom: 0; }
	body.pn-m2 .pn-compte { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; font-size: 12.5px; font-weight: 400; line-height: 1.45; color: #3d3832; cursor: pointer; }
	body.pn-m2 .pn-compte input { flex: none; width: 18px; height: 18px; min-width: 18px; margin: 1px 0 0; padding: 0; border-radius: 4px; background: none; -webkit-appearance: checkbox; appearance: auto; accent-color: #1D1A17; }
	body.pn-m2 .pn-compte > span { margin: 0; font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #1D1A17; }
	body.pn-m2 .pn-compte small { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 400; color: #7a7268; }
	body.pn-m2 .mld-tel { margin-top: 12px; }
	body.pn-m2 .cart-err { order: 7; margin-top: 10px; }
	body.pn-m2 #cart-checkout { order: 8; height: 50px; margin-top: 14px; padding: 0; font-size: 15px; }
	body.pn-m2 #cart-contact { order: 8; margin-top: 10px; }
	body.pn-m2 .cart-secure { order: 9; margin-top: 12px; }
	body.pn-m2 .cart-pay-logos { order: 10; margin-top: 10px; }
	body.pn-m2 .cart-cgv { order: 11; margin-top: 12px; font-size: 11.5px; text-align: center; color: #7a7268; }
	body.pn-m2 .pn-o-cont { order: 12; margin-top: 14px; }

	/* ---------- Sous le récapitulatif ---------- */
	body.pn-m2 .pn-compl { display: block; margin: 28px 16px 0; }
	body.pn-m2 .pn-compl[hidden] { display: none; }
	body.pn-m2 .pn-titre { margin: 0 2px 12px; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; font-size: 24px; line-height: 1.1; color: #1D1A17; }
	body.pn-m2 .pn-car { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 16px; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; list-style: none; }
	body.pn-m2 .pn-car::-webkit-scrollbar { display: none; }
	body.pn-m2 .pn-car li { flex: none; width: 136px; scroll-snap-align: start; display: flex; flex-direction: column; padding-bottom: 10px; background: #fff; border: 1px solid rgba(29,26,23,.08); border-radius: 14px; overflow: hidden; }
	body.pn-m2 .pn-car .im { position: relative; }
	body.pn-m2 .pn-car img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
	body.pn-m2 .pn-car .t { padding: 9px 10px 0; min-height: 3.5em; font-size: 12.5px; line-height: 1.3; color: #1D1A17; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	body.pn-m2 .pn-car .pr { padding: 3px 10px 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
	body.pn-m2 .pn-car .pr s { margin-left: 3px; font-size: 11px; font-weight: 400; color: #9a9288; }
	body.pn-m2 .pn-ic { position: absolute; right: 8px; bottom: 8px; width: 36px; height: 36px; border: 0; border-radius: 18px; background: rgba(250,248,246,.95); color: #1D1A17; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(29,26,23,.18); }
	body.pn-m2 .pn-reass { display: grid; gap: 7px; margin: 24px 18px 0; padding: 0; list-style: none; font-size: 13px; color: #3d3832; }
	body.pn-m2 .pn-reass li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; }
	body.pn-m2 .pn-reass svg { flex: none; margin-top: 2px; color: #4F7A5C; }
	body.pn-m2 .pn-reass em { font-style: normal; color: #8a8278; }
	body.pn-m2 .pn-qst { display: block; margin: 24px 16px 40px; padding: 16px; border-radius: 16px; background: #1D1A17; color: #F1EBE2; }
	body.pn-m2 .pn-qst h2 { margin: 0 0 4px; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; font-size: 23px; line-height: 1.1; color: #fff; }
	body.pn-m2 .pn-qst p { margin: 0 0 10px; font-size: 13px; color: #d9cfbf; }
	body.pn-m2 .pn-qst a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 20px; background: #D7C3A5; color: #1D1A17; font-size: 13px; font-weight: 600; text-decoration: none; }

	/* ---------- Barre fixe : total et paiement ---------- */
	body.pn-m2 .pn-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(250,248,246,.97); border-top: 1px solid rgba(29,26,23,.08); transform: translateY(110%); transition: transform .25s; }
	body.pn-m2 .pn-bar.is-on { transform: none; }
	body.pn-m2 .pn-bar .p { display: flex; flex-direction: column; line-height: 1; }
	body.pn-m2 .pn-bar small { margin-bottom: 3px; font-size: 10.5px; color: #7a7268; }
	body.pn-m2 .pn-bar b { font-size: 19px; font-weight: 600; color: #1D1A17; font-variant-numeric: tabular-nums; white-space: nowrap; }
	body.pn-m2 .pn-bar button { flex: 1; height: 46px; border: 0; border-radius: 23px; background: #D7C3A5; color: #1D1A17; font-size: 14.5px; font-weight: 600; }
	body.pn-m2 .pn-bar button:disabled { opacity: .6; }
	body.pn-m2:has(#mobile-menu[aria-hidden="false"]) .pn-bar { display: none; }
	#mld-consent:not([hidden]) ~ .pn-bar { transform: translateY(110%) !important; }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
	body.pn-m2 .pn-bar, body.pn-m2 .pn-port .barre span { transition: none; }
}