/* Cart chrome v2 (cart-upgrade slices 1-2, 2026-08-03; polish pass 2026-08-04).
   Scope: .cartv2 (cart page section wrapper) + .cartv2-steps (index.tpl band).
   Loaded ONLY when the cartv2 gate is on (staff preview / SC_CARTV2_PUBLIC).

   ⚠ THIS FILE LOADS ON MOBILE TOO (only category_v2.css is device-gated), and
   .cartv2 lands on the wrapper for mobile visitors as well. Every rule that
   touches SHARED cart markup (links, table cells, .grayBg-light, steppers,
   alerts, hr) MUST be prefixed .cartv2-desk — the desktop-only marker class
   added at cart_detailed.tpl's section wrapper. Mobile restyle = slice 4;
   the shipped July mobile chrome must stay byte-identical.

   Token values mirror --scv2-* from category_v2.css:22-30 — the .scv2 token
   root does NOT exist on the cart page, so they are re-declared here (this is
   also what makes category_v2/trust_strip.tpl's var() references resolve). */

.cartv2,
.cartv2-steps {
	--scv2-ink: #201D33;
	--scv2-ink2: #3A3550;
	--scv2-soft: #6B6580;
	--scv2-line: #E7E4EF;
	--scv2-line2: #D8D4E4;
	--scv2-tint: #F7F6FA;
	--scv2-tint2: #EFEDF5;
	--scv2-accent: #D72680;
	--scv2-deep: #B01560;
	--scv2-accent-soft: #FBE9F3;
	--scv2-ok: #13753E;
	--scv2-okbg: #E8F5EC;
	--scv2-amber: #9A6B14;
	--scv2-radius: 10px;
	--scv2-radius-sm: 6px;
	--scv2-shadow-card: 0 1px 2px rgba(32, 29, 51, .06);
}

/* ── Steps band (index.tpl, outside the AJAX container) ─────────────────── */
.cartv2-steps {
	background: #fff;
	border-bottom: 1px solid var(--scv2-line);
	padding: 15px 0;
}
.cartv2-steps .container { position: relative; }
.cartv2-steps__list {
	display: flex;
	align-items: center;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.cartv2-step {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: default;
}
.cartv2-step__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	background: #fff;
	border: 1.5px solid var(--scv2-line2);
	color: var(--scv2-soft);
}
/* active step stays magenta — documented decision (analysis doc §3 assigns the
   active step to the accent alongside prices and the meter fill) */
.cartv2-step.is-on .cartv2-step__n {
	background: var(--scv2-accent);
	border-color: var(--scv2-accent);
	color: #fff;
	box-shadow: 0 2px 6px rgba(215, 38, 128, .32);
}
.cartv2-step__t {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--scv2-soft);
	white-space: nowrap;
}
.cartv2-step.is-on .cartv2-step__t {
	color: var(--scv2-ink);
	font-weight: 800;
}
.cartv2-step__sfx { font-size: inherit; font-weight: inherit; }
.cartv2-step__sep {
	flex: 1 1 auto;
	height: 2px;
	background: linear-gradient(90deg, var(--scv2-line2), var(--scv2-line));
	border-radius: 2px;
	max-width: 140px;
	min-width: 14px;
	margin: 0 14px;
}
.cartv2-previewtag {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--scv2-deep);
	background: var(--scv2-accent-soft);
	border-radius: 99px;
	padding: 3px 8px;
	opacity: .75;
}
/* page H1 sits OUTSIDE .cartv2 (index.tpl .subhead, general sibling of the
   steps band) — the ID scope means this can only fire where the band renders.
   Tokens do not reach here; literal ink on purpose. */
#cartv2Steps ~ .subhead h1 {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: #201D33;
}
/* mobile compaction — keep LAST in this section so it wins over the desktop
   sizes above at ≤760px */
@media (max-width: 760px) {
	.cartv2-steps { padding: 9px 0; }
	.cartv2-step__sfx { display: none; }
	.cartv2-step__n { width: 22px; height: 22px; font-size: 12px; box-shadow: none; }
	.cartv2-step__t { font-size: 12.5px; }
	.cartv2-step__sep { margin: 0 8px; }
	/* was display:none — that hid the "this is a preview" marker exactly where the
	   page is MOST half-migrated (phones get the steps band + H1 + CTA label but
	   keep the July mobile cart). Absolute-right would collide with step 3 at
	   360px, so it becomes a centred block under the steps row. display:table is a
	   shrink-to-fit block box (CSS 2.1 17.5.1) — auto side margins centre it with
	   no fit-content feature dependency, and no text-align on the shared
	   .cartv2-steps .container, which would leak into the steps list. The band
	   grows ~24px and #cartv2Steps ~ .subhead h1 shifts down by the same amount —
	   expected, not a regression. */
	.cartv2-previewtag {
		position: static;
		transform: none;
		display: table;
		margin: 6px auto 0;
		text-align: center;
	}
	#cartv2Steps ~ .subhead h1 { font-size: 22px; }
}

/* ── Desktop free-shipping meter ────────────────────────────────────────── */
/* card treatment + label ABOVE the bar (column-reverse keeps DOM order for AT);
   a borderless 100%-filled track read as a horizontal rule, not a meter. */
.cartv2-fsbar {
	display: flex;
	flex-direction: column-reverse;
	max-width: 380px;
	margin: 12px 0 24px auto;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid var(--scv2-line);
	border-radius: var(--scv2-radius);
	box-shadow: var(--scv2-shadow-card);
}
/* qualified: tighten to the totals-box width so it reads as that column's
   status line; in-progress stays wider (it is the only free-shipping
   motivator on desktop once the legacy yellow nudge is suppressed) */
.cartv2-fsbar.is-complete { max-width: 300px; }
.cartv2-fsbar__track {
	height: 10px;
	border: 1px solid var(--scv2-line2);
	border-radius: 99px;
	background: var(--scv2-tint2);
	overflow: hidden;
}
.cartv2-fsbar__fill {
	height: 100%;
	border-radius: 99px;
	background: var(--scv2-accent);
	transition: width .35s ease;
}
.cartv2-fsbar.is-complete .cartv2-fsbar__fill { background: var(--scv2-ok); }
.cartv2-fsbar__label {
	margin: 0 0 7px;
	font-size: 14px;
	font-weight: 600;
	color: var(--scv2-ink2);
	text-align: left;
}
.cartv2-fsbar.is-complete .cartv2-fsbar__label {
	font-size: 15px;
	font-weight: 800;
	color: var(--scv2-ok);
}
/* reward moment: locale-free glyph, no new copy */
.cartv2-fsbar.is-complete .cartv2-fsbar__label::before {
	content: "\2713";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-right: 7px;
	border-radius: 50%;
	background: var(--scv2-ok);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	vertical-align: -3px;
}

/* ── Money hierarchy in the totals row ──────────────────────────────────── */
/* tfoot holds ONLY the VAT-disclaimer + grand-total row (the shipping line is
   a tbody service row), so tinting tfoot recedes exactly the summary zone */
/* the :last-of-type variant out-specifies style_tiles.css's legacy #F9F9F9 on
   the colspan cells — without it the summary block tints asymmetrically */
.cartv2-desk .cartTableContainer table tfoot tr td,
.cartv2-desk .cartTableContainer table tfoot tr td:last-of-type {
	background: var(--scv2-tint);
	border-top: 1px solid var(--scv2-line) !important;
}
.cartv2-desk .cartTableContainer tfoot .extraSmall {
	display: inline-block;
	max-width: 520px;
	font-size: 11px;
}
/* !important required — the template's inline block sets font-size:1.4rem !important */
.cartv2-desk .cartGrandTotal {
	font-size: 27px !important;
	font-weight: 800;
	color: var(--scv2-accent);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}
.cartv2-desk .cartTableContainer td .price { color: var(--scv2-ink); font-size: 15px; }
/* free-shipping value earns the win colour. div.bold is the FREE branch only —
   the paid-courier price is a span.bold in the same .price cell. */
.cartv2-desk .cartTableContainer .price > div.bold {
	color: var(--scv2-ok);
	font-size: 15px;
}

/* ── One magenta, one grey family (legacy #EA2A8D + Bootstrap greys out) ───
   :not([class*="scv2-"]) — catv2-namespaced anchors (the xsell rail) manage
   their own colours; without this the (0,4,1) chain repaints the rail ATC
   icon deep-on-magenta (~1.3:1, invisible). Verified 2026-08-04: no non-rail
   cart anchor carries an scv2- class, so shipped chrome is unaffected. */
.cartv2-desk a:not(.bigBtn):not(.stylized-btn):not(.btn):not([class*="scv2-"]) { color: var(--scv2-deep); }
.cartv2-desk a:not(.bigBtn):not(.stylized-btn):not(.btn):not([class*="scv2-"]):hover { color: var(--scv2-accent); }
/* the "Cost transport" truck link carries .btn, so the chain above skips it */
.cartv2-desk .cartTableContainer a.small.btn { color: var(--scv2-deep); }
.cartv2-desk .cartTableContainer a.small.btn:hover { color: var(--scv2-accent); }
.cartv2-desk .stylized-btn {
	border: 1.5px solid var(--scv2-accent);
	border-radius: 99px;
	background: #fff;
	color: var(--scv2-deep);
	font-size: 13px;
	font-weight: 600;
	padding: 7px 16px;
}
.cartv2-desk .stylized-btn:hover { background: var(--scv2-accent-soft); }

/* ── Voucher / fidelity band: slab → quiet card ─────────────────────────── */
.cartv2-desk .grayBg-light {
	background: #fff;
	border: 1px solid var(--scv2-line);
	border-radius: var(--scv2-radius);
	color: var(--scv2-ink2);
}
.cartv2-desk .grayBg-light h4 { font-size: 13.5px; color: var(--scv2-ink2); }

/* ── Item rows: de-legacy the controls, fix two AA contrast failures ────── */
.cartv2-desk .cartTableContainer th {
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--scv2-soft);
	border-bottom: 1px solid var(--scv2-line2) !important;
}
.cartv2-desk .cartTableContainer .input-group .btn,
.cartv2-desk .cartTableContainer .input-group input.form-control {
	height: 30px;
	border: 1px solid var(--scv2-line2);
	border-radius: var(--scv2-radius-sm);
	color: var(--scv2-ink2);
}
.cartv2-desk .cartTableContainer .input-group input.form-control {
	font-weight: 700;
	color: var(--scv2-ink);
}
.cartv2-desk .cartTableContainer .input-group .btn:hover {
	border-color: var(--scv2-ink2);
	background: var(--scv2-tint);
}
/* "Disponibilitate:" was #B2B2B2 on white ≈ 3.1:1 (AA fail) → 5.5:1 */
.cartv2-desk .cartTableContainer span.text-muted.extraSmall { color: var(--scv2-soft); }
/* availability badge was white on #F0AD4E ≈ 2.0:1 (AA fail) */
.cartv2-desk .cartTableContainer .tag.tag-warning {
	background: #FDF3E4;
	color: var(--scv2-amber);
	border-radius: 99px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 700;
}

/* ── Closing zone: exit left, forward right; quiet the niche notice ─────── */
.cartv2 .custom-buttons:not(.stickyBuyBox) {
	justify-content: space-between;
	gap: 16px;
	margin-top: 6px;
}
.cartv2 .custom-buttons:not(.stickyBuyBox) > .bigBtn.text-link {
	font-size: 14px;
	color: var(--scv2-soft);
	text-underline-offset: 3px;
	text-decoration-color: var(--scv2-line2);
}
.cartv2 .custom-buttons:not(.stickyBuyBox) > .bigBtn.text-link:hover { color: var(--scv2-ink); }
/* Step-1 forward CTA: dark = forward motion (desktop only; the mobile sticky
   hero keeps its shipped magenta until slice 4) */
.cartv2 .custom-buttons:not(.stickyBuyBox) > .bigBtn.magentaBtn {
	background: #201D33;
	color: #fff;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 28px;
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(32, 29, 51, .25);
}
.cartv2 .custom-buttons:not(.stickyBuyBox) > .bigBtn.magentaBtn:hover {
	background: #3A3550;
	box-shadow: 0 5px 14px rgba(32, 29, 51, .28);
}
.cartv2 .custom-buttons:not(.stickyBuyBox) > .bigBtn.magentaBtn:active { transform: scale(.99); }
.cartv2 .custom-buttons:not(.stickyBuyBox) > .bigBtn.magentaBtn .fa { transition: transform .15s ease; }
.cartv2 .custom-buttons:not(.stickyBuyBox) > .bigBtn.magentaBtn:hover .fa { transform: translateX(3px); }
/* legacy divider above the CTA row — the card edges carry the separation now */
.cartv2-desk .col-xs-12 > hr { display: none; }
/* GRENKE B2B financing note: cream Bootstrap alert → quiet note (it must not
   out-shout the CTA it sits under; its link stays discoverable) */
.cartv2-desk .custom-buttons:not(.stickyBuyBox) ~ .alert.alert-warning {
	background: var(--scv2-tint);
	border: 1px solid var(--scv2-line);
	border-radius: var(--scv2-radius);
	color: var(--scv2-ink2);
	font-size: 13px;
}

/* ── Desktop trust strip wrapper (shared category_v2/trust_strip.tpl) ───── */
.cartv2-trustwrap {
	border-top: 1px solid var(--scv2-line);
	margin-top: 24px;
	margin-bottom: 8px;
}
.cartv2-trustwrap .scv2-trust { padding: 22px 0 20px; }
.cartv2-trustwrap .scv2-trust div { font-size: 13px; }

/* ── Cross-sell rail (Slice 3, 2026-08-04) ─────────────────────────────────
   Markup is desktop-only by construction (placeholder gated in the template
   + endpoint returns empty on mobile), so .cartv2-xsrail rules are mobile-
   inert without the .cartv2-desk prefix — kept anyway for uniform discipline.
   The rail root carries .scv2 → category_v2.css supplies tokens + the card
   system; this block only reshapes it (band, grid, 32px ATC dot). */
.cartv2-xsslot { min-height: 0; }
.cartv2-desk .cartv2-xsrail {
	border-top: 1px solid var(--scv2-line);
	margin-top: 28px;
	padding: 20px 0 4px;
	outline: none;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .2s ease-out, transform .2s ease-out;
}
.cartv2-desk .cartv2-xsrail.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.cartv2-desk .cartv2-xsrail { transition: none; transform: none; opacity: 1; }
}
.cartv2-desk .cartv2-xsrail__title {
	font-size: 18px;
	font-weight: 800;
	color: var(--scv2-ink);
	letter-spacing: -.015em;
	margin: 0 0 14px;
	position: relative;
	padding-top: 12px;
}
.cartv2-desk .cartv2-xsrail__title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 34px;
	height: 3px;
	border-radius: 2px;
	background: var(--scv2-accent);
}
.cartv2-desk .cartv2-xsrail__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
}
@media (max-width: 1199px) {
	.cartv2-desk .cartv2-xsrail__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cartv2-desk .cartv2-xsrail__grid .cartv2-xscard:nth-child(n+5) { display: none; }
}
@media (max-width: 991px) {
	.cartv2-desk .cartv2-xsrail__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cartv2-desk .cartv2-xsrail__grid .cartv2-xscard:nth-child(n+4) { display: none; }
}
/* neutralize the >=761px reserved action zone (52px) — the rail button sits
   in-flow in the buy row, not absolutely at the card bottom */
.cartv2-desk .cartv2-xsrail .productLeadOuterContainer { padding-bottom: 0; }
.cartv2-desk .cartv2-xscard .scv2-ctitle { font-size: 13px; min-height: 35px; }
.cartv2-desk .cartv2-xs-buyrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 8px;
	padding: 0 14px 14px;
}
.cartv2-desk .cartv2-xs-buyrow .scv2-cprice { padding: 0; }
/* 32px filled-magenta ATC dot (locked grammar: magenta = one-click add icons).
   Beats the media ghost rest state (0,3,0) at (0,4,0); the card-hover accent
   fill + button-hover deep states from category_v2.css remain — both are the
   intended states. position:relative hosts the ::after extender. */
.cartv2-desk .cartv2-xsrail .__listViewAddToCart.scv2-atc {
	position: relative;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	min-width: 32px;
	border-radius: 50%;
	border: 0;
	background: var(--scv2-accent);
	color: #fff;
	padding: 0;
}
/* tail re-asserts vs the recolor chain (belt + suspenders with the :not fix) */
.cartv2-desk .cartv2-xsrail a.__listViewAddToCart.scv2-atc,
.cartv2-desk .cartv2-xsrail a.__listViewAddToCart.scv2-atc:hover { color: #fff; }
/* hit-area extender + grid-label suppression in ONE ::after: 44px effective
   target, and in the added state our content:"" beats the grid's
   content:attr(data-added-label) by later-file order */
.cartv2-desk .cartv2-xsrail .__listViewAddToCart.scv2-atc::after {
	content: "";
	position: absolute;
	inset: -6px;
	min-width: 0;
}
/* focus ring visible on both magenta rest and green added fills (the grid's
   magenta ring is invisible on the magenta dot; !important matches
   category_v2.css:40) */
.cartv2-desk .cartv2-xsrail .__listViewAddToCart.scv2-atc:focus-visible {
	outline: 2px solid var(--scv2-ink) !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff;
}
.cartv2-desk .cartv2-xsrail .scv2-atc.scv2-atc-added { background: var(--scv2-ok); }
/* server-rendered kept cards re-enter with the added class — no double-pop */
.cartv2-desk .cartv2-xsrail .scv2-noanim,
.cartv2-desk .cartv2-xsrail .scv2-noanim::before { animation: none !important; transition: none !important; }
/* defensive: the rail pill is a DIV without the "Vezi coșul" span, but keep
   the hide in case the template ever regresses to the shared strip */
.cartv2-desk .cartv2-xsrail .scv2-pic-cta { display: none; }
.cartv2-desk .cartv2-gapchip {
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	color: var(--scv2-ok);
	background: var(--scv2-okbg);
	border-radius: 99px;
	padding: 3px 8px;
	margin: 6px 14px 0;
}

/* ── Slice-4 warm-ups (2026-08-04): desktop count line + empty-state card ── */
.cartv2-desk .cartv2-countline {
	font-size: 13px;
	font-weight: 600;
	color: var(--scv2-soft);
	margin: -2px 0 10px;
}
.cartv2-desk .cartv2-empty {
	text-align: center;
	padding: 34px 20px;
	background: #fff;
	border: 1px solid var(--scv2-line);
	border-radius: var(--scv2-radius);
	color: var(--scv2-ink2);
}
.cartv2-desk .cartv2-empty p { margin: 0 0 8px; font-size: 15px; }
.cartv2-desk .cartv2-empty a { font-weight: 700; }

/* ── Edge breathing room (operator report 2026-08-05) ─────────────────────
   style_tiles.css zeroes the table's outer cell padding (thead th 1/4,
   tbody td 1/4, tfoot td 1 — all (0,2,4)), so the thumb, the tinted
   fine-print and the totals sit flush on the container edge. Fix = 16px
   first/last CELL padding, not container padding: the tfoot tint stays
   full-bleed (Session-4 totals-zone signature) with inner air, and slice
   4A inherits these as the left-column card's inner padding — nothing to
   unwind. (0,3,4) beats every legacy zero regardless of load order; also
   normalizes the tbody tr:last-child 12.5px legacy rule. */
.cartv2-desk .cartTableContainer table thead tr th:first-child,
.cartv2-desk .cartTableContainer table tbody tr td:first-child,
.cartv2-desk .cartTableContainer table tfoot tr td:first-child {
	padding-left: 16px;
}
.cartv2-desk .cartTableContainer table thead tr th:last-child,
.cartv2-desk .cartTableContainer table tbody tr td:last-child,
.cartv2-desk .cartTableContainer table tfoot tr td:last-child {
	padding-right: 16px;
}
/* "Cost transport" truck cell carries .p-l-0 (padding-left:0 !important in
   style_tiles.css) — matched !important at (0,3,2) > (0,1,0) wins */
.cartv2-desk .cartTableContainer table tfoot td.p-l-0 { padding-left: 16px !important; }
/* count line joins the table content's new 16px left rail */
.cartv2-desk .cartv2-countline { padding-left: 16px; }

/* ══ Slice 4A — 2-col grid + sticky summary card (2026-08-05) ══════════════
   Review record: wf_ca9fdf16-677 (both lenses APPROVE-WITH-FIXES; F1-F10
   applied here). Mobile-inert: everything .cartv2-desk-scoped. */
/* cart-only widen — media-wrapped (F2): below 1441 the breakpoint caps
   (940/1140) must keep winning */
@media (min-width: 1441px) { section.container.cartv2-desk { max-width: 1280px; } }
/* NO align-items on the grid (F1): the aside must STRETCH — that stretched
   invisible box is the sticky runway */
.cartv2-desk .cartv2-grid { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 40px; }
@media (max-width: 1440px) { .cartv2-desk .cartv2-grid { grid-template-columns: minmax(0,1fr) 360px; gap: 32px; } }
@media (max-width: 1199px) { .cartv2-desk .cartv2-grid { grid-template-columns: minmax(0,1fr) 320px; gap: 24px; } }
@media (max-width: 991px)  { .cartv2-desk .cartv2-grid { grid-template-columns: 1fr; gap: 20px; } } /* the .cartv2-sum unstick half moved to EOF — it sat BEFORE the base sticky rule and never won (4B fix) */
.cartv2-desk .cartv2-aside { min-width: 0; }
.cartv2-desk .cartv2-main  { min-width: 0; }
/* sticky card: flex column, PINNED footer (total/CTA/pay never scroll away —
   panel amendment 1); top 72 = smartbar 60 + 12 */
.cartv2-desk .cartv2-sum {
	position: sticky; top: 72px;
	display: flex; flex-direction: column;
	max-height: calc(100vh - 88px);
	background: #fff; border: 1px solid var(--scv2-line);
	border-radius: var(--scv2-radius); box-shadow: var(--scv2-shadow-card);
	padding: 18px 20px;
}
.cartv2-desk .cartv2-sum__scroll { overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; min-height: 0; margin: 0 -6px; padding: 0 6px; }
.cartv2-desk .cartv2-sum.is-locked { opacity: .6; }
.cartv2-desk .cartv2-sum__title { font-size: 15px; font-weight: 800; color: var(--scv2-ink); margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--scv2-line); }
.cartv2-desk .cartv2-sum__deliv { font-size: 12.5px; color: var(--scv2-soft); margin: 10px 0 4px; }
.cartv2-desk .cartv2-sum__deliv .fa { color: var(--scv2-accent); margin-right: 5px; }
.cartv2-desk .cartv2-sum__deliv b { color: var(--scv2-ink2); }
.cartv2-desk .cartv2-sum__rows { margin: 8px 0 2px; }
.cartv2-desk .cartv2-sum__row { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding: 4px 0; }
.cartv2-desk .cartv2-sum__row > span:first-child { color: var(--scv2-soft); }
.cartv2-desk .cartv2-sum__row > span:last-child { color: var(--scv2-ink); font-variant-numeric: tabular-nums; }
/* FREE state green — (0,3,1) placed after the last-child rule so the tie
   breaks this way (F7) */
.cartv2-desk .cartv2-sum__row > span.is-free { color: var(--scv2-ok); font-weight: 700; }
.cartv2-desk .cartv2-sum__easybox { font-size: 11.5px; color: var(--scv2-soft); margin: 0 0 4px; }
/* in-card meter variant: the card supplies the chrome ((0,3,0) beats the old
   slot block by specificity) */
.cartv2-desk .cartv2-sum .cartv2-fsbar { max-width: none; width: auto; margin: 12px 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
/* voucher/fidelity band de-slabbed in the card; viewport cols → full width;
   margin 0 kills the global [class*=col-] 15px bottom (F10) */
.cartv2-desk .cartv2-sum .grayBg-light { background: transparent; border: 0; padding: 0; margin: 10px 0 0; display: block; }
.cartv2-desk .cartv2-sum .grayBg-light [class*="col-"] { width: 100%; float: none; padding: 0; margin: 0; display: block; max-width: 100%; }
.cartv2-desk .cartv2-sum .grayBg-light .divided { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cartv2-desk .cartv2-sum .grayBg-light h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .02em; color: var(--scv2-soft); margin: 12px 0 6px; }
.cartv2-desk .cartv2-sum__note { font-size: 12px; color: #8a6d3b; background: #fcf8e3; border-radius: 8px; padding: 6px 10px; margin: 8px 0 0; }
/* pinned footer */
.cartv2-desk .cartv2-sum__foot { flex: 0 0 auto; border-top: 1px solid var(--scv2-line); margin-top: 12px; padding-top: 12px; }
.cartv2-desk .cartv2-sum__total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; font-weight: 700; color: var(--scv2-ink); }
.cartv2-desk .cartv2-sum__vat { font-size: 10.5px; color: var(--scv2-soft); margin: 4px 0 10px; }
.cartv2-desk .cartv2-sum__cta { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
/* dark forward CTA in the card (F3): the shipped dark rule is scoped to
   .custom-buttons which does not exist here — without these the card CTA
   reverts to the legacy pink .magentaBtn from the template's inline style */
.cartv2-desk .cartv2-sum__cta .bigBtn.magentaBtn { background: #201D33; color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; font-weight: 700; border-color: transparent; box-shadow: 0 2px 8px rgba(32,29,51,.25); }
.cartv2-desk .cartv2-sum__cta .bigBtn.magentaBtn:hover { background: #3A3550; box-shadow: 0 5px 14px rgba(32,29,51,.28); }
.cartv2-desk .cartv2-sum__cta .bigBtn.magentaBtn .fa { transition: transform .15s ease; }
.cartv2-desk .cartv2-sum__cta .bigBtn.magentaBtn:hover .fa { transform: translateX(3px); }
/* quiet exit link — kill the .bigBtn bulk (F8) */
.cartv2-desk .cartv2-sum__exit { font-size: 12.5px; color: var(--scv2-soft); background: none; border: 0; line-height: 1.4; padding: 4px 0; }
.cartv2-desk .cartv2-sum__pay { display: flex; justify-content: center; gap: 12px; font-size: 19px; color: var(--scv2-soft); margin-top: 10px; }
/* the dedupe: hide the whole tfoot — mobile :322 precedent; #cartTransportCost
   + the {assign transport_cost} side-effect stay in DOM (live JS contracts) */
.cartv2-desk .cartTableContainer > table.table > tfoot { display: none; }
/* GRENKE quiet note must survive M3 (F6): the shipped selector keys on the
   removed .custom-buttons sibling — grid-anchored twin keeps it quiet */
.cartv2-desk .cartv2-grid ~ .alert.alert-warning {
	background: var(--scv2-tint);
	border: 1px solid var(--scv2-line);
	border-radius: var(--scv2-radius);
	color: var(--scv2-ink2);
	font-size: 13px;
}
/* row-note tokenization (E2) */
.cartv2-desk .cartTableContainer .cartv2-row-note td { background: var(--scv2-tint); }
/* v2 empty state (E1) */
.cartv2-desk .cartv2-emptybox { text-align: center; padding: 40px 24px; background: #fff; border: 1px solid var(--scv2-line); border-radius: var(--scv2-radius); color: var(--scv2-ink2); }
.cartv2-desk .cartv2-emptybox p { margin: 0 0 8px; font-size: 15px; }

/* ══ Slice 4B — item-card reflow (2026-08-05) ══════════════════════════════
   Spec: cart-upgrade-slice4-spec-2026-08-05 §3 (designSpec) + synthesis
   amendments 8 (qty track ≥164px; squeeze window goes two-row) and 9 (every
   reflow selector rides `.cartv2-desk .cartTableContainer > table.table` —
   this file loads on mobile; the scope chain is the leak barrier).
   Mechanism = the mobile Part-2b arm (cart_detailed.tpl :376-409) at desktop
   scale: scoped display:block on table+tbody, tr → grid card on the existing
   tr/td DOM. No markup fork, no template edit, no new mirrored vars.
   Row-internal breakpoints (independent of the page-grid breakpoints):
     ≥1200 AND 768-991 : 4-col [info | qty 164 | unit 100 | subtotal 120]
                         (768-991 is single-column page grid → row is full
                         width again, so 4-col fits there too)
     992-1199          : two-row — the 320px aside squeezes the items column
                         to ~532px inner; info spans row 1, controls row 2
                         (amendment 8 "or go two-row" option — keeps the unit
                         price visible with zero template hooks)
     ≤767              : two-row [qty | subtotal]; Bootstrap .hidden-sm-down
                         has already removed thumb/availability/unit price at
                         this width. Mobile UA never renders this arm
                         (.cartv2-desk is emitted only when !$isMobileDevice). */

/* — reflow shell — */
.cartv2-desk .cartTableContainer > table.table,
.cartv2-desk .cartTableContainer > table.table > tbody { display: block; }
/* the AJAX loading state toggles .hidden on the table (site_tiles.js:25087/
   :25630) — a (0,1,0) utility the display:block above would silently beat;
   this restores the toggle (review MAJOR-1) */
.cartv2-desk .cartTableContainer > table.table.hidden { display: none; }
/* micro-labels die with the table metaphor (designSpec §3; mobile :321
   precedent) — the :258 thead restyle above goes dormant, kept for rollback */
.cartv2-desk .cartTableContainer > table.table > thead { display: none; }
.cartv2-desk .cartTableContainer > table.table > tbody > tr:empty { display: none; }
.cartv2-desk .cartTableContainer > table.table > tbody > tr {
	display: grid;
	grid-template-columns: minmax(0,1fr) 164px 100px 120px;
	align-items: center;
	gap: 12px 16px;
	margin: 0 0 10px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--scv2-line);
	border-radius: 12px;
}
/* row-note (E2): tint the whole card — the :583 per-td rule alone would
   leave the tr's own padding zone white around tinted cells */
.cartv2-desk .cartTableContainer > table.table > tbody > tr.cartv2-row-note { background: var(--scv2-tint); }
/* the 16px edge-padding block above targeted table-mode cells; cards bring
   their own geometry — later-in-file wins the (0,3,4) tie */
.cartv2-desk .cartTableContainer > table.table > tbody > tr > td {
	padding: 0;
	border: 0;
}

/* — td1: thumb + name + availability — */
.cartv2-desk .cartTableContainer > table.table > tbody > tr > td:nth-child(1) {
	overflow: hidden; /* BFC contains the floated thumb (mobile :387 precedent) */
	font-size: 14.5px;
	font-weight: 600;
	color: var(--scv2-ink);
	line-height: 1.35;
}
/* the td is a whole-cell product link (legacy stretched-anchor overlay) and
   its legacy #ea2a8d hover dies with the td color above — keep a cue, keep
   the colour grammar (review MINOR-4) */
.cartv2-desk .cartTableContainer > table.table > tbody > tr > td:nth-child(1):hover { color: var(--scv2-deep); }
.cartv2-desk .cartTableContainer > table.table > tbody > tr > td:nth-child(1) .productPic.img-covered {
	float: left;
	width: 96px; height: 96px; min-width: 96px;
	margin: 0 14px 4px 0;
	background-size: contain !important; /* rows carry inline background-size:auto/100% */
	background-color: #fff;
	border: 1px solid var(--scv2-line);
	border-radius: 8px;
}
/* availability wrapper div (NOT the productPic, which also carries
   .hidden-sm-down) — de-bolden below the 600-weight name */
.cartv2-desk .cartTableContainer > table.table > tbody > tr > td:nth-child(1) > .hidden-sm-down:not(.productPic) {
	font-weight: 400;
	font-size: 12px;
	margin-top: 6px;
}

/* — availability pills (spec §3 bullet 1) — */
/* in-stock: plain span (no .tag) → green pill */
.cartv2-desk .cartTableContainer td .hidden-sm-down > span.extraSmall.bold.text-muted-dark {
	display: inline-block;
	background: var(--scv2-okbg);
	color: var(--scv2-ok);
	border-radius: 99px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
}
/* ETA truck lines (extraSmall + text-muted-dark, no .bold) */
.cartv2-desk .cartTableContainer td .hidden-sm-down > span.extraSmall.text-muted-dark:not(.bold) {
	font-size: 11.5px;
	color: var(--scv2-soft);
}
/* B-stock / cadou-inclus teal .tag-info → neutral tint pill */
.cartv2-desk .cartTableContainer .tag.tag-info {
	background: var(--scv2-tint);
	color: var(--scv2-ink2);
	border: 0;
	border-radius: 99px !important; /* the .flat class forces 0 !important */
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 600;
}
/* the shipped :283 tag-warning pill silently loses its 99px radius to .flat's
   !important and keeps the .tag 1px #000 border — close both holes; same for
   the giftpack .tag-success check pill */
.cartv2-desk .cartTableContainer .tag.tag-warning,
.cartv2-desk .cartTableContainer .tag.tag-success {
	border: 0;
	border-radius: 99px !important;
}
.cartv2-desk .cartTableContainer .tag.tag-success { background: var(--scv2-okbg); color: var(--scv2-ok); padding: 3px 10px; }

/* — td2: qty stepper, joined [− input +] group + divorced trash — */
.cartv2-desk .cartTableContainer > table.table > tbody > tr > td:nth-child(2) .input-group {
	display: inline-flex;  /* legacy .input-group is flex width:100% — hug content */
	width: auto;
	max-width: none;       /* legacy td2 .input-group max-width:160px = zero slack vs our 160px content (review MINOR-3) */
	flex-wrap: nowrap;
	align-items: stretch;
}
.cartv2-desk .cartTableContainer > table.table > tbody > tr > td:nth-child(2) .input-group-btn {
	display: flex;
	align-items: stretch;
	width: auto;
}
.cartv2-desk .cartTableContainer .input-group .btn {
	width: 34px;
	height: 34px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.cartv2-desk .cartTableContainer .input-group input.form-control {
	height: 34px;
	width: 44px;
	flex: 0 0 44px; /* legacy flex:1 1 auto would swallow the 164px track */
	padding: 2px;
	text-align: center;
	font-weight: 700;
	border-radius: 0 !important;
	border-left: 0;
	border-right: 0;
}
/* group-leading input = NO joined buttons at all (giftpack/voucher/B-stock
   rows render input+trash only — the ± pair is all-or-nothing on labelid) →
   full borders + full rounding (review MAJOR-2) */
.cartv2-desk .cartTableContainer .input-group input.form-control:first-child {
	border-left: 1px solid var(--scv2-line2);
	border-right: 1px solid var(--scv2-line2);
	border-radius: 8px !important;
}
.cartv2-desk .cartTableContainer .input-group ._substractProduct { border-radius: 8px 0 0 8px !important; }
.cartv2-desk .cartTableContainer .input-group ._addProduct { border-radius: 0 8px 8px 0 !important; }
/* trash divorced from the group: not a money action — grey ghost, red on
   hover (#C0392B), never magenta (analysis §3 colour grammar) */
.cartv2-desk .cartTableContainer .input-group ._deleteProduct {
	margin-left: 14px !important; /* .m-l-2 legacy util is 24px !important */
	width: 34px;
	height: 34px;
	border-radius: 50% !important;
	border-color: transparent;
	background: transparent;
	color: var(--scv2-soft);
}
.cartv2-desk .cartTableContainer .input-group ._deleteProduct:hover {
	color: #C0392B;
	border-color: #C0392B;
	background: #FDECEA;
}

/* — td3 unit price / td4 subtotal (spec: 13.5 soft / 16 800 ink right) — */
.cartv2-desk .cartTableContainer > table.table > tbody > tr > td:nth-child(3) {
	text-align: center;
	font-size: 13.5px;
	color: var(--scv2-soft);
}
.cartv2-desk .cartTableContainer > table.table > tbody > tr > td:nth-child(3) .price {
	color: var(--scv2-soft);
	font-size: 13.5px;
	font-weight: 400;
}
.cartv2-desk .cartTableContainer > table.table > tbody > tr > td:nth-child(4) { text-align: right; }
.cartv2-desk .cartTableContainer > table.table > tbody > tr > td:nth-child(4) .price {
	color: var(--scv2-ink);
	font-size: 16px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* — row-internal breakpoints — */
@media (min-width: 992px) and (max-width: 1199px) {
	.cartv2-desk .cartTableContainer > table.table > tbody > tr { grid-template-columns: 164px 100px minmax(0,1fr); }
	.cartv2-desk .cartTableContainer > table.table > tbody > tr > td:nth-child(1) { grid-column: 1 / -1; }
	.cartv2-desk .cartTableContainer > table.table > tbody > tr > td:nth-child(4) { justify-self: end; }
	.cartv2-desk .cartTableContainer > table.table > tbody > tr > td:nth-child(1) .productPic.img-covered { width: 72px; height: 72px; min-width: 72px; }
}
@media (max-width: 767px) {
	.cartv2-desk .cartTableContainer > table.table > tbody > tr { grid-template-columns: 164px minmax(0,1fr); }
	.cartv2-desk .cartTableContainer > table.table > tbody > tr > td:nth-child(1) { grid-column: 1 / -1; }
	.cartv2-desk .cartTableContainer > table.table > tbody > tr > td:nth-child(4) { justify-self: end; }
}

/* — 4A defect fix: the :518 ≤991 unstick override was declared BEFORE the
   base .cartv2-sum sticky rule (source order) and lost the equal-specificity
   tie at every width (dead code since ship). Re-declared here, after the
   base rule; the :518 copy gets trimmed to its grid half in the same pass. — */
@media (max-width: 991px) {
	.cartv2-desk .cartv2-sum { position: static; max-height: none; }
}

/* ── Slice 4C (2026-08-06): undo snackbar + move-to-wishlist + voucher-applied.
   The snackbar mounts on document.body — OUTSIDE .cartv2 — so the --scv2-*
   tokens do NOT resolve there; its colors repeat the token VALUES as literals
   (ink #201D33; the wish action uses #D8D4E4 = the --scv2-line2 value).
   Everything row/card-scoped stays under .cartv2-desk (spec amendment 9 /
   uxAttack #6 — this file loads on mobile).
   z-index 2050 deliberately sits above the Bootstrap modal stack (1040/1050):
   the undo affordance must stay reachable, and the JS hides #voucherUseModal
   before any wrapper swap (review L1) so the orphaned-backdrop case is closed. */

.cartv2-snack {
	position: fixed;
	left: 24px;
	bottom: 24px;
	z-index: 2050;
	display: none;
	align-items: center;
	gap: 6px;
	max-width: min(92vw, 560px);
	background: #201D33;
	color: #fff;
	padding: 12px 16px;
	border-radius: 10px;
	box-shadow: 0 6px 24px rgba(32, 29, 51, .35);
	font-size: 13.5px;
	line-height: 1.35;
}
.cartv2-snack.is-open { display: flex; }
.cartv2-snack__msg { margin-right: 8px; }
.cartv2-snack__btn {
	background: none;
	border: 0;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 13.5px;
	font-weight: 700;
	color: #fff;
	text-decoration: underline;
	cursor: pointer;
	white-space: nowrap;
}
.cartv2-snack__btn:hover { background: rgba(255, 255, 255, .12); }
.cartv2-snack__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cartv2-snack__btn[aria-disabled="true"] { opacity: .5; cursor: default; text-decoration: none; }
.cartv2-snack__wish { color: #D8D4E4; font-weight: 600; }

/* per-row "Mută la favorite" — quiet block-level text link under the stepper
   (td2). Block level because the 164px qty track is already 160px full with
   the joined stepper + divorced trash (Session-7 measurement) — an inline
   button cannot fit without a grid-ladder change. white-space normal: the HU
   ("Áthelyezés a kedvencekhez") / SK / CS labels overflow 164px at 12px nowrap
   (review L3) — the block button wraps to two centered lines instead.
   padding 4px 8px ⇒ ≈24px target height (WCAG 2.2 SC 2.5.8, review L2). */
.cartv2-desk .cartTableContainer > table.table > tbody > tr > td:nth-child(2) .cartv2-wish {
	display: block;
	margin: 8px auto 0;
	background: none;
	border: 0;
	padding: 4px 8px;
	font-size: 12px;
	color: var(--scv2-soft);
	cursor: pointer;
	border-radius: 6px;
	white-space: normal;
}
.cartv2-desk .cartTableContainer > table.table > tbody > tr > td:nth-child(2) .cartv2-wish:hover { color: var(--scv2-deep); }
.cartv2-desk .cartTableContainer > table.table > tbody > tr > td:nth-child(2) .cartv2-wish:focus-visible { outline: 2px solid var(--scv2-ink); outline-offset: 2px; }
.cartv2-desk .cartTableContainer > table.table > tbody > tr > td:nth-child(2) .cartv2-wish[aria-disabled="true"] { opacity: .5; cursor: default; }
.cartv2-desk .cartv2-wish .fa-heart-o { margin-right: 4px; }

/* voucher-applied state (amendment 6 / F3): cart_v2.js toggles the class when
   the legacy voucher JS injects #totalWithVoucher. DEMOTE-ONLY, no strike
   (review L2): the card total is the MERCHANDISE subtotal — still TRUE after a
   voucher check — and the injected voucher figure is a different quantity
   (total − discount + transport) that can scroll out of the card's scroll
   region; striking a true number pinned next to the CTA reads as an error.
   The shipped total rule is `.cartv2-desk .cartGrandTotal { font-size:27px
   !important; … }` — the demote matches its !important at higher specificity,
   later in source. */
.cartv2-desk .cartv2-sum--vapplied .cartv2-sum__total .cartGrandTotal {
	font-size: 18px !important;
	color: var(--scv2-soft) !important;
	font-weight: 600;
}
.cartv2-desk .cartv2-sum--vapplied #voucherResponse .alert-warning {
	background: #fff;
	border: 1px solid var(--scv2-line2);
	/* !important: the injected alert carries legacy .flat, whose
	   border-radius:0 !important squared these corners (found live in the
	   Session-9 E2E — the documented .flat trap). */
	border-radius: 10px !important;
	color: var(--scv2-ink);
}
/* NO accent/size promotion on #totalWithVoucher (review L2): utils(.min).js
   writes a RAW unformatted float into it (total-discount+transport, no
   price_format, float artifacts possible) — promoting it would make a
   mis-formatted number the loudest money figure. Restraint until the
   utils.js format/i18n batch item lands. */
.cartv2-desk .cartv2-sum #voucherResponse #totalWithVoucher {
	color: var(--scv2-ink);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ── Slice 4D (2026-08-07): empty-cart recovery panel. The injected fragment
   is the rail markup and inherits the full .cartv2-desk .cartv2-xsrail card
   system (the emptybox sits inside the section wrapper). Single child-scoped
   rule so the ALWAYS-rendered empty slot has zero footprint when the panel
   never fills (JS off / endpoint empty) — review catch. */
.cartv2-desk .cartv2-emptyslot .cartv2-xsrail { margin-top: 22px; }

/* ── Slice 4D (2026-08-07): struck old unit price on promo cart lines — the
   .scv2-pold recipe (category_v2.css:284) at cart scale, stacked above the
   centered unit price in td3. Data ships only on v2-desk plain product lines
   (template gate); td3 itself is hidden-sm-down so mobile never renders it. */
.cartv2-desk .cartTableContainer > table.table > tbody > tr > td:nth-child(3) .cartv2-pold {
	display: block;
	font-size: 12.5px;
	color: var(--scv2-soft);
	text-decoration: line-through;
	font-variant-numeric: tabular-nums;
	opacity: .75;
	margin-bottom: 1px;
}