/* ==========================================================================
   cmv3 — pagina de coș (/cos/), design v3, macheta „Cos.dc.html”.
   ZONĂ PROPRIE: perechea acestui fișier e mu-plugins/cmv3-cos.php.
   Toate valorile sunt luate din machetă, nu aproximate.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Curățăm ce pune tema în jurul conținutului paginii de coș
   -------------------------------------------------------------------------- */

body.woocommerce-cart .hero-section,
body.woocommerce-cart .entry-header,
body.woocommerce-cart .ct-breadcrumbs { display: none !important; }

/* Subsolul mare (al altui agent) nu apare în machetă pe coș — îl ascundem doar aici. */
body.woocommerce-cart .cmv-footer,
body.woocommerce-cart #footer { display: none !important; }

/* În macheta „Cos.dc.html" bara de categorii nu există pe pagina de coș —
   antetul rămâne (logo, căutare, linkuri, butonul de coș evidențiat), bara dispare. */
body.woocommerce-cart #header [data-row="middle"] { display: none !important; }

/* ...dar pe mobil rândul acela ESTE antetul (logo + hamburger), iar `.cmv-masthead` e ascuns sub
   1000px ⇒ pagina rămânea complet fără antet și clientul nu se mai putea întoarce în magazin. */
@media (max-width: 999px) {
	body.woocommerce-cart #header [data-row="middle"] { display: block !important; }
}

body.woocommerce-cart #main .ct-container-full,
body.woocommerce-cart #main .ct-container {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	max-width: none;
}
body.woocommerce-cart #main article.page { margin: 0; }
body.woocommerce-cart .entry-content {
	max-width: none !important;
	width: 100%;
	margin: 0;
	padding: 0;
}
body.woocommerce-cart .entry-content > .dpc {
	max-width: none !important;
	width: 100%;
	margin: 0;
}

/* Butonul de coș din antet e ACTIV pe pagina de coș (ca în machetă). */
body.woocommerce-cart .cmv-masthead-cart {
	border-color: oklch(0.5 0.15 260) !important;
	color: oklch(0.5 0.15 260) !important;
	background: oklch(0.97 0.015 258) !important;
}

/* --------------------------------------------------------------------------
   1. Cadrul paginii
   -------------------------------------------------------------------------- */

.dpc {
	background: #FFFFFF;
	color: #131a26;
	font-family: 'Archivo', system-ui, sans-serif;
	/* Macheta nu impune înălțime de rând nicăieri în afară de numele produsului;
	   fără asta, line-height-ul temei (1.6+) umflă rândurile cu ~15px. */
	line-height: normal;
}
.dpc *,
.dpc *::before,
.dpc *::after { box-sizing: border-box; }

.cmvc--lucreaza { opacity: 0.55; pointer-events: none; transition: opacity 0.12s linear; }

/* --------------------------------------------------------------------------
   2. Indicatorul de pași
   -------------------------------------------------------------------------- */

.cmvc-pasi {
	max-width: 1280px;
	margin: 0 auto;
	padding: 28px 32px 0;
	display: flex;
	justify-content: center;
}
.cmvc-pasi-in { display: flex; align-items: center; gap: 14px; }
.cmvc-pas { display: flex; align-items: center; gap: 9px; }
.cmvc-bul {
	width: 28px; height: 28px; border-radius: 50%;
	background: #EEF3FB; color: #8B97A8;
	font-size: 13px; font-weight: 800;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.cmvc-pas-t { font-size: 14px; font-weight: 600; color: #8B97A8; white-space: nowrap; }
.cmvc-pas--activ .cmvc-bul { background: oklch(0.5 0.15 260); color: #FFFFFF; }
.cmvc-pas--activ .cmvc-pas-t { font-weight: 800; color: #16233D; }
.cmvc-linie { width: 56px; height: 2px; background: #dbe4f2; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   3. Mesajele WooCommerce (cupon greșit, stoc etc.)
   -------------------------------------------------------------------------- */

.cmvc-notite { max-width: 1280px; margin: 0 auto; padding: 20px 32px 0; }
.cmvc-notite-in ul,
.cmvc-notite-in .woocommerce-error,
.cmvc-notite-in .woocommerce-message,
.cmvc-notite-in .woocommerce-info {
	list-style: none;
	margin: 0 0 10px;
	padding: 13px 18px;
	border-radius: 11px;
	font-size: 13.5px;
	line-height: 1.45;
	border: 1px solid #dbe4f2;
	background: #FBFCFE;
	color: #33415c;
}
.cmvc-notite-in .woocommerce-error {
	border-color: oklch(0.85 0.06 25);
	background: oklch(0.97 0.02 25);
	color: oklch(0.45 0.16 25);
}
.cmvc-notite-in .woocommerce-message { border-color: #cfe3d5; background: #f4faf6; color: oklch(0.42 0.11 150); }
.cmvc-notite-in li { margin: 0; padding: 0; }
.cmvc-notite-in li + li { margin-top: 5px; }
.cmvc-notite-in .button { display: none; }
/* WooCommerce/Blocksy pun o iconiță absolută peste text — nu e în machetă.
   ⚠️ Mesajele nu vin mereu ca <ul>: WooCommerce 10 le dă ca <div class="woocommerce-message">,
   iar iconița lui rămânea suprapusă peste prima literă (se vedea pe telefon, 19.08). */
.cmvc-notite-in ul::before,
.cmvc-notite-in ul::after,
.cmvc-notite-in li::before,
.cmvc-notite-in li::after,
.cmvc-notite-in > *::before,
.cmvc-notite-in > *::after { content: none !important; display: none !important; }

/* --------------------------------------------------------------------------
   4. Aranjarea în două coloane
   -------------------------------------------------------------------------- */

.cmvc-grid {
	max-width: 1280px;
	margin: 0 auto;
	padding: 26px 32px 56px;
	display: flex;
	gap: 28px;
	align-items: flex-start;
}
.cmvc-main { flex: 1; min-width: 0; }

.cmvc-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.cmvc-titlu {
	margin: 0; padding: 0;
	font-size: 28px; font-weight: 800; color: #16233D; letter-spacing: -0.5px;
	line-height: 1.2;
}
.cmvc-numar { font-size: 14px; color: #8B97A8; }

/* --------------------------------------------------------------------------
   5. Cardul cu produse
   -------------------------------------------------------------------------- */

.cmvc-card { border: 1px solid #E3E8F0; border-radius: 16px; overflow: hidden; background: #FFFFFF; }
.cmvc-form { margin: 0; padding: 0; }

.cmvc-rand {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px 22px;
	border-bottom: 1px solid #edf1f7;
	background: #FFFFFF;
}

.cmvc-poza {
	width: 104px; height: 84px;
	border-radius: 9px;
	background: #f7f9fc;
	flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.cmvc-poza img {
	width: 100%; height: 100%;
	object-fit: contain;
	display: block;
	padding: 4px;
	border-radius: 9px;
	margin: 0;
}

.cmvc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cmvc-nume {
	font-size: 15px; font-weight: 700; color: #16233D !important;
	line-height: 1.35; text-decoration: none;
}
.cmvc-nume:hover { color: oklch(0.5 0.15 260) !important; }
.cmvc-cod { font-family: 'Space Grotesk', sans-serif; font-size: 11.5px; color: #8B97A8; }
.cmvc-stoc { font-size: 12.5px; font-weight: 700; }
.cmvc-stoc--in { color: oklch(0.55 0.13 150); }
.cmvc-stoc--com { color: oklch(0.6 0.14 60); }
.cmvc-variatie { font-size: 12px; color: #8B97A8; white-space: pre-line; }
.cmvc-variatie p { margin: 0; }

/* Selectorul de cantitate */
.cmvc-cant {
	display: flex; align-items: center;
	border: 1.5px solid #cdd6e4; border-radius: 10px;
	overflow: hidden; flex-shrink: 0;
	background: #FFFFFF;
}
.dpc .cmvc-cant-b {
	width: 36px; height: 38px;
	border: none; border-radius: 0;
	background: #FBFCFE;
	color: #33415c;
	font-size: 16px; font-weight: 400; line-height: 1;
	font-family: inherit;
	cursor: pointer;
	padding: 0; margin: 0;
	-webkit-appearance: none; appearance: none;
	display: flex; align-items: center; justify-content: center;
	box-shadow: none; text-transform: none; letter-spacing: normal;
	min-height: 0; min-width: 0;
	transition: background 0.12s linear, color 0.12s linear;
}
.dpc .cmvc-cant-b:hover { background: #EEF3FB; color: oklch(0.5 0.15 260); }
.cmvc-cant-n {
	width: 40px; text-align: center;
	font-size: 14.5px; font-weight: 800; color: #16233D;
	background: #FFFFFF;
	line-height: 38px;
}

/* Coloana de preț */
.cmvc-pret {
	width: 150px; flex-shrink: 0;
	display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
	text-align: right;
}
.cmvc-pret-t { font-size: 17px; font-weight: 800; color: #16233D; }
.cmvc-pret-v { font-size: 12.5px; color: #8B97A8; text-decoration: line-through; }
.cmvc-pret-n { font-size: 12px; color: #8B97A8; }
.cmvc-pret .woocommerce-Price-amount { color: inherit; font-size: inherit; font-weight: inherit; }

/* Butonul de ștergere */
.dpc .cmvc-sterge {
	width: 34px; height: 34px;
	border: none; border-radius: 9px;
	background: transparent;
	color: #b6c0cf;
	font-size: 16px; line-height: 1; font-family: inherit; font-weight: 400;
	cursor: pointer; flex-shrink: 0;
	padding: 0; margin: 0;
	-webkit-appearance: none; appearance: none;
	display: flex; align-items: center; justify-content: center;
	box-shadow: none; min-height: 0; min-width: 0;
	transition: background 0.12s linear, color 0.12s linear;
}
.dpc .cmvc-sterge:hover { background: oklch(0.95 0.03 25); color: oklch(0.5 0.16 25); }

/* Bara de jos a cardului */
.cmvc-bara {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; padding: 16px 22px; background: #FBFCFE;
}
.cmvc-cupon { display: flex; gap: 10px; align-items: center; margin: 0; }
.dpc .cmvc-cupon-in {
	border: 1.5px solid #cdd6e4; border-radius: 9px;
	padding: 10px 14px;
	font-size: 13.5px; font-family: inherit; color: #16233D;
	outline: none; width: 200px; background: #FFFFFF;
	height: auto; margin: 0; box-shadow: none;
}
.dpc .cmvc-cupon-in::placeholder { color: #93a0b4; }
.dpc .cmvc-cupon-in:focus { border-color: oklch(0.5 0.15 260); box-shadow: none; }
.dpc .cmvc-cupon-b {
	border: 1.5px solid #b9c7de; background: transparent;
	color: #16233D; font-weight: 700; font-size: 13px;
	padding: 10px 18px; border-radius: 9px;
	cursor: pointer; font-family: inherit;
	-webkit-appearance: none; appearance: none;
	box-shadow: none; text-transform: none; letter-spacing: normal;
	min-height: 0; line-height: 1.2;
	transition: border-color 0.12s linear, color 0.12s linear;
}
.dpc .cmvc-cupon-b:hover { border-color: oklch(0.5 0.15 260); color: oklch(0.5 0.15 260); background: transparent; }
.cmvc-continua { font-size: 13.5px; font-weight: 700; color: oklch(0.5 0.15 260) !important; text-decoration: none; white-space: nowrap; }
.cmvc-continua:hover { color: oklch(0.42 0.15 260) !important; }

/* Cupoanele deja aplicate (nu sunt în machetă — necesare ca să poată fi scoase) */
.cmvc-cupoane { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px 16px; background: #FBFCFE; }
.cmvc-cupon-chip {
	display: inline-flex; align-items: center; gap: 8px;
	border: 1px solid #cfe3d5; background: #f4faf6;
	color: oklch(0.42 0.11 150);
	border-radius: 999px; padding: 5px 12px;
	font-size: 12.5px; font-weight: 700;
}
.cmvc-cupon-chip a { color: oklch(0.42 0.11 150) !important; text-decoration: none; font-size: 11px; }

/* --------------------------------------------------------------------------
   6. „Merge bine împreună”
   -------------------------------------------------------------------------- */

.cmvc-cross { margin-top: 26px; }
.cmvc-cross-t { margin: 0 0 14px; padding: 0; font-size: 18px; font-weight: 800; color: #16233D; line-height: 1.3; }
.cmvc-cross-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.cmvc-cs {
	display: flex; align-items: center; gap: 14px;
	border: 1px solid #E3E8F0; border-radius: 12px;
	padding: 14px 16px; background: #FFFFFF;
}
.cmvc-cs-poza {
	width: 58px; height: 46px; border-radius: 7px;
	background: #f7f9fc; flex-shrink: 0; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
}
.cmvc-cs-poza img { width: 100%; height: 100%; object-fit: contain; display: block; margin: 0; padding: 2px; }
.cmvc-cs-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cmvc-cs-nume {
	font-size: 13.5px; font-weight: 700; color: #16233D !important; line-height: 1.3;
	text-decoration: none;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cmvc-cs-nume:hover { color: oklch(0.5 0.15 260) !important; }
.cmvc-cs-pret { font-size: 13px; font-weight: 800; color: #16233D; }
.cmvc-cs-pret .woocommerce-Price-amount { color: inherit; font-size: inherit; font-weight: inherit; }
.dpc .cmvc-add {
	border: 1.5px solid oklch(0.5 0.15 260); background: transparent;
	color: oklch(0.5 0.15 260) !important;
	font-weight: 700; font-size: 12.5px;
	padding: 9px 14px; border-radius: 9px;
	cursor: pointer; font-family: inherit; flex-shrink: 0;
	text-decoration: none; white-space: nowrap; line-height: 1.2;
	transition: background 0.12s linear, color 0.12s linear;
}
.dpc .cmvc-add:hover { background: oklch(0.5 0.15 260); color: #FFFFFF !important; }

/* --------------------------------------------------------------------------
   7. Bara laterală
   -------------------------------------------------------------------------- */

.cmvc-side {
	width: 380px; flex-shrink: 0;
	position: sticky; top: 20px;
	display: flex; flex-direction: column; gap: 14px;
}
.cmvc-sum {
	border: 1px solid #dbe4f2; border-radius: 16px;
	padding: 24px;
	box-shadow: 0 14px 34px rgba(22, 35, 61, 0.07);
	display: flex; flex-direction: column; gap: 12px;
	background: #FFFFFF;
}
.cmvc-sum-t { margin: 0 0 2px; padding: 0; font-size: 18px; font-weight: 800; color: #16233D; line-height: 1.3; }
.cmvc-r { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: #4A5568; }
.cmvc-r-v { font-weight: 700; color: #16233D; white-space: nowrap; }
.cmvc-r--economie { color: oklch(0.45 0.16 25); }
.cmvc-r--economie .cmvc-r-v { color: oklch(0.45 0.16 25); }
.cmvc-r .woocommerce-Price-amount { color: inherit; font-size: inherit; font-weight: inherit; }
/* Explicația de sub rândul de transport, când costul nu e încă știut (07.09.2026).
   Cardul e `flex column` cu `gap: 12px` ⇒ marginea negativă o lipește de rândul de
   deasupra, ca să se citească drept continuarea lui, nu ca un rând nou de sumar. */
.cmvc-r-info { margin-top: -8px; font-size: 12px; line-height: 1.35; color: #8B97A8; }

.cmvc-total {
	border-top: 1px solid #edf1f7; padding-top: 12px;
	display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.cmvc-total-t { font-size: 15px; font-weight: 800; color: #16233D; }
.cmvc-total-v { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.cmvc-total-n { font-size: 26px; font-weight: 800; color: #16233D; line-height: 1.15; }
.cmvc-total-n .woocommerce-Price-amount { color: inherit; font-size: inherit; font-weight: inherit; }
.cmvc-total-tva { font-size: 12px; color: #8B97A8; }
.cmvc-total-tva .woocommerce-Price-amount { color: inherit; font-size: inherit; font-weight: inherit; }

.dpc .cmvc-cta {
	background: oklch(0.5 0.15 260); color: #FFFFFF !important;
	font-weight: 800; font-size: 15.5px;
	padding: 15px 0; border-radius: 11px;
	text-align: center; display: block; text-decoration: none;
	transition: background 0.12s linear;
}
.dpc .cmvc-cta:hover { background: oklch(0.43 0.15 260); color: #FFFFFF !important; }
.cmvc-nota { font-size: 12px; color: #8B97A8; text-align: center; }

.cmvc-gar {
	border: 1px solid #E3E8F0; border-radius: 14px;
	padding: 18px 20px;
	display: flex; flex-direction: column; gap: 8px;
	background: #FBFCFE;
}
.cmvc-gar span { font-size: 13px; color: #4A5568; }
.cmvc-gar i { color: oklch(0.5 0.15 260); font-weight: 800; font-style: normal; }
.cmvc-gar .cmv-wa,
.cmvc-gar a { font-weight: 700; color: oklch(0.48 0.13 150) !important; text-decoration: none; }

/* --------------------------------------------------------------------------
   8. Coșul gol
   -------------------------------------------------------------------------- */

.cmvc-gol {
	max-width: 1280px; margin: 0 auto;
	padding: 60px 32px 80px;
	display: flex; flex-direction: column; align-items: center; gap: 14px;
	text-align: center;
}
.cmvc-gol-ico {
	width: 74px; height: 74px; border-radius: 50%;
	background: #EEF3FB;
	display: flex; align-items: center; justify-content: center;
	font-size: 28px; color: oklch(0.5 0.15 260);
}
.cmvc-gol-t { margin: 0; padding: 0; font-size: 26px; font-weight: 800; color: #16233D; line-height: 1.25; }
.cmvc-gol-p { margin: 0; font-size: 14.5px; color: #4A5568; }
.dpc .cmvc-gol-b {
	background: oklch(0.5 0.15 260); color: #FFFFFF !important;
	font-weight: 700; font-size: 14.5px;
	padding: 13px 26px; border-radius: 10px;
	margin-top: 6px; text-decoration: none; display: inline-block;
	transition: background 0.12s linear;
}
.dpc .cmvc-gol-b:hover { background: oklch(0.43 0.15 260); color: #FFFFFF !important; }

/* --------------------------------------------------------------------------
   9. Subsolul redus
   -------------------------------------------------------------------------- */

.cmvc-subsol { background: #f7f9fc; border-top: 1px solid #E3E8F0; }
.cmvc-subsol-in {
	max-width: 1280px; margin: 0 auto;
	padding: 18px 32px;
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
}
.cmvc-insigne { display: flex; gap: 10px; flex-wrap: wrap; }
.cmvc-insigne span {
	border: 1px solid #dbe1ea; border-radius: 6px;
	padding: 6px 12px;
	font-family: 'Space Grotesk', sans-serif; font-size: 11px; color: #5a6675;
}
.cmvc-subsol-legal { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
/* 07.09.2026 — contrast 2,81:1 pe #f7f9fc, sub pragul WCAG; aliniat cu fixul deja făcut
   pe footer.css (#12, 04.09): #8B97A8 → #5b6779 (5,44:1). Frate al bugului deja reparat —
   subsolul ăsta e propriu paginii /cos/, nu trecea prin footer.css. */
.cmvc-subsol-legal a { font-size: 12.5px; color: #5b6779 !important; text-decoration: none; }
.cmvc-subsol-legal a:hover { color: oklch(0.5 0.15 260) !important; }
.cmvc-subsol-legal span { font-size: 12.5px; color: #5b6779; }

/* --------------------------------------------------------------------------
   10. Ecrane mici
   -------------------------------------------------------------------------- */

@media (max-width: 1120px) {
	/* O singură coloană; sumarul urcă ÎNAINTEA cross-sells-urilor, ca butonul de
	   finalizare să nu ajungă la subsolul paginii. */
	.cmvc-grid { flex-direction: column; gap: 20px; }
	.cmvc-main { display: contents; }
	.cmvc-head { order: 1; margin-bottom: -6px; }
	.cmvc-card { order: 2; }
	.cmvc-side { order: 3; width: 100%; position: static; }
	#cmvc-cross { order: 4; }
	.cmvc-cross { margin-top: 0; }
}

@media (max-width: 782px) {
	.cmvc-pasi { padding: 20px 20px 0; }
	.cmvc-linie { width: 26px; }
	.cmvc-pas-t { font-size: 13px; }
	.cmvc-notite { padding: 16px 20px 0; }
	.cmvc-grid { padding: 20px 20px 44px; }
	.cmvc-gol { padding: 48px 20px 64px; }
	.cmvc-cross-grid { grid-template-columns: 1fr; }
	.cmvc-subsol-in { padding: 16px 20px; justify-content: center; text-align: center; }
	.cmvc-insigne { justify-content: center; }
	.cmvc-subsol-legal { justify-content: center; gap: 14px; }
}

@media (max-width: 640px) {
	.cmvc-titlu { font-size: 23px; }
	.cmvc-rand {
		display: grid;
		grid-template-columns: 76px minmax(0, 1fr) 34px;
		grid-template-areas:
			"poza info sterge"
			"cant pret pret";
		gap: 12px 12px;
		padding: 16px 14px;
		align-items: center;
	}
	.cmvc-poza { grid-area: poza; width: 76px; height: 62px; align-self: start; }
	.cmvc-info { grid-area: info; align-self: start; }
	.cmvc-sterge { grid-area: sterge; align-self: start; }
	.cmvc-cant { grid-area: cant; justify-self: start; }
	.cmvc-pret { grid-area: pret; width: auto; justify-self: end; }
	.cmvc-pret-t, .cmvc-pret-v, .cmvc-pret-n { white-space: nowrap; }
	.cmvc-bara { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
	.cmvc-cupon { width: 100%; }
	.dpc .cmvc-cupon-in { flex: 1; width: auto; min-width: 0; }
	.cmvc-continua { text-align: center; }
	.cmvc-cupoane { padding: 0 14px 14px; }
	.cmvc-sum { padding: 20px; }
	.cmvc-total-n { font-size: 24px; }
}

@media (max-width: 420px) {
	.cmvc-pasi-in { gap: 8px; }
	.cmvc-linie { width: 14px; }
	.cmvc-pas-t { font-size: 12px; }
	.cmvc-bul { width: 24px; height: 24px; font-size: 12px; }
}

/* ==========================================================================
   11. TELEFON — macheta „Mobil Cos.dc.html” (19–20.08.2026)
   Prag 767px, ca în fundația mobilă (css/mobil.css).
   Toate valorile sunt citite din machetă, nu aproximate.
   ========================================================================== */

/* Elementele care există DOAR în macheta mobilă. Le ținem stinse peste tot,
   ca desktopul să rămână bit-cu-bit cel de dinainte. */
.cmvc-transport,
.cmvc-incredere,
.cmvc-total-net { display: none; }

@media (max-width: 767px) {

	/* --- cadru: cardurile stau direct pe fundal, cu 16px în margini ---------- */
	.cmvc-pasi { display: none; }                     /* pașii 1-2-3 nu sunt în macheta mobilă */
	.cmvc-notite { padding: 12px 16px 0; }
	/* `align-items: flex-start` (regula de desktop) strângea fiecare bloc la lățimea
	   textului lui — pe telefon coloana trebuie să fie plină. */
	.cmvc-grid { padding: 0 0 10px; gap: 12px; align-items: stretch; }
	.cmvc-side { padding: 0 16px; gap: 12px; }
	#cmvc-cross { padding: 0 16px; }

	/* ordinea din macheta mobilă */
	#cmvc-banda { order: 1; }
	.cmvc-card { order: 2; }
	.cmvc-side { order: 3; }
	#cmvc-cross { order: 4; }

	/* --- antetul compact ------------------------------------------------------ */
	/* „← Coșul meu (2)” îl desenează antetul mobil (mu-plugins/cmv3-antet-mobil.php,
	   `data-tip="cos"`), exact ca în machetă. Titlul paginii ar fi al doilea antet. */
	.cmvc-head { display: none; }

	/* --- banda de transport -------------------------------------------------- */
	/* Machetă: margin 14px 16px 0; radius 12px; padding 12px 14px; bară 6px. */
	#cmvc-banda:empty { display: none; }
	#cmvc-banda { padding: 0 16px; }
	.cmvc-transport {
		display: block;
		background: #EEF3FB;
		border: 1px solid #dbe4f2;
		border-radius: 12px;
		padding: 12px 14px;
	}
	.cmvc-transport--gata { background: #eef8f1; border-color: #cfe8da; }
	.cmvc-transport-t {
		display: flex;
		align-items: center;
		gap: 7px;
		font-size: 12.5px;
		font-weight: 800;
		color: oklch(0.45 0.15 260);
	}
	.cmvc-transport--gata .cmvc-transport-t { color: oklch(0.45 0.13 150); }
	.cmvc-transport-t svg { flex-shrink: 0; }
	.cmvc-transport-t .woocommerce-Price-amount { color: inherit; font-size: inherit; font-weight: inherit; }
	.cmvc-transport-d { font-size: 11.5px; color: #4A5568; margin-top: 2px; }
	.cmvc-transport-d .woocommerce-Price-amount { color: inherit; font-size: inherit; font-weight: inherit; }
	.cmvc-transport-bara {
		height: 6px;
		background: #dbe4f2;
		border-radius: 999px;
		margin-top: 8px;
		overflow: hidden;
	}
	.cmvc-transport-bara span {
		display: block;
		height: 100%;
		border-radius: 999px;
		background: oklch(0.5 0.15 260);
	}
	.cmvc-transport--gata .cmvc-transport-bara { background: #d8ede1; }
	.cmvc-transport--gata .cmvc-transport-bara span { background: oklch(0.55 0.13 150); }

	/* --- lista de produse: fiecare linie e un card ---------------------------- */
	.cmvc-card {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 0 16px;
		border: 0;
		border-radius: 0;
		background: none;
		overflow: visible;
	}
	#cmvc-items { display: flex; flex-direction: column; gap: 12px; }

	/* Machetă: card 1px #E3E8F0, radius 14px, padding 12px, gap 12px;
	   poza 84×84 la stânga pe ambele rânduri, ✕ sus-dreapta. */
	.cmvc-rand {
		display: grid;
		grid-template-columns: 84px minmax(0, 1fr) auto;
		grid-template-areas:
			"poza info sterge"
			"poza cant pret";
		column-gap: 12px;
		row-gap: 10px;
		align-items: start;
		padding: 12px;
		border: 1px solid #E3E8F0;
		border-bottom: 1px solid #E3E8F0;
		border-radius: 14px;
	}
	.cmvc-poza { grid-area: poza; width: 84px; height: 84px; border-radius: 10px; align-self: start; }
	.cmvc-poza img { padding: 5px; border-radius: 10px; }
	.cmvc-info { grid-area: info; gap: 6px; }
	.cmvc-nume { font-size: 13px; line-height: 1.3; }
	.cmvc-cod { display: none; }                       /* codul nu e în macheta mobilă */
	.cmvc-stoc { font-size: 11px; }
	.cmvc-variatie { font-size: 11px; line-height: 1.35; }

	.cmvc-sterge { grid-area: sterge; align-self: start; justify-self: end; }
	.dpc .cmvc-sterge { position: relative; width: 22px; height: 22px; font-size: 15px; color: #6b7683; margin: -2px -2px 0 0; }
	.dpc .cmvc-sterge::after { content: ""; position: absolute; inset: -11px; }

	/* Machetă: butoane 32×32, cifra 34px, chenar 1.5px #cdd6e4, radius 9px.
	   Zona de atins reală o ducem la 44px cu un pseudo-element invizibil — desenul
	   rămâne al machetei, degetul primește minimul cerut. */
	.cmvc-cant { grid-area: cant; justify-self: start; align-self: center; border-radius: 9px; overflow: visible; }
	.dpc .cmvc-cant-b { position: relative; width: 32px; height: 32px; font-size: 15px; background: #f7f9fc; }
	.dpc .cmvc-cant-b::after { content: ""; position: absolute; inset: -6px -3px; }
	.dpc .cmvc-cant-b:first-of-type { border-radius: 8px 0 0 8px; }
	.dpc .cmvc-cant-b:last-of-type { border-radius: 0 8px 8px 0; }
	.cmvc-cant-n { width: 34px; font-size: 13.5px; line-height: 32px; }

	.cmvc-pret { grid-area: pret; align-self: center; width: auto; justify-self: end; gap: 1px; }
	.cmvc-pret-t { font-size: 16px; }
	.cmvc-pret-v { font-size: 10.5px; color: #98a3b3; }
	.cmvc-pret-n { display: none; }                    /* „fără TVA” stă o singură dată, la total */

	/* --- rândul de cupon: chenar punctat, ca în machetă ---------------------- */
	.cmvc-bara {
		flex-direction: row;
		align-items: stretch;
		gap: 0;
		padding: 0;
		background: none;
	}
	/* Machetă: chenar punctat, padding 12px 14px. Padding-ul îl mutăm pe input și pe
	   buton, ca degetul să prindă tot rândul (desenul iese identic, ținta ajunge la 44px). */
	.cmvc-cupon {
		flex: 1;
		gap: 10px;
		border: 1px dashed #cdd6e4;
		border-radius: 12px;
		padding: 0 14px;
	}
	.dpc .cmvc-cupon-in {
		flex: 1;
		width: auto;
		min-width: 0;
		border: 0;
		border-radius: 0;
		padding: 12px 0;
		background: none;
		font-size: 13.5px;
	}
	.dpc .cmvc-cupon-b {
		border: 0;
		background: none;
		padding: 12px 0;
		font-size: 13px;
		font-weight: 800;
		color: oklch(0.5 0.15 260);
	}
	.cmvc-continua { display: none; }                  /* întoarcerea o face săgeata din antet */
	.cmvc-cupoane { padding: 0; background: none; }

	/* --- cardul de totaluri --------------------------------------------------- */
	.cmvc-sum {
		padding: 14px;
		gap: 8px;
		border: 1px solid #E3E8F0;
		border-radius: 14px;
		box-shadow: none;
	}
	.cmvc-sum-t { display: none; }                     /* macheta nu are titlu pe card */
	.cmvc-r { font-size: 13px; color: #5a6675; }
	/* ordinea din machetă: Subtotal · Transport · Reducere */
	.cmvc-r { order: 2; }
	.cmvc-r--economie { order: 3; }
	.cmvc-r:first-of-type { order: 1; }
	/* ⚠️ Fără `order`, explicația de la transport ar avea order 0 (implicit) și ar sări
	   în capul cardului, deasupra subtotalului. Cu 2 rămâne lipită de rândul ei. */
	.cmvc-r-info { order: 2; font-size: 12px; }
	.cmvc-total { order: 4; padding-top: 10px; }
	.cmvc-total-t { font-size: 14px; }
	.cmvc-total-n { font-size: 22px; }
	.cmvc-total-tva { display: none; }
	.cmvc-total-net { display: block; font-size: 11px; color: #8B97A8; }
	.cmvc-total-net .woocommerce-Price-amount { color: inherit; font-size: inherit; font-weight: inherit; }
	/* butonul mare stă în bara lipită jos, nu în card */
	.dpc .cmvc-cta,
	.cmvc-nota { display: none; }

	/* --- rândul de încredere -------------------------------------------------- */
	.cmvc-gar { display: none; }                       /* cardul de garanții e forma de desktop */
	.cmvc-incredere {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px 14px;
		padding: 2px 0 4px;
	}
	.cmvc-incredere span { font-size: 11px; color: #8B97A8; }

	/* --- „Merge bine împreună” ------------------------------------------------ */
	.cmvc-cross-t { font-size: 16px; margin-bottom: 10px; }
	.cmvc-cs { padding: 12px; gap: 12px; border-radius: 12px; }
	.cmvc-cs-nume { font-size: 13px; }
	.dpc .cmvc-add { padding: 10px 12px; font-size: 12px; }

	/* --- coșul gol ------------------------------------------------------------ */
	.cmvc-gol { padding: 44px 16px 56px; }
	.cmvc-gol-t { font-size: 22px; }
	.cmvc-gol-p { font-size: 14px; }

	/* --- subsolul redus ------------------------------------------------------- */
	.cmvc-subsol-in { padding: 14px 16px; gap: 12px; }

	/* --- bara de acțiune lipită jos ------------------------------------------- */
	/* Fundația (css/mobil.css) o poziționează; aici doar înfățișarea din machetă.
	   Selectorii au clasa în plus fiindcă mobil.css se încarcă DUPĂ cos.css. */
	.cmvm-bara.cmvc-bara-jos .cmvm-bara-pret small {
		display: block;
		font-size: 10.5px;
		font-weight: 700;
		color: #8B97A8;
		line-height: 1.2;
	}
	.cmvm-bara.cmvc-bara-jos .cmvm-bara-pret b {
		font-size: 17px;
		font-weight: 800;
		color: #16233D;
		line-height: 1;
	}
	.cmvm-bara.cmvc-bara-jos .cmvm-bara-pret .woocommerce-Price-amount { color: inherit; font-size: inherit; font-weight: inherit; }
	.cmvm-bara .cmvm-bara-buton a.cmvc-bara-cta {
		background: oklch(0.5 0.15 260);
		color: #FFFFFF !important;
		border-radius: 10px;
		font-size: 15px;
		font-weight: 800;
		text-decoration: none;
		box-shadow: none;
		border: 0;
	}

	/* Bara noastră e cu 3px mai înaltă decât rezerva fundației (69 vs 66) —
	   ultimul card ar fi rămas pe jumătate sub ea. */
	body.woocommerce-cart.cmvm-are-nav.cmvm-cu-bara { padding-bottom: calc(var(--cmvm-nav-total) + 74px); }
}

/* ⛔ REPARAT 04.09.2026 — caseta „Merge bine împreună" era mai îngustă decât restul coloanei
   pe tabletă (măsurat la 768px: 558px față de 680px cardul de deasupra), fiindcă grila ei
   primea o singură coloană dimensionată după conținut. Se întinde acum pe toată lățimea. */
.cmvc-cross, .cmvc-cross-grid { width: 100%; box-sizing: border-box; }
@media (min-width: 768px) and (max-width: 999px) {
	.cmvc-cross-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}