/* ============================================================================
   Vince — Cart (Figma "Cart_filled" 40:6073) fidelity styles.
   Markup: mu-plugins/vince-cart.php  ·  Layout shell: .create-bricks-cart.php
   Palette: ink #222021 · muted #5a5a5a · line #e5e5e5 · soft #faf9f7
            discount #ff4242 · chip #e7f1f9 · link #144bff
   Type: Proza Libre. Buttons/inputs always square (site-wide rule).
   ============================================================================ */

/* Hide the WPLoyalty "earn points" promo banner above the cart — not in Figma.
   WC notices in the same .before-cart wrapper are kept. */
.woocommerce-cart .before-cart .wlr-message-info { display: none !important; }

/* The two shortcode columns are grid children of .vince-cart-grid (Bricks). */
.vince-cart-grid { align-items: start; }

/* Reset the Bricks .brxe-shortcode wrappers so they don't add their own box. */
.vince-cart-items-col.brxe-shortcode,
.vince-cart-summary-col.brxe-shortcode { display: block; width: 100%; }

/* ── Left column: line items ──────────────────────────────────────────────── */
.vc-items { width: 100%; margin: 0; }

.vc-head {
	display: flex;
	align-items: center;
	gap: 24px;
	height: 50px;
	/* 32px right inset (Figma) so the content stops short of the summary while
	   the full-width border-bottom runs continuously to the summary card. */
	padding-right: 32px;
	border-bottom: 1px solid #e5e5e5;
	font-family: 'Proza Libre', sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	color: #5a5a5a;
}
.vc-head-prod { flex: 1; min-width: 0; }
.vc-head-meta { display: flex; gap: 24px; width: 199px; margin-right: 80px; flex-shrink: 0; }
.vc-head-qty { width: 72px; }

.vc-row {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 16px 32px 16px 0;
	border-bottom: 1px solid #e5e5e5;
}

.vc-prod { flex: 1; display: flex; align-items: center; gap: 24px; min-width: 0; }

.vc-thumb {
	flex-shrink: 0;
	width: 121px;
	height: 121px;
	background: #faf9f7;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4.49px;
	box-sizing: border-box;
}
.vc-thumb img {
	width: 112px;
	height: 112px;
	object-fit: contain;
	display: block;
}

.vc-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vc-cat {
	font-family: 'Proza Libre', sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #5a5a5a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.vc-name {
	font-family: 'Proza Libre', sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.3;
	color: #222021;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.vc-name:hover { color: #144bff; }
.vc-gift {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	font-family: 'Proza Libre', sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 1.5;
	color: #222021;
}
.vc-gift .vc-ico-gift { color: #144bff; flex-shrink: 0; }

/* qty + price */
/* min-width (not a fixed width): long prices ("1.338,54 lei") must widen the
   column instead of overflowing the nowrap price under the wish/remove icons —
   the product column (flex:1 + ellipsis) gives up the extra space. */
.vc-qp { display: flex; align-items: center; gap: 24px; min-width: 199px; flex-shrink: 0; }
.vc-stepper {
	flex-shrink: 0;
	width: 72px;
	height: 56px;
	border: 1px solid #e5e5e5;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	box-sizing: border-box;
}
.vc-num {
	width: 16px;
	border: 0;
	padding: 0;
	background: transparent;
	text-align: center;
	font-family: 'Proza Libre', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.2;
	color: #222021;
	-moz-appearance: textfield;
	appearance: textfield;
}
.vc-num::-webkit-inner-spin-button,
.vc-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.vc-arrows { display: flex; flex-direction: column; }
.vc-step {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #222021;
	cursor: pointer;
	line-height: 0;
	transition: color .15s ease;
}
.vc-step:hover { color: #144bff; }
.vc-price {
	flex: 1;
	font-family: 'Proza Libre', sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.3;
	color: #222021;
	white-space: nowrap;
}

/* actions: wishlist + remove */
.vc-actions { display: flex; align-items: center; gap: 8px; width: 56px; flex-shrink: 0; }
.vc-wish, .vc-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: #222021;
	cursor: pointer;
	text-decoration: none;
	transition: color .15s ease;
}
/* .vc-wish is a <button> (so it can't submit the cart form) — strip native chrome. */
.vc-wish { padding: 0; border: 0; background: transparent; appearance: none; -webkit-appearance: none; }
.vc-wish:hover,
.vc-wish.active { color: #fa9111; }
.vc-wish.loading { opacity: .5; pointer-events: none; }
.vc-remove:hover { color: #ff4242; }
.vc-remove svg { width: 24px; height: 24px; display: block; }

/* Two-hearts icon: an empty span masked with the exact Figma SVG and painted
   with currentColor (same technique as the product-card heart), so it follows
   the .vc-wish ink → accent colour on hover/active. A plain <img> PNG couldn't
   be recoloured, so the .active state was invisible. */
.vc-ico-hearts {
	display: block;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.88%2011.6298C16.73%2010.8298%2016.27%209.73975%2015.06%209.00975C12.91%207.72975%2010.3%208.80975%209.22%2010.6298C7.01%2014.3098%2011.29%2020.9697%2011.29%2020.9697C11.29%2020.9697%2019.17%2021.5898%2021.38%2017.9198C22.47%2016.1098%2022.19%2013.3098%2020.07%2012.0198H20.05C18.82%2011.2698%2017.66%2011.3798%2016.88%2011.6298Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M14.08%208.60028C14.39%207.75028%2014.5%206.88028%2014.3%206.04028C13.85%204.22028%2011.94%202.61028%209.78999%203.13028C8.55999%203.43028%207.88999%204.22028%207.55999%204.85028C6.95999%204.43028%206.00999%204.04028%204.77999%204.34028C2.62999%204.86028%201.64999%207.15028%202.09999%208.97028C2.75999%2011.7003%206.58999%2013.2703%208.59999%2013.9003%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.88%2011.6298C16.73%2010.8298%2016.27%209.73975%2015.06%209.00975C12.91%207.72975%2010.3%208.80975%209.22%2010.6298C7.01%2014.3098%2011.29%2020.9697%2011.29%2020.9697C11.29%2020.9697%2019.17%2021.5898%2021.38%2017.9198C22.47%2016.1098%2022.19%2013.3098%2020.07%2012.0198H20.05C18.82%2011.2698%2017.66%2011.3798%2016.88%2011.6298Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M14.08%208.60028C14.39%207.75028%2014.5%206.88028%2014.3%206.04028C13.85%204.22028%2011.94%202.61028%209.78999%203.13028C8.55999%203.43028%207.88999%204.22028%207.55999%204.85028C6.95999%204.43028%206.00999%204.04028%204.77999%204.34028C2.62999%204.86028%201.64999%207.15028%202.09999%208.97028C2.75999%2011.7003%206.58999%2013.2703%208.59999%2013.9003%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* Loyalty tier savings + free-shipping progress (vince-tier-progress.php) */
.vince-tier-box { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; background: #faf9f7; margin-bottom: 16px; }
.vince-tier-savings { font-size: 13px; line-height: 1.5; color: #2f6f4d; }
.vince-tier-savings .woocommerce-Price-amount { font: inherit; font-weight: 700; color: inherit; }
.vince-tier-msg { font-size: 13px; line-height: 1.5; color: #222021; }
.vince-tier-msg .woocommerce-Price-amount { font: inherit; font-weight: 700; color: inherit; }
.vince-tier-msg-done { color: #2f6f4d; }
.vince-tier-bar { height: 6px; background: #e5e5e5; overflow: hidden; }
.vince-tier-fill { display: block; height: 100%; background: #fa9111; transition: width .3s ease; }
.vince-tier-fill-done { background: #3aa15c; }

/* footer: estimated delivery */
.vc-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 32px 0 0;
}
.vc-delivery {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Proza Libre', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	color: #5a5a5a;
}
.vc-dot { width: 14px; height: 14px; border-radius: 50%; background: #3aa15c; flex-shrink: 0; }

/* ── Right column: order summary ──────────────────────────────────────────── */
.vc-summary {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #e5e5e5;
	background: #ffffff;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.vc-sum-title {
	margin: 0;
	font-family: 'Proza Libre', sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 1.3;
	color: #222021;
}
.vc-sum-group { display: flex; flex-direction: column; gap: 16px; }
.vc-sum-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-family: 'Proza Libre', sans-serif;
	font-size: 14px;
	line-height: 1.3;
}
.vc-sum-label { flex: 1; min-width: 0; font-weight: 400; color: #5a5a5a; }
.vc-sum-line:has(.vc-sum-label) { align-items: flex-start; }
.vc-sum-key { font-weight: 400; color: #5a5a5a; display: flex; align-items: center; gap: 8px; }
.vc-sum-gift .vc-ico-gift { color: #144bff; }
.vc-sum-val { font-weight: 600; color: #222021; white-space: nowrap; }

.vc-sum-discount .vc-sum-key,
.vc-sum-discount .vc-sum-val { color: #ff4242; }

.vc-sum-div { width: 100%; height: 0; border: 0; border-top: 1px solid #e5e5e5; margin: 0; }

/* coupon */
.vc-coupon { display: flex; flex-direction: column; gap: 8px; }
.vc-coupon-form { position: relative; width: 100%; }
.vc-coupon-input {
	width: 100%;
	height: 56px;
	box-sizing: border-box;
	border: 1px solid #e5e5e5;
	border-radius: 0;
	background: #ffffff;
	padding: 0 92px 0 16px;
	font-family: 'Proza Libre', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: #222021;
}
.vc-coupon-input::placeholder { color: #5a5a5a; }
.vc-coupon-btn {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	padding: var(--vince-btn-py-sm, 10px) var(--vince-btn-px-sm, 20px);
	border: var(--vince-btn-border, 1px) solid #222021;
	border-radius: var(--vince-btn-radius, 0);
	background: #222021;
	color: #fafafa;
	font-family: inherit;
	font-weight: var(--vince-btn-fw, 600);
	font-size: var(--vince-btn-fs-sm, 13px);
	letter-spacing: var(--vince-btn-ls, 0.02em);
	line-height: 1.2;
	cursor: pointer;
	transition: var(--vince-btn-transition, background-color .2s ease, color .2s ease, border-color .2s ease);
}
.vc-coupon-btn:hover { background: #000; border-color: #000; }
.vc-coupon-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vc-coupon-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #e7f1f9;
	padding: 4px 8px;
	font-family: 'Proza Libre', sans-serif;
	font-weight: 600;
	font-size: 12px;
	line-height: 1.2;
	color: #5a5a5a;
}
.vc-coupon-chip a { display: inline-flex; color: #5a5a5a; text-decoration: none; }
.vc-coupon-chip a:hover { color: #ff4242; }
.vc-coupon-chip svg { width: 12px; height: 12px; display: block; }

/* total */
.vc-sum-total { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.vc-total-label {
	font-family: 'Proza Libre', sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 1.3;
	color: #222021;
}
.vc-total-box { display: flex; flex-direction: column; align-items: flex-end; }
.vc-total-val {
	font-family: 'Proza Libre', sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 1.3;
	color: #222021;
	white-space: nowrap;
}
.vc-total-tax {
	font-family: 'Proza Libre', sans-serif;
	font-weight: 500;
	font-size: 10px;
	line-height: 1.3;
	color: #5a5a5a;
}

/* CTAs */
.vc-sum-cta { display: flex; flex-direction: column; gap: 8px; }
/* Site-wide button standard — tokens from the global "Vince - button system"
   block; only the full-width block layout is cart-specific. */
.vc-btn-primary, .vc-btn-secondary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--vince-btn-gap, 8px);
	box-sizing: border-box;
	width: 100%;
	padding: var(--vince-btn-py-lg, 16px) var(--vince-btn-px-lg, 40px);
	border: var(--vince-btn-border, 1px) solid transparent;
	border-radius: var(--vince-btn-radius, 0);
	text-decoration: none;
	font-family: inherit;
	font-size: var(--vince-btn-fs-lg, 16px);
	font-weight: var(--vince-btn-fw, 600);
	letter-spacing: var(--vince-btn-ls, 0.02em);
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: var(--vince-btn-transition, background-color .2s ease, color .2s ease, border-color .2s ease);
}
.vc-btn-primary { background: #222021; border-color: #222021; color: #fafafa; }
.vc-btn-primary:hover { background: #000; border-color: #000; color: #fafafa; }
.vc-btn-secondary { background: transparent; border-color: #222021; color: #222021; }
.vc-btn-secondary:hover { background: #222021; border-color: #222021; color: #fafafa; }

/* WC price spans inherit the row font set above */
.vc-price .woocommerce-Price-amount,
.vc-sum-val .woocommerce-Price-amount,
.vc-total-val .woocommerce-Price-amount { font: inherit; color: inherit; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
/* The grid 2→1 collapse (≤991px) and the page gutters are handled natively
   (Bricks `_gridTemplateColumns:tablet_portrait` + the site-wide fluid
   `--vince-pad-x`), so there are no hardcoded viewport overrides for those here. */

/* Summary sticks beside the items only while the grid is two columns. Below
   the collapse it sits under the list, where static is the correct behaviour. */
@media (min-width: 992px) {
	.vince-cart-summary-col { position: sticky; top: 96px; align-self: start; }
}

/* The line-items column sizes itself: rows reflow against the width the column
   actually has — which depends on the viewport, the gutter AND whether the grid
   has collapsed — rather than a fixed viewport breakpoint. So the rows look
   right whether the column is narrow because the screen is small or because the
   summary is sitting next to it. */
.vc-items { container-type: inline-size; }

@container (max-width: 680px) {
	.vc-head { display: none; }

	.vc-row { flex-wrap: wrap; gap: 12px 16px; }
	.vc-prod { flex: 1 1 100%; gap: clamp(12px, 4cqw, 24px); }

	.vc-thumb {
		width: clamp(72px, 22cqw, 121px);
		height: clamp(72px, 22cqw, 121px);
		padding: clamp(3px, 0.9cqw, 4.49px);
	}
	.vc-thumb img { width: 100%; height: 100%; }

	.vc-qp { width: auto; flex: 0 1 auto; gap: 16px; }
	.vc-price { font-size: clamp(18px, 5cqw, 24px); }

	.vc-actions { width: auto; margin-left: auto; }

	.vc-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
}