/**
 * Native cart (/cart/) - redesigned to match the native checkout.
 *
 * Paired with templates/woocommerce/cart/cart.php + cart-totals.php, which
 * keep WooCommerce's own markup intact. Everything here is scoped under
 * .wd-ncart / .wd-ncart-summary so it cannot reach the rest of the theme, and
 * the colour + radius come from the --ncart-* custom properties printed by
 * Woo_Dash_Checkout_Cart::css_vars().
 *
 * The item list is core's <table>: the rows are laid out with CSS grid rather
 * than replaced, so every WooCommerce and theme script that looks for
 * .cart_item, input.qty or a.remove still finds exactly what it expects.
 */

.wd-ncart {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 26px;
	align-items: start;
	margin: 0 0 30px;
}

.wd-ncart-main { min-width: 0; }

/* ───────────────────────────────────────────── Item list */

.wd-ncart .woocommerce-cart-form__contents,
.wd-ncart .woocommerce-cart-form__contents tbody {
	display: block;
	width: 100%;
	border: 0;
	margin: 0;
}

.wd-ncart .woocommerce-cart-form__contents thead { display: none; }

.wd-ncart .woocommerce-cart-form__cart-item {
	display: grid;
	/* The image size, like the type scale below, comes from the checkout's own
	   settings so the two pages show the same product at the same size. */
	grid-template-columns: var( --nchk-img-size, 84px ) minmax(0, 1fr) auto;
	/* Price then switcher, both at the right of the second line, so the chip
	   sits directly under the remove button. */
	grid-template-areas:
		"thumb name     remove"
		"thumb subtotal qty";
	gap: 4px 16px;
	/* Top-aligned, not centred: when the variant picker opens the row becomes
	   several times taller, and centring drifted the thumbnail, the remove
	   button and the subtotal down to the middle of all that empty space. */
	align-items: start;
	padding: 16px;
	margin: 0 0 12px;
	border: 1px solid #e8eaf0;
	border-radius: var(--ncart-radius, 12px);
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.wd-ncart .woocommerce-cart-form__cart-item > td {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}
.wd-ncart .woocommerce-cart-form__cart-item > td::before { content: none !important; }

.wd-ncart .product-thumbnail { grid-area: thumb; align-self: start; }

/* Whatever a theme or module hooks after the cart table - trust badges, a
   notice, a block - gets its own breathing room here. PADDING rather than
   margin on purpose: this store's badge block is a Kadence row whose own
   negative top margin collapsed straight out through its wrapper and pulled
   it 10px up over the coupon bar. A padding on the wrapper both adds the gap
   and stops that margin escaping. */
.wd-ncart .woocommerce-cart-form > .woocommerce-cart-form__contents + * {
	padding-top: 22px;
}
.wd-ncart .product-thumbnail img {
	width: var( --nchk-img-size, 84px );
	height: var( --nchk-img-size, 84px );
	object-fit: cover;
	border-radius: calc(var(--ncart-radius, 12px) - 4px);
	border: 1px solid #eef0f5;
	display: block;
}

.wd-ncart .product-name {
	grid-area: name;
	font-size: var( --nchk-title-size, 14.5px );
	font-weight: 600;
	line-height: 1.4;
	color: #111827;
}
.wd-ncart .product-name a { color: inherit; text-decoration: none; }
.wd-ncart .product-name a:hover { color: var(--ncart-accent, #111); }
.wd-ncart .product-name .variation,
.wd-ncart .product-name dl.variation {
	margin: 5px 0 0;
	font-size: 12.5px;
	font-weight: 400;
	color: #6b7280;
}
.wd-ncart .product-name .backorder_notification { margin: 6px 0 0; font-size: 12px; color: #b45309; font-weight: 500; }

/* The per-unit price under the title, for narrow screens where the price
   column is hidden. Hidden on desktop, where that column is visible. */
.wd-ncart .wd-ncart-unit-price { display: none; margin-top: 4px; font-size: 12.5px; font-weight: 500; color: #6b7280; }

/* The price column is folded into the title block (as a per-unit line on
   narrow screens) and the subtotal. Written with the same weight as the
   "> td { display:block }" rule above, which would otherwise win and leave a
   stray price line under each card. */
.wd-ncart .woocommerce-cart-form__cart-item > td.product-price { display: none; }

.wd-ncart .product-quantity { grid-area: qty; justify-self: end; }

/* ── The line control: stepper, variant chip, picker ─────────────────── */

.wd-ncart .wd-ncart-control {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	position: relative;
	/* .wd-nchk-card is borrowed for the picker's look, but on the cart this is
	   a control inside a row, not a card of its own. */
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	margin: 0;
}

/* The static "QTY 1" a sold-individually line shows instead of a stepper. */
.wd-ncart .wd-ncart-chip-static { cursor: default; }

.wd-ncart .wd-ncart-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid #dfe3ea;
	border-radius: 9px;
	overflow: hidden;
	background: #fff;
}
.wd-ncart .wd-ncart-qty-btn {
	width: 32px;
	height: 34px;
	flex: none;
	padding: 0;
	border: 0;
	background: #f7f8fa;
	color: #374151;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.wd-ncart .wd-ncart-qty-btn:hover { background: var( --ncart-accent, #111 ); color: #fff; }
.wd-ncart .wd-ncart-qty .quantity {
	border: 0;
	border-radius: 0;
	background: none;
}
.wd-ncart .wd-ncart-qty input.qty {
	width: 42px;
	height: 34px;
	/* The theme's own +/- buttons would sit inside ours; this control already
	   has them. */
	-moz-appearance: textfield;
	appearance: textfield;
}
.wd-ncart .wd-ncart-qty input.qty::-webkit-outer-spin-button,
.wd-ncart .wd-ncart-qty input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* checkout.css pushes the chip to the far right of the product card's bottom
   row with margin-left:auto. Here the chip IS the control, sitting under the
   product name, so that push has to be undone - left as-is it floated the
   chip across the row to sit against the subtotal. */
.wd-ncart .wd-ncart-control .wd-nchk-chip { margin-left: 0; }

/* The swatch panel has its own cell spanning the whole row, below everything
   else - exactly where the checkout card puts it, rather than crammed into the
   quantity column. Auto-placed instead of named in grid-template-areas so that
   a row WITHOUT a picker gains no empty grid row.

   It opens IN FLOW and the row grows to fit. It used to be an absolutely
   positioned popup, which looked tidy in isolation and was wrong in practice:
   it painted across the coupon bar and the trust badges below it, and on a
   phone it covered most of the page. An overlay also has to win a z-index
   fight against every later element in a theme this plugin does not control.
   Pushing content down cannot overlap anything. */
.wd-ncart .product-picker {
	grid-column: 1 / -1;
}

.wd-ncart .product-picker .wd-nchk-picker {
	position: static;
	width: 100%;
	margin: 12px 0 0;
	padding: 12px;
	border: 1px solid #e8eaf0;
	border-radius: var( --ncart-radius, 12px );
	background: #fbfcfe;
}

/* The row being changed dims under the blocking overlay, so it is clear WHICH
   line the wait belongs to. The overlay itself (.wd-nchk-blocker, from
   checkout.css) covers the page - a quantity, a variant or a coupon moves
   every total on it, and the summary and Proceed to checkout keep showing the
   old figures until the page comes back. */
.wd-ncart .wd-ncart-busy { opacity: .55; pointer-events: none; }

/* Update cart is kept in the DOM for the form post and hidden from sight -
   see the note in cart.php. Not display:none: a hidden-but-focusable control
   would still be reachable by keyboard and would read as a live button. */
.wd-ncart .wd-ncart-update {
	position: absolute !important;
	/* !important on the size too: the theme's own .button rules are more
	   specific and were stretching this to the full width and height of the
	   actions row. Nothing was visible - clip-path removes it from painting
	   AND from hit testing, measured - but a 472x50 invisible box sitting over
	   the coupon field is one stylesheet change away from swallowing clicks. */
	width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
}

.wd-ncart .product-quantity .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid #dfe3ea;
	border-radius: 9px;
	overflow: hidden;
	background: #fff;
}
.wd-ncart .product-quantity .quantity input.qty {
	width: 58px;
	height: 36px;
	padding: 0 6px;
	border: 0;
	background: none;
	font-size: 14px;
	text-align: center;
	color: #111827;
	box-shadow: none;
}
.wd-ncart .product-quantity .quantity input.qty:focus { outline: none; }
/* Themes that render their own +/- buttons inside .quantity */
.wd-ncart .product-quantity .quantity button,
.wd-ncart .product-quantity .quantity .qty-btn,
.wd-ncart .product-quantity .quantity a {
	width: 34px;
	height: 36px;
	border: 0;
	background: #f7f8fa;
	color: #374151;
	font-size: 15px;
	line-height: 36px;
	text-align: center;
	cursor: pointer;
}

.wd-ncart .product-subtotal {
	grid-area: subtotal;
	justify-self: end;
	font-size: var( --nchk-price-size, 15px );
	font-weight: 700;
	color: #111827;
	white-space: nowrap;
}

.wd-ncart .product-remove { grid-area: remove; justify-self: end; align-self: start; }
.wd-ncart .product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 7px;
	background: #f7f8fa;
	color: #9ca3af !important;
	font-size: 17px;
	line-height: 1;
	text-decoration: none;
	transition: background .15s, color .15s;
}
.wd-ncart .product-remove a.remove:hover { background: #fee2e2; color: #dc2626 !important; }

/* ───────────────────────────────────────────── Coupon + update row */

.wd-ncart .woocommerce-cart-form__contents tr:has(> td.actions),
.wd-ncart .woocommerce-cart-form__contents td.actions {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
}

/* The actions row is a transparent wrapper, not a card: the coupon control
   draws its own bordered bar, so a second box around it produced a frame
   inside a frame AND inset the field by its own padding, leaving the coupon
   visibly narrower than the product cards above it. Zero padding here is what
   makes the two line up edge for edge. */
.wd-ncart td.actions {
	display: flex !important;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	/* PADDING, not margin, for the vertical gap. A margin on this cell
	   collapses up through the <tr> and <tbody> (both display:block here and
	   neither with a border or padding of its own) instead of adding height,
	   so the table stayed 16px too short and whatever a theme or module hooks
	   after the cart table - the trust badges, in this store - was drawn
	   overlapping the coupon bar. Left and right stay at zero, which is what
	   lines the coupon up with the product cards. */
	margin: 0;
	padding: 18px 0 6px !important;
	border: 0;
	background: none;
}

.wd-ncart td.actions .coupon {
	display: flex;
	gap: 8px;
	flex: 1 1 260px;
	min-width: 0;
	float: none;
}

/* The coupon control is the checkout's, so checkout.css does the styling and
   this only has to give it the room: the full width of the actions row, with
   the status message under the field rather than beside it. Its own vertical
   margin is dropped because td.actions already owns the spacing - keeping both
   is what left the oversized gap above the field. */
.wd-ncart td.actions .coupon.wd-nchk-coupon {
	display: block;
	flex: 1 1 100%;
	margin: 0;
}
.wd-ncart td.actions .coupon.wd-nchk-coupon .wd-nchk-coupon-box { margin: 0; }

/* The cart's tables right-align their cells; the coupon message is prose and
   must read from the left like the checkout's does. */
.wd-ncart .wd-nchk-coupon-msg {
	text-align: left;
	font-size: 14px;
}

/* ── Coupon bar geometry ────────────────────────────────────────────────
   checkout.css sizes this control from its content, which works on the
   checkout and does not here: inside the cart table the inherited
   line-height is taller, so the same markup came out a 64px bar with a 62px
   Apply button against the checkout's 50/48. Measured on both pages and
   pinned, so the field, the button and the applied state are one bar of one
   height on either page - including after a coupon is applied, which was
   reading as a different control entirely. */
.wd-ncart .wd-nchk-coupon-row {
	height: 50px;
	align-items: stretch;
}

.wd-ncart .wd-nchk-coupon-input {
	height: 100%;
	padding: 0 15px;
	font-size: var( --nchk-input-size, 16px );
	line-height: normal;
}

.wd-ncart .wd-nchk-coupon-apply,
.wd-ncart .wd-nchk-coupon-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	margin: 0;
	padding: 0 20px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

/* The applied chip is the left half of that same bar, so it has to fill it
   rather than sit inside it at its own natural height. */
.wd-ncart .wd-nchk-coupon-applied {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 14px;
}
.wd-ncart td.actions .coupon input#coupon_code {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: 42px;
	padding: 0 13px;
	border: 1px solid #dfe3ea;
	border-radius: 9px;
	font-size: 14px;
	background: #fbfcfe;
}
.wd-ncart td.actions .coupon input#coupon_code:focus {
	border-color: var(--ncart-accent, #111);
	background: #fff;
	outline: none;
}

.wd-ncart td.actions .button {
	height: 42px;
	padding: 0 18px;
	border: 1px solid #dfe3ea;
	border-radius: 9px;
	background: #fff;
	color: #374151;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 40px;
	cursor: pointer;
	transition: border-color .15s, color .15s, background .15s;
}
.wd-ncart td.actions .button:hover:not(:disabled) { border-color: var(--ncart-accent, #111); color: var(--ncart-accent, #111); }
.wd-ncart td.actions .button[name="apply_coupon"] {
	background: var(--ncart-accent, #111);
	border-color: var(--ncart-accent, #111);
	color: #fff;
}
.wd-ncart td.actions .button[name="apply_coupon"]:hover { filter: brightness(.93); color: #fff; }
.wd-ncart td.actions .button:disabled { opacity: .45; cursor: default; }

/* ───────────────────────────────────────────── Summary panel */

.wd-ncart-summary {
	padding: 20px 20px 18px;
	border: 1px solid #e8eaf0;
	border-radius: var(--ncart-radius, 12px);
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 34px -26px rgba(15, 23, 42, .4);
	float: none !important;
	width: auto !important;
}
.wd-ncart--sticky .wd-ncart-summary { position: sticky; top: 24px; }

/* Type scale copied from the checkout's own summary, measured value for
   value rather than eyeballed: title 17/700, rows 15px with a 500-weight grey
   label against a 600-weight dark amount, and the total at 15/700 beside
   18/800. The cart was running a whole step smaller across the board, which
   is what made the two summaries read as different components. */
.wd-ncart-summary-title {
	margin: 0 0 15px;
	font-size: 17px;
	font-weight: 700;
	color: #111827;
	letter-spacing: -.01em;
}

.wd-ncart-summary table.shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}
.wd-ncart-summary table.shop_table th,
.wd-ncart-summary table.shop_table td {
	padding: 10px 0;
	border: 0;
	font-size: 15px;
	color: #6b7280;
	font-weight: 500;
	background: none;
	vertical-align: top;
}
.wd-ncart-summary table.shop_table td { text-align: right; color: #111827; font-weight: 600; }
.wd-ncart-summary table.shop_table tr:not(:last-child) th,
.wd-ncart-summary table.shop_table tr:not(:last-child) td { border-bottom: 1px dashed #edf0f5; }

/* A discount is money coming off, so it reads as a saving rather than as one
   more line - the same green and weight the checkout summary uses. Covers
   WooCommerce's coupon rows AND a negative fee, which is the shape the prepaid
   discount takes. */
.wd-ncart-summary table.shop_table .cart-discount th,
.wd-ncart-summary table.shop_table .cart-discount td,
.wd-ncart-summary table.shop_table tr.fee th,
.wd-ncart-summary table.shop_table tr.fee td {
	color: #12a34b;
	font-weight: 700;
}

/* ── Free delivery ──────────────────────────────────────────────────────
   Called out rather than printed as another grey line, with the same shine
   the checkout's promo line uses: a highlight travelling across on a timer,
   on its own clipped layer so it can never wash out the wording. The class
   comes from cart-totals.php, which checks the CHOSEN rate's cost. */

.wd-ncart-summary.wd-ncart-ship-free ul#shipping_method li label,
.wd-ncart-summary.wd-ncart-ship-free .woocommerce-shipping-totals td {
	color: #12a34b;
	font-weight: 800;
	letter-spacing: .01em;
}

.wd-ncart-summary.wd-ncart-ship-free ul#shipping_method li label {
	position: relative;
	display: inline-block;
	padding: 2px 8px;
	border-radius: 7px;
	background: rgba( 18, 163, 75, .09 );
	overflow: hidden;
	z-index: 0;
}

.wd-ncart-summary.wd-ncart-ship-free ul#shipping_method li label::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 45%;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient( 100deg, transparent 0%, rgba( 255, 255, 255, .85 ) 50%, transparent 100% );
	animation: wd-ncart-free-shine 3.4s ease-in-out infinite;
}

@keyframes wd-ncart-free-shine {
	0%   { left: -60%; opacity: 0; }
	15%  { opacity: 1; }
	55%  { left: 115%; opacity: 0; }
	100% { left: 115%; opacity: 0; }
}

@media ( prefers-reduced-motion: reduce ) {
	.wd-ncart-summary.wd-ncart-ship-free ul#shipping_method li label::after { animation: none; }
}
/* The total: label and amount are NOT the same size on the checkout - the
   amount is the answer, the label is only what it is called. */
/* `table.shop_table` is in every one of these selectors on purpose. The
   generic row rule above is `.wd-ncart-summary table.shop_table td` - two
   classes and two elements - so a rule written as `.wd-ncart-summary
   .order-total td` LOSES to it on specificity and silently does nothing,
   whatever order the two appear in. Measured: the total was rendering at the
   ordinary row's 15px/600 rather than the size set here. */
.wd-ncart-summary table.shop_table .order-total th,
.wd-ncart-summary table.shop_table .order-total td {
	padding-top: 15px;
	color: #111827;
}
.wd-ncart-summary table.shop_table .order-total th { font-size: 15px; font-weight: 700; }
.wd-ncart-summary table.shop_table .order-total td { font-size: 18px; font-weight: 800; }
.wd-ncart-summary table.shop_table .order-total small { display: block; font-size: 12px; font-weight: 500; color: #6b7280; }

/* Shipping rows / calculator */
.wd-ncart-summary .woocommerce-shipping-totals td { font-weight: 500; }
.wd-ncart-summary ul#shipping_method { margin: 0; padding: 0; list-style: none; text-align: right; }
.wd-ncart-summary ul#shipping_method li { margin: 0 0 6px; }
.wd-ncart-summary .shipping-calculator-button { color: var(--ncart-accent, #111); font-size: 12.5px; }
.wd-ncart-summary .woocommerce-shipping-destination { font-size: 12.5px; font-weight: 500; color: #6b7280; }

/* Proceed button */
.wd-ncart-summary .wc-proceed-to-checkout { margin: 16px 0 0; padding: 0; }
.wd-ncart-summary .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	margin: 0;
	padding: 14px 18px;
	border: 0;
	border-radius: 11px;
	background: var(--ncart-accent, #111);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 10px 22px -12px var(--ncart-accent, #111);
	transition: filter .15s, transform .06s;
}
.wd-ncart-summary .wc-proceed-to-checkout a.checkout-button:hover { filter: brightness(.93); }
.wd-ncart-summary .wc-proceed-to-checkout a.checkout-button:active { transform: translateY(1px); }

/* Trust badges */
.wd-ncart-badges {
	margin: 16px 0 0;
	padding: 14px 0 0;
	border-top: 1px dashed #e8eaf0;
	list-style: none;
	display: grid;
	gap: 8px;
}
.wd-ncart-badges li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	color: #4b5563;
}
.wd-ncart-badges svg { color: #16a34a; flex: none; }

/* Cross-sells below, full width */
.wd-ncart-collaterals { clear: both; }
.wd-ncart-collaterals .cross-sells { width: 100%; float: none; }

/* ───────────────────────────────────────────── Responsive */

@media (max-width: 992px) {
	.wd-ncart { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.wd-ncart--sticky .wd-ncart-summary { position: static; }
}

/* Tablet-ish widths: the cards are still three columns, but the control and
   the subtotal stop competing for the same sliver of space. */
@media (max-width: 782px) {
	.wd-ncart .woocommerce-cart-form__cart-item {
		grid-template-columns: 76px minmax(0, 1fr) auto;
		gap: 6px 13px;
	}
	.wd-ncart .product-thumbnail img { width: 76px; height: 76px; }
	.wd-ncart .wd-ncart-control { gap: 6px; }
}

/* Phones.

   The three-column row cannot hold a name, a variant chip, a stepper, a
   subtotal AND a remove button across ~330px of usable width - something
   always ends up squeezed to two characters or pushed off the side. So the
   row becomes two columns (thumbnail + everything else), the control gets a
   full-width line of its own underneath, and the remove button lifts out of
   the grid into the card's top-right corner where it needs no column at all. */
@media (max-width: 560px) {
	.wd-ncart .woocommerce-cart-form__cart-item {
		position: relative;
		/* Price on the left of the second line, switcher on the right directly
		   under the remove button - the same arrangement as desktop, just
		   narrower. The title spans both content columns above them. */
		grid-template-columns: 68px minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb name     name"
			"thumb subtotal qty";
		gap: 3px 12px;
		align-items: start;
		padding: 13px;
	}

	.wd-ncart .product-thumbnail img { width: 68px; height: 68px; }
	/* The title's own lane keeps clear of the remove button above it. */
	.wd-ncart .product-name { font-size: 14px; padding-right: 32px; }
	.wd-ncart .product-name .wd-ncart-unit-price { display: block; }

	.wd-ncart .product-subtotal {
		justify-self: start;
		align-self: center;
		margin-top: 2px;
		font-size: 15px;
	}
	.wd-ncart .product-quantity { align-self: center; }

	/* Out of the grid entirely - see the note above.
	   grid-area MUST be reset to auto as well. An absolutely-positioned grid
	   child keeps its named grid area as its containing block, and "remove" is
	   not one of the areas at this width, so it resolved to an implicit row at
	   the BOTTOM of the card - top:10px then measured from there and dropped
	   the x below the row entirely. With auto it positions against the card. */
	.wd-ncart .product-remove {
		position: absolute;
		grid-area: auto;
		top: 10px;
		right: 10px;
		justify-self: auto;
	}

	.wd-ncart .product-quantity { margin-top: 7px; }

	/* Comfortable thumb targets, without making the row taller than it needs
	   to be. */
	.wd-ncart .wd-ncart-qty-btn { width: 38px; height: 38px; }
	.wd-ncart .wd-ncart-qty input.qty { height: 38px; width: 46px; }
	.wd-ncart .product-remove a.remove { width: 30px; height: 30px; font-size: 19px; }

	.wd-ncart td.actions { flex-direction: column; align-items: stretch; padding: 15px 0 5px !important; }
	.wd-ncart td.actions .coupon { flex: 1 1 auto; }

	/* The coupon stays ONE fused bar at every width, exactly as on the
	   checkout - the field flexes, Apply keeps its own width. Stacking them
	   split the bar into a bordered box with a detached purple slab under it. */
	.wd-ncart .wd-nchk-coupon .wd-nchk-coupon-row { flex-wrap: nowrap; }
	.wd-ncart .wd-nchk-coupon .wd-nchk-coupon-input { flex: 1 1 auto; min-width: 0; }
	.wd-ncart .wd-nchk-coupon .wd-nchk-coupon-apply { flex: 0 0 auto; }

	.wd-ncart-summary { padding: 17px 16px 15px; }
	.wd-ncart-summary-title { font-size: 16px; }
	.wd-ncart-summary table.shop_table th,
	.wd-ncart-summary table.shop_table td { font-size: 14.5px; }
	.wd-ncart-summary .order-total th { font-size: 14.5px; }
	.wd-ncart-summary .order-total td { font-size: 17px; }
	.wd-ncart-summary .woocommerce-shipping-destination { font-size: 12px; }
}

/* Small phones: the two-column row keeps working, but the thumbnail gives up
   a little more of the width so a long product name still gets three or four
   words per line. */
@media (max-width: 400px) {
	.wd-ncart .woocommerce-cart-form__cart-item {
		grid-template-columns: 58px minmax(0, 1fr) auto;
		gap: 3px 10px;
		padding: 11px;
	}
	.wd-ncart .product-thumbnail img { width: 58px; height: 58px; }
	.wd-ncart .product-name { font-size: 13.5px; padding-right: 30px; }
	.wd-ncart .wd-ncart-qty-btn { width: 34px; }
	.wd-ncart .wd-ncart-qty input.qty { width: 40px; }
}