/*
 * Cart page — port of the Opnar cart screen.
 *
 * Cream item cards holding a white image tile, name + meta, a quantity
 * stepper and the line total; sticky summary card on the right; sticky
 * checkout bar on mobile.
 */

.fv-cart-page .site-main {
	padding-bottom: 24px;
}

/* ── Two-column frame ──────────────────────────────────────────── */

.fv-cart-page .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 18px;
	align-items: start;
}

.fv-cart-page .woocommerce > form.woocommerce-cart-form {
	grid-column: 1;
	margin: 0;
}

.fv-cart-page .cart-collaterals {
	grid-column: 2;
	width: auto;
	float: none;
	position: sticky;
	top: 20px;
	margin: 0;
}

.fv-cart-page .cart-collaterals::before,
.fv-cart-page .cart-collaterals::after {
	content: none;
}

.fv-cart-page .cart-collaterals .cart_totals {
	width: auto;
	float: none;
}

@media (max-width: 1023px) {
	.fv-cart-page .woocommerce {
		grid-template-columns: 1fr;
	}

	.fv-cart-page .woocommerce > form.woocommerce-cart-form,
	.fv-cart-page .cart-collaterals {
		grid-column: 1;
		position: static;
	}
}

/* ── Head row ──────────────────────────────────────────────────── */

.fv-cart-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 0 2px 14px;
}

.fv-cart-title {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--fv-ink);
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.fv-cart-title .meta {
	font-family: var(--fv-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fv-ink-3);
}

.fv-cart-total {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.fv-cart-total .lbl {
	font-size: 13px;
	font-weight: 600;
	color: var(--fv-ink);
}

.fv-cart-total .val,
.fv-cart-total .val .woocommerce-Price-amount {
	font-family: var(--fv-mono);
	font-size: 15px;
	font-weight: 800;
	color: var(--fv-good);
}

/* ── Item cards (table reflowed to cards) ──────────────────────── */

.fv-cart-page table.shop_table.cart,
.fv-cart-page table.shop_table.cart tbody {
	display: block;
	width: 100%;
	border: 0;
	background: transparent;
	margin: 0;
	padding: 0;
	border-radius: 0;
}

.fv-cart-page table.shop_table.cart thead {
	display: none;
}

/*
 * Explicit grid areas rather than source order: the row has six <td>s
 * (remove, thumbnail, name, price, quantity, subtotal) and two of them are
 * hidden, so relying on auto-placement wrapped the stepper onto its own
 * line. Areas also keep every per-cell rule at the same specificity as the
 * row rule below, which is what silently beat the earlier `display: none`
 * on the remove cell.
 */
.fv-cart-page tr.woocommerce-cart-form__cart-item {
	display: grid;
	grid-template-columns: 34px 104px minmax(0, 1fr) auto auto;
	grid-template-areas: 'remove thumb name qty total';
	align-items: center;
	gap: 16px;
	background: var(--fv-cream);
	border: 0;
	border-radius: var(--fv-radius-lg);
	box-shadow: var(--fv-shadow-sm);
	padding: 16px;
	margin: 0 0 12px;
	position: relative;
}

.fv-cart-page tr.woocommerce-cart-form__cart-item td {
	display: block;
	border: 0;
	padding: 0;
	background: transparent;
	text-align: left;
	vertical-align: middle;
}

.fv-cart-page tr.woocommerce-cart-form__cart-item td.product-price {
	display: none;
}

.fv-cart-page tr.woocommerce-cart-form__cart-item td.product-remove {
	/* Explicit 34px track: as `auto` this column computed to 0 and the icon
	 * spilled to the card's edge instead of sitting in its cell. */
	grid-area: remove;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
}

/* White image tile inside the cream card. */
.fv-cart-page tr.woocommerce-cart-form__cart-item td.product-thumbnail {
	grid-area: thumb;
	width: 104px;
	height: 104px;
	background: var(--fv-surface);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius-md);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fv-cart-page tr.woocommerce-cart-form__cart-item td.product-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
	border-radius: 0;
}

.fv-cart-page tr.woocommerce-cart-form__cart-item td.product-name {
	grid-area: name;
	min-width: 0;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--fv-ink);
}

.fv-cart-page tr.woocommerce-cart-form__cart-item td.product-name > a {
	color: var(--fv-ink);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.fv-cart-page tr.woocommerce-cart-form__cart-item td.product-name > a:hover {
	color: var(--fv-accent);
}

.fv-cart-meta {
	display: block;
	margin-top: 5px;
	font-family: var(--fv-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--fv-ink-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fv-cart-meta .sku {
	color: var(--fv-ink-2);
}

.fv-cart-page tr.woocommerce-cart-form__cart-item td.product-quantity {
	grid-area: qty;
}

.fv-cart-page tr.woocommerce-cart-form__cart-item td.product-subtotal {
	grid-area: total;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
	font-family: var(--fv-mono);
	font-size: 16px;
	font-weight: 800;
	color: var(--fv-ink);
	white-space: nowrap;
	min-width: 108px;
}

/* ── Quantity stepper ──────────────────────────────────────────── */

.fv-cart-page td.product-quantity .quantity {
	display: inline-flex;
	align-items: stretch;
	background: var(--fv-surface);
	border: 1px solid var(--fv-line-2);
	border-radius: var(--fv-radius-md);
	overflow: hidden;
	height: 38px;
}

.fv-cart-page .quantity input.qty {
	width: 46px;
	height: 100%;
	border: 0;
	border-left: 1px solid var(--fv-line-2);
	border-right: 1px solid var(--fv-line-2);
	border-radius: 0;
	background: transparent;
	text-align: center;
	font-family: var(--fv-mono);
	font-size: 14px;
	font-weight: 700;
	color: var(--fv-ink);
	padding: 0;
	box-shadow: none;
	-moz-appearance: textfield;
	appearance: textfield;
}

.fv-cart-page .quantity input.qty::-webkit-outer-spin-button,
.fv-cart-page .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.fv-cart-page .quantity input.qty:focus {
	box-shadow: none;
}

.fv-qty-btn {
	width: 36px;
	border: 0;
	background: transparent;
	color: var(--fv-ink-2);
	font-size: 17px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: background 0.15s ease, color 0.15s ease;
}

.fv-qty-btn:hover:not(:disabled) {
	background: var(--fv-accent-soft);
	color: var(--fv-accent);
}

.fv-qty-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ── Actions row ───────────────────────────────────────────────── */

/*
 * Opnar's cart has no actions row — no coupon box and no "Update cart",
 * because the stepper applies changes itself. The row is collapsed rather
 * than `display: none` so the update button stays in the DOM for cart.js
 * to click; a 12px residue of its borders was showing as a dark bar.
 */
.fv-cart-page tr:has( > td.actions ) {
	display: block;
	height: 0;
	overflow: hidden;
	border: 0 !important;
	padding: 0;
	margin: 0;
}

.fv-cart-page td.actions {
	display: block;
	border: 0 !important;
	padding: 0;
	background: transparent;
}

/* Opnar keeps promo codes on checkout only, and the stepper applies
 * changes for you, so neither control belongs here. */
.fv-cart-page .coupon,
.fv-cart-page button[name="update_cart"],
.fv-cart-page input[name="update_cart"] {
	display: none !important;
}

/* ── Summary card ──────────────────────────────────────────────── */

.fv-cart-page .cart_totals {
	background: var(--fv-surface);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius-lg);
	box-shadow: var(--fv-shadow-sm);
	padding: 16px;
}

.fv-cart-page .cart_totals h2 {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--fv-ink);
	margin: 0 0 10px;
	text-transform: none;
	border: 0;
	padding: 0;
}

.fv-cart-page .cart_totals table.shop_table {
	border: 0;
	border-radius: 0;
	margin: 0;
	width: 100%;
	font-size: 13px;
	background: transparent;
}

.fv-cart-page .cart_totals table.shop_table th,
.fv-cart-page .cart_totals table.shop_table td {
	border: 0;
	padding: 8px 0;
	background: transparent;
	font-weight: 500;
}

.fv-cart-page .cart_totals table.shop_table th {
	color: var(--fv-ink-2);
	font-family: var(--fv-font);
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	width: auto;
}

.fv-cart-page .cart_totals table.shop_table td {
	text-align: right;
	font-family: var(--fv-mono);
	font-weight: 600;
	color: var(--fv-ink);
	white-space: nowrap;
}

.fv-cart-page .cart_totals tr + tr th,
.fv-cart-page .cart_totals tr + tr td {
	border-top: 1px solid var(--fv-line);
}

/* Destination line is noise next to the value; the district picker stays. */
.fv-cart-page .cart_totals .woocommerce-shipping-destination {
	display: none;
}

.fv-cart-page .cart_totals .shipping-calculator-button {
	display: inline-block;
	margin-top: 6px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--fv-accent);
	text-decoration: underline;
}

.fv-cart-page .cart_totals .shipping-calculator-button:hover {
	color: var(--fv-accent-hover);
}

.fv-cart-page .cart_totals .shipping-calculator-form {
	margin-top: 10px;
	text-align: left;
	grid-column: 1 / -1;
}

.fv-cart-page .cart_totals .shipping-calculator-form label {
	display: block;
	margin-bottom: 5px;
	font-family: var(--fv-mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fv-ink-3);
}

.fv-cart-page .cart_totals .shipping-calculator-form .form-row {
	margin: 0 0 8px;
	padding: 0;
	width: auto;
	float: none;
}

.fv-cart-page .cart_totals .shipping-calculator-form select,
.fv-cart-page .cart_totals .shipping-calculator-form .select2-container .select2-selection--single {
	width: 100%;
	height: 40px;
	border: 1px solid var(--fv-line-2);
	border-radius: var(--fv-radius-md);
	background: var(--fv-surface);
	font-family: var(--fv-font);
	font-size: 13px;
	padding: 0 12px;
}

.fv-cart-page .cart_totals .shipping-calculator-form button {
	width: 100%;
	min-height: 38px;
	background: var(--fv-accent);
	color: #fff;
	border: 0;
	border-radius: var(--fv-radius-md);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.fv-cart-page .cart_totals .shipping-calculator-form button:hover {
	background: var(--fv-accent-hover);
}

/* Payable Total — dashed rule above, heaviest row in the card. */
.fv-cart-page .cart_totals tr.fv-payable-total th,
.fv-cart-page .cart_totals tr.fv-payable-total td {
	border-top: 1px dashed var(--fv-line-2);
	padding-top: 12px;
}

.fv-cart-page .cart_totals tr.fv-payable-total th {
	font-size: 14px;
	font-weight: 700;
	color: var(--fv-ink);
}

.fv-cart-page .cart_totals tr.fv-payable-total td,
.fv-cart-page .cart_totals tr.fv-payable-total td .woocommerce-Price-amount {
	font-size: 16px;
	font-weight: 800;
	color: var(--fv-ink);
}

/* WooCommerce's own order-total row is superseded by Payable Total. */
.fv-cart-page .cart_totals tr.order-total th,
.fv-cart-page .cart_totals tr.order-total td {
	font-weight: 500;
}

.fv-cart-page .cart_totals tr.order-total td strong {
	font-weight: 600;
}

/* ── Checkout button ───────────────────────────────────────────── */

.fv-cart-page .wc-proceed-to-checkout {
	padding: 14px 0 0;
}

.fv-cart-page a.fv-cart-checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-height: 46px;
	background: var(--fv-accent);
	color: #fff;
	border-radius: var(--fv-radius-md);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: none;
	padding: 0 16px;
	text-align: center;
}

.fv-cart-page a.fv-cart-checkout:hover {
	background: var(--fv-accent-hover);
	color: #fff;
}

/* ── Mobile: sticky checkout bar ───────────────────────────────── */


/* ── Corrections against the Opnar cart screenshots ────────────── */

/* Head row is a white bordered card, not bare text. */
.fv-cart-head {
	background: var(--fv-surface);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius-lg);
	box-shadow: var(--fv-shadow-sm);
	padding: 14px 16px;
	margin-bottom: 14px;
	align-items: center;
}

/*
 * Mobile head row stays on ONE line.
 *
 * Title + item count + "Your total:" + the amount overflow the card at phone
 * widths, and `flex-wrap: wrap` dropped the total onto a second row. Opnar's
 * own mobile head solves this by showing the amount with no label at all
 * (its row reads "All (3)  🗑            2,590 Tk."), so the label is dropped
 * here too and the type steps down to fit.
 */
@media (max-width: 767px) {
	.fv-cart-head {
		flex-wrap: nowrap;
		gap: 10px;
		padding: 12px;
	}

	.fv-cart-title {
		font-size: 15px;
		gap: 7px;
		min-width: 0;
	}

	.fv-cart-title .meta {
		font-size: 10px;
		white-space: nowrap;
	}

	.fv-cart-total {
		flex: none;
		gap: 6px;
	}

	.fv-cart-total .lbl {
		display: none;
	}

	.fv-cart-total .val,
	.fv-cart-total .val .woocommerce-Price-amount {
		font-size: 14px;
		white-space: nowrap;
	}
}

.fv-unit {
	font-family: var(--fv-mono);
	font-size: 11.5px;
	font-weight: 500;
	color: var(--fv-ink-3);
	white-space: nowrap;
}

.fv-unit .woocommerce-Price-amount {
	font-size: 11.5px;
	font-weight: 500;
	color: var(--fv-ink-3);
}


/* Storefront appends its own icon-font arrow to `.wc-forward`, which
 * doubled up with the one in the button label. */
.fv-cart-page a.fv-cart-checkout::after {
	content: none !important;
	display: none;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
	/*
	 * WooCommerce's `shop_table_responsive` turns each cell into a block and
	 * prepends a `content: attr(data-title)` label ("Item:", "Quantity:").
	 * Those labels and its right-alignment fight the card grid — the product
	 * name collapsed to a one-letter-per-line column and the quantity sat on
	 * top of the subtotal. Suppress them and drive the layout from grid.
	 */
	.fv-cart-page table.shop_table_responsive tr.woocommerce-cart-form__cart-item td::before {
		content: none !important;
		display: none !important;
	}

	.fv-cart-page table.shop_table_responsive tr.woocommerce-cart-form__cart-item td {
		text-align: left;
		width: auto !important;
		float: none;
	}

	.fv-cart-page tr.woocommerce-cart-form__cart-item {
		/* The QUANTITY column must be `auto` — the stepper has a fixed
		 * intrinsic width, so giving it `1fr` let it shrink below that and
		 * spill over the price. The total column takes the remainder and
		 * right-aligns inside it. */
		grid-template-columns: 34px 84px auto 1fr;
		grid-template-areas:
			'remove thumb name name'
			'remove thumb qty  total';
		gap: 10px 12px;
		align-items: center;
		padding: 14px 14px 14px 8px;
	}

	.fv-cart-page tr.woocommerce-cart-form__cart-item td.product-thumbnail {
		grid-area: thumb;
		width: 84px;
		height: 84px;
		align-self: start;
	}

	.fv-cart-page tr.woocommerce-cart-form__cart-item td.product-name {
		grid-area: name;
		align-self: start;
		font-size: 13.5px;
	}

	.fv-cart-page tr.woocommerce-cart-form__cart-item td.product-quantity {
		grid-area: qty;
	}

	.fv-cart-page tr.woocommerce-cart-form__cart-item td.product-subtotal {
		grid-area: total;
		align-items: flex-end;
		font-size: 14.5px;
		min-width: 0;
	}

	.fv-cart-page .fv-unit,
	.fv-cart-page .fv-unit .woocommerce-Price-amount {
		font-size: 10.5px;
	}

	/*
	 * Remove control is pinned rather than given a grid track. A fourth
	 * `auto` track kept collapsing, and the placement could not be verified
	 * reliably because headless Chrome clamps its layout viewport to 500px
	 * regardless of --window-size. Pinning is deterministic at every width
	 * and puts the icon where Opnar's sits: bottom-right of the card,
	 * level with the price row.
	 */
	/*
	 * A leading grid track, not absolute positioning: pinning put the icon
	 * outside the card because the <tr> was not acting as the containing
	 * block here. Spanning both rows keeps it centred against the card.
	 */
	.fv-cart-page tr.woocommerce-cart-form__cart-item td.product-remove {
		grid-area: remove;
		position: static;
		transform: none;
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: center;
		width: 34px;
	}

	.fv-cart-page td.product-quantity .quantity {
		height: 34px;
	}

	.fv-qty-btn {
		width: 32px;
	}

	.fv-cart-page .quantity input.qty {
		width: 40px;
	}

	/* Button pins to the bottom on small screens. */
	.fv-cart-page a.fv-cart-checkout {
		position: fixed;
		left: 14px;
		right: 14px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		z-index: 60;
		width: auto;
		box-shadow: 0 6px 22px rgba(255, 107, 0, 0.35);
	}

	.fv-cart-page .site-main {
		padding-bottom: 92px;
	}

}

/* Opnar's cart has no page title — the "Shopping Cart" head row already
 * names the screen. Scoped to the body class rather than .fv-cart-page so
 * it applies to the empty-cart state too. */
.woocommerce-cart .entry-header {
	display: none;
}

/* No footer on the cart, same as checkout. The hooks are unhooked in
 * inc/cart.php; this also collapses the wrapper Storefront's footer.php
 * prints regardless. */
.woocommerce-cart .site-footer {
	display: none;
}

.woocommerce-cart .site-main {
	margin-bottom: 32px;
}

/* ── Remove control ────────────────────────────────────────────── */

.fv-cart-page a.remove.fv-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--fv-radius-md);
	color: var(--fv-ink-3);
	background: transparent;
	font-size: 0;
	line-height: 0;
	transition: background 0.15s ease, color 0.15s ease;
}

/* Storefront paints its own Font Awesome glyph in `a.remove::before`
 * (34x34, its own icon font), which layered on top of our SVG and read as
 * a doubled, squashed icon. `font-size: 0` on the anchor doesn't reach it
 * because the pseudo-element sets its own sizing. */
.fv-cart-page a.remove.fv-remove::before,
.fv-cart-page a.remove.fv-remove::after {
	content: none !important;
	display: none !important;
}

.fv-cart-page a.remove.fv-remove:hover {
	background: var(--fv-surface);
	color: var(--fv-hot);
}

.fv-trash {
	/* Explicit box: the anchor zeroes font-size/line-height to kill the
	 * old "×" glyph, which also collapsed the inline SVG's line box. */
	display: block;
	width: 17px;
	height: 17px;
	flex: none;
	stroke: currentColor;
	stroke-width: 1.7;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ── Narrow phones ─────────────────────────────────────────────────
 * At ~390px the row-2 track (stepper + price + trash) no longer fits
 * beside the 84px thumbnail and the three collided. Everything in that
 * row shrinks so it still reads as one line, the way Opnar's does. */

@media (max-width: 480px) {
	.fv-cart-page tr.woocommerce-cart-form__cart-item {
		grid-template-columns: 28px 72px auto 1fr;
		grid-template-areas:
			'remove thumb name name'
			'remove thumb qty  total';
		gap: 8px;
		padding: 12px 12px 12px 6px;
	}

	.fv-cart-page tr.woocommerce-cart-form__cart-item td.product-thumbnail {
		width: 72px;
		height: 72px;
	}

	.fv-cart-page tr.woocommerce-cart-form__cart-item td.product-name {
		font-size: 13px;
	}

	.fv-cart-page .fv-cart-meta {
		font-size: 10.5px;
	}

	.fv-cart-page td.product-quantity .quantity {
		height: 32px;
	}

	.fv-qty-btn {
		width: 27px;
		font-size: 15px;
	}

	.fv-cart-page .quantity input.qty {
		width: 34px;
		font-size: 13px;
	}

	.fv-cart-page tr.woocommerce-cart-form__cart-item td.product-subtotal {
		font-size: 13.5px;
	}

	.fv-cart-page .fv-unit,
	.fv-cart-page .fv-unit .woocommerce-Price-amount {
		font-size: 10px;
	}

	.fv-cart-page tr.woocommerce-cart-form__cart-item td.product-remove {
		width: 28px;
	}

	.fv-cart-page a.remove.fv-remove {
		width: 28px;
		height: 28px;
	}

	.fv-trash {
		width: 15px;
		height: 15px;
	}
}

/* ── Selection checkbox + bulk delete ──────────────────────────────
 * Storefront styles the remove cell as a floating "×" badge:
 *   table.cart td.product-remove { padding: 0; border-top: 1.618em solid }
 * That borrowed border (currentColor, ~26px) is what rendered as a dark
 * bar earlier, and its absolute `a.remove` offsets pull content outside
 * the card. Neutralised here so the cell is a plain grid cell. */
.fv-cart-page table.cart td.product-remove,
.fv-cart-page tr.woocommerce-cart-form__cart-item td.product-remove {
	padding: 0;
	border: 0;
	position: static;
}

.fv-cart-page table.cart td.product-remove a.remove {
	position: static;
	top: auto;
	right: auto;
	float: none;
	font-size: inherit;
}

.fv-select {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;
	width: 22px;
	height: 22px;
	flex: none;
}

.fv-select input[type="checkbox"] {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.fv-select .fv-box {
	width: 19px;
	height: 19px;
	border: 1.5px solid var(--fv-line-2);
	border-radius: var(--fv-radius-md);
	background: var(--fv-surface);
	transition: background 0.15s ease, border-color 0.15s ease;
	position: relative;
}

.fv-select:hover .fv-box {
	border-color: var(--fv-accent);
}

.fv-select input:checked + .fv-box {
	background: var(--fv-accent);
	border-color: var(--fv-accent);
}

.fv-select input:checked + .fv-box::after {
	content: '';
	position: absolute;
	left: 5.5px;
	top: 2px;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.fv-select input:indeterminate + .fv-box {
	background: var(--fv-accent);
	border-color: var(--fv-accent);
}

.fv-select input:indeterminate + .fv-box::after {
	content: '';
	position: absolute;
	left: 3.5px;
	top: 7.5px;
	width: 9px;
	height: 2px;
	background: #fff;
}

.fv-select input:focus-visible + .fv-box {
	outline: 2px solid var(--fv-accent);
	outline-offset: 2px;
}

/* Selected rows read as picked. */
.fv-cart-page tr.woocommerce-cart-form__cart-item.is-selected {
	background: var(--fv-cream-hover);
	box-shadow: inset 0 0 0 1px var(--fv-accent), var(--fv-shadow-sm);
}

/* Bulk delete, beside the title. */
.fv-bulk-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	margin-left: 2px;
	border: 0;
	border-radius: var(--fv-radius-md);
	background: transparent;
	color: var(--fv-ink-3);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.fv-bulk-remove:hover {
	background: var(--fv-accent-soft);
	color: var(--fv-hot);
}

.fv-bulk-remove[hidden] {
	display: none;
}

.fv-select-all-wrap {
	margin-right: 4px;
}

/* One delivery method renders as a bare label; keep it aligned right like
 * every other value in the summary. */
.fv-cart-page .cart_totals ul#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

.fv-cart-page .cart_totals ul#shipping_method li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fv-cart-page .cart_totals ul#shipping_method label {
	font-family: var(--fv-mono);
	font-weight: 600;
	color: var(--fv-ink);
}

/* The delivery row carries only the district picker until a district is
 * chosen, so the toggle sits flush right like any other value. */
.fv-cart-page .cart_totals tr.fv-delivery-row .shipping-calculator-button {
	margin-top: 0;
}