/* Fanki — cart page. Depends on tokens.css + base.css. */

.fanki-cart-layout {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: var(--fanki-space-6);
	align-items: start;
	padding-bottom: var(--fanki-space-9);
}

.fanki-cart-table {
	width: 100%;
	border-collapse: collapse;
}

.fanki-cart-table th {
	text-align: left;
	font-size: var(--fanki-font-size-xs);
	text-transform: uppercase;
	letter-spacing: var(--fanki-letter-spacing-wide);
	color: var(--fanki-color-text-muted);
	padding-bottom: var(--fanki-space-3);
	border-bottom: 1px solid var(--fanki-color-border);
}

.fanki-cart-row td {
	padding-block: var(--fanki-space-5);
	border-bottom: 1px solid var(--fanki-color-border);
	vertical-align: top;
}

.fanki-cart-row__product {
	display: flex;
	gap: var(--fanki-space-4);
}

.fanki-cart-row__image {
	width: 88px;
	height: 88px;
	border-radius: var(--fanki-radius-md);
	overflow: hidden;
	flex-shrink: 0;
	background: var(--fanki-color-surface);
}

.fanki-cart-row__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fanki-cart-row__title {
	font-size: var(--fanki-font-size-sm);
	font-weight: var(--fanki-font-weight-medium);
	margin-bottom: var(--fanki-space-1);
}

.fanki-cart-row__variant {
	font-size: var(--fanki-font-size-xs);
	color: var(--fanki-color-text-muted);
}

.fanki-cart-row__remove {
	display: inline-flex;
	align-items: center;
	gap: var(--fanki-space-1);
	font-size: var(--fanki-font-size-xs);
	color: var(--fanki-color-danger);
	margin-top: var(--fanki-space-2);
	background: none;
	border: 0;
	padding: 0;
}

.fanki-cart-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fanki-space-4);
	padding-block: var(--fanki-space-5);
	flex-wrap: wrap;
}

.fanki-coupon-form {
	display: flex;
	gap: var(--fanki-space-2);
	max-width: 320px;
}

.fanki-cart-summary {
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
	padding: var(--fanki-space-5);
	position: sticky;
	top: calc(var(--fanki-header-height) + var(--fanki-space-4));
}

/* .fanki-summary-title / .fanki-summary-row live in base.css
   (shared with checkout.html's order summary and thank-you.html's receipt) */

.fanki-empty-cart {
	text-align: center;
	padding-block: var(--fanki-space-10);
}

@media (max-width: 1024px) {
	.fanki-cart-layout {
		grid-template-columns: 1fr;
	}

	.fanki-cart-summary {
		position: static;
	}

	.fanki-cart-table thead {
		display: none;
	}

	.fanki-cart-row td {
		display: block;
		border-bottom: none;
		padding-block: var(--fanki-space-2);
	}

	.fanki-cart-row {
		display: block;
		border-bottom: 1px solid var(--fanki-color-border);
		padding-block: var(--fanki-space-4);
	}
}

/* WooCommerce's real cart-form output (cart/cart.php is intentionally left
   un-overridden — see CLAUDE.md's Phase 4 notes), re-skinned to match the
   same layout/spacing as .fanki-cart-table above. Flexbox (not grid-column
   indices) so an extra sibling — e.g. a notices wrapper — doesn't misplace
   the two known columns.
   gap matches form.checkout's own space-8 (checkout.css) — was space-6
   here, a mismatch between the two adjacent steps of the same buy flow
   (2026-08-19 cart/checkout design-parity pass). */

body.woocommerce-cart .woocommerce {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fanki-space-8);
	align-items: flex-start;
}

/* Flexbox avoids grid's worse failure mode for an extra sibling (see
   comment above), but on its own still isn't enough: a notice WooCommerce
   prints as a direct child of .woocommerce — e.g. the "added to cart"
   success message right after ?add-to-cart=, or an applied/invalid-coupon
   notice — becomes a flex item sized to its own content instead of the
   full row, sitting to the left of .woocommerce-cart-form and pushing it
   right. That read as an unwanted left-side gap on the form itself, when
   it was actually a too-narrow sibling taking up the start of the row.
   Forces every such sibling (anything that isn't one of the two real
   columns) onto its own full-width line instead. */
body.woocommerce-cart .woocommerce > *:not(.woocommerce-cart-form):not(.cart-collaterals) {
	flex-basis: 100%;
}

/* Boxed-card treatment matching checkout's .woocommerce-billing-fields/
   .woocommerce-additional-fields (checkout.css) — primary-color border +
   Primary Color tint (same --fanki-checkout-form-bg token/Customizer
   setting, Fanki: Pages > Checkout Page > Form Background Color
   Transparency) instead of no card at all, so the cart page's one "form"
   (the item table + coupon/update-cart row, both inside this same <form>)
   reads as the same kind of boxed section checkout uses one step later
   (2026-08-19 cart/checkout design-parity pass). */
.woocommerce-cart-form {
	flex: 1 1 480px;
	border: 1px solid var(--fanki-color-primary);
	border-radius: var(--fanki-radius-md);
	padding: var(--fanki-space-5);
	background: var(--fanki-checkout-form-bg);
}

/* table-layout: fixed — the real reason two prior attempts (a "width: 1%"
   hint, then a literal "width: 32px" on the cell) both still rendered too
   wide: under the DEFAULT "table-layout: auto", a per-cell width is only
   a hint the browser's column-sizing algorithm can override — when the
   table is forced to width:100% and the sum of every column's own natural
   content width comes up short of that, auto-layout distributes the
   leftover space proportionally across EVERY column, including ones with
   an explicit small width like this one, not just the "flexible" text
   column (spec: CSS 2.1 §17.5.2.2). "table-layout: fixed" changes that
   rule entirely: extra width is only ever handed to columns that were
   NOT given an explicit width — so every column below except product-name
   now gets a literal, load-bearing pixel width, and product-name (the one
   column left unset) is the sole column that absorbs whatever's left.
   Reported as still too wide after both earlier attempts, "aroo kom hobe
   / inline type width" (2026-08-25). */
table.shop_table.cart {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

table.shop_table.cart thead th {
	text-align: left;
	font-size: var(--fanki-font-size-xs);
	text-transform: uppercase;
	letter-spacing: var(--fanki-letter-spacing-wide);
	color: var(--fanki-color-text-muted);
	padding-bottom: var(--fanki-space-3);
	/* -text-subtle, not the plain -border token — this table now sits on
	   the Primary Color-tinted card (.woocommerce-cart-form above), which
	   washed the lighter -border token out to nearly invisible (same
	   contrast problem checkout.css already documents for its own field
	   borders on this same tint, just for a table divider instead of an
	   input this time). Still a plain neutral, not primary-colored — this
	   is a content divider between rows, not a "this is an editable field"
	   affordance the way checkout's field borders are.
	   (2026-08-19 multi-item separation + actions-row redesign) */
	border-bottom: 1px solid var(--fanki-color-text-subtle);
}

/* vertical-align: middle (was top) — with the bigger remove button below
   and the 88px product image, "top" left every cell's content pinned to
   the row's top edge instead of centered against the row's own height,
   reported as "everything needs to be vertically centered" (2026-08-19). */
table.shop_table.cart td {
	padding-block: var(--fanki-space-5);
	border-bottom: 1px solid var(--fanki-color-text-subtle);
	vertical-align: middle;
}

/* With table-layout: fixed now set above, this width is finally a real
   cap, not a hint — matches the remove button's own 32px exactly.
   padding-inline: 0 so cell padding can't add anything back on either
   side. */
table.shop_table.cart th.product-remove,
table.shop_table.cart td.product-remove {
	width: 32px;
	padding-inline: 0;
	white-space: nowrap;
}

/* Explicit widths for every other fixed-content column too — under
   table-layout: fixed, ANY column left without a width shares the
   leftover space evenly, so product-thumbnail/-price/-quantity/-subtotal
   all need a real value here or they'd each be fighting product-name for
   room instead of it being the one column that actually should grow.
   88px matches the thumbnail image's own fixed size below; 150px for
   quantity covers the qty stepper's own two 40px buttons + 40px input +
   border (base.css, .fanki-qty-stepper/.quantity) with a little room to
   spare; 100px for price/subtotal comfortably fits a formatted ৳ amount.
   product-name (below) is deliberately the one column with NO width set
   here — it's the sole column that absorbs whatever width is left over. */
table.shop_table.cart th.product-thumbnail,
table.shop_table.cart td.product-thumbnail {
	width: 88px;
}

table.shop_table.cart th.product-price,
table.shop_table.cart td.product-price {
	width: 100px;
}

table.shop_table.cart th.product-quantity,
table.shop_table.cart td.product-quantity {
	width: 150px;
}

table.shop_table.cart th.product-subtotal,
table.shop_table.cart td.product-subtotal {
	width: 100px;
}

table.shop_table.cart td.product-thumbnail img {
	width: 88px;
	height: 88px;
	border-radius: var(--fanki-radius-md);
	object-fit: cover;
	background: var(--fanki-color-surface);
}

table.shop_table.cart td.product-name a {
	font-size: var(--fanki-font-size-sm);
	font-weight: var(--fanki-font-weight-medium);
	color: var(--fanki-color-text);
}

/* 32px, was 24px — reported too small a tap target/visual weight
   (2026-08-19). font-size bumped to match (the × glyph is the button's
   entire visible content, via WooCommerce's own real &times; markup). */
table.shop_table.cart td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--fanki-radius-full);
	color: var(--fanki-color-danger);
	font-size: var(--fanki-font-size-xl);
	line-height: 1;
	text-decoration: none;
}

table.shop_table.cart td.product-remove a.remove:hover {
	background: var(--fanki-color-danger-light);
}

/* The real WC markup has no wrapping element to put a layout on (.coupon
   and the bare "Update cart" button are direct <td> children, not siblings
   inside a shared flex wrapper), so the <td> itself becomes the flex row.
   justify-content: flex-start (not space-between, despite the design
   reference's .fanki-cart-actions using that for a DIFFERENT pairing —
   coupon form + a distinct "Continue Shopping" nav action, which reads
   fine spread across the row) — on a wide desktop card, space-between put
   "Update cart" far off to the right, a large empty gap away from the
   coupon controls it's actually related to, reported as the button's
   "position না ঠিক" (not correct) 2026-08-19. Grouped close together
   instead, same gap token as everything else in this row. */
table.shop_table.cart td.actions {
	border-bottom: 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: var(--fanki-space-4);
}

/* No max-width here (a real bug from two follow-ups ago: 320px was set
   thinking of .fanki-coupon-form's own constraint in the design reference,
   without checking whether the input (220px, own max-width below) + gap +
   "Apply coupon" button (~150px depending on Button Style/text) actually
   fit inside it — they don't, at ~370px combined, so flex-wrap:wrap was
   force-wrapping the button onto its own line UNCONDITIONALLY, at every
   viewport width, not just narrow ones — reported as "still stacked, same
   as before" 2026-08-19). The original concern this max-width was meant to
   solve (an extra child making .coupon too wide for "Update cart" to fit
   beside it) is already fully handled by the flex-basis:100% rule below,
   so no width cap is needed here at all — .coupon just sizes to its real
   content (input + button), and td.actions' own flex-wrap handles the
   genuinely-narrow-viewport case gracefully on its own. */
table.shop_table.cart .coupon {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-2);
}

/* Organizing this row: the input + Apply coupon button are one functional
   group (a coupon form); "Update cart" is a different, unrelated action
   that happens to render in the same .coupon container (real WooCommerce
   hook — see fanki_cart_update_button_in_coupon(), wc-hooks.php) — but
   previously sat at the exact same gap-2 spacing as the input↔Apply pair,
   reading as one undifferentiated cluster of three controls instead of
   two distinct groups. A bit of extra left margin plus a divider line
   pulls it visually apart from the coupon group without needing a real
   DOM wrapper. -text-subtle, not the plain -border token — this card
   sits on the Primary Color tint (.woocommerce-cart-form above), which
   already washed that lighter token out to near-invisible for the row
   dividers above (same fix reused here). */
table.shop_table.cart .coupon .fanki-cart-actions__update {
	margin-left: var(--fanki-space-3);
	padding-left: var(--fanki-space-5);
	border-left: 1px solid var(--fanki-color-text-subtle);
}

/* WooCommerce's own real coupon-error flow (assets/js/frontend/cart.js'
   show_coupon_error()) appends a <p class="coupon-error-notice"> — e.g.
   "Please enter a coupon code." for an empty submit, or an invalid-coupon
   message — as a 3rd child of .coupon, AFTER a failed Apply attempt (not
   present on a fresh page load). With no width of its own it would compete
   with the input+button for the same line instead of dropping cleanly
   below them — same "extra sibling → flex-basis:100%" technique already
   used for the .woocommerce notices-wrapper above. */
table.shop_table.cart .coupon > *:not(#coupon_code):not(.button) {
	flex-basis: 100%;
}

/* Unstyled otherwise (a bare <p>, no class this theme had a rule for) —
   matches base.css's .checkout-inline-error-message, the same "small red
   text under a field" treatment used for checkout's own inline validation
   errors, so a coupon error reads consistently with every other inline
   field error site-wide. -sm, not -xs — this is an actionable alert the
   shopper needs to actually read and respond to, not decorative/meta text
   (a badge, a timestamp); -xs was too small for that role, caught in the
   2026-08-26 notice-text follow-up after being asked directly whether this
   exact message's size looked right. */
table.shop_table.cart .coupon-error-notice {
	margin: var(--fanki-space-2) 0 0;
	font-size: var(--fanki-font-size-sm);
	color: var(--fanki-color-danger);
}

/* border-color: primary, matching checkout's own .woocommerce-billing-
   fields/.woocommerce-additional-fields field-border treatment
   (checkout.css) — this input now sits on the same Primary Color-tinted
   card background (.woocommerce-cart-form above) that made a plain neutral
   border "read as barely-there" there; same fix applies here
   (2026-08-19 cart/checkout design-parity pass). */
table.shop_table.cart .coupon #coupon_code {
	width: auto;
	max-width: 220px;
	padding: var(--fanki-space-3) var(--fanki-space-4);
	border: 1px solid var(--fanki-color-primary);
	border-radius: var(--fanki-radius-md);
	font-size: var(--fanki-font-size-sm);
	background: var(--fanki-color-bg);
}

/* Sizing here; appearance (background, color, border, hover) from the real
   --fanki-btn-outline-* tokens — the design reference (cart.html) uses
   .fanki-btn.fanki-btn--outline for both this button and "Continue
   Shopping"; routing Apply coupon/Update cart through the same tokens
   (rather than an independently hardcoded look) means they now also follow
   the Outline button's own Advanced Styling overrides like every other
   outline button site-wide. (2026-08-19 actions-row redesign) */
table.shop_table.cart .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: var(--fanki-space-3) var(--fanki-space-5);
	font-size: var(--fanki-button-font-size);
	font-weight: var(--fanki-btn-outline-font-weight);
	border-radius: var(--fanki-button-radius);
	border-width: var(--fanki-btn-outline-border-width);
	border-style: solid;
	border-color: var(--fanki-btn-outline-border-color);
	background: var(--fanki-btn-outline-bg);
	color: var(--fanki-btn-outline-color);
}

table.shop_table.cart .button:hover:not(:disabled) {
	background: var(--fanki-btn-outline-hover-bg);
	border-color: var(--fanki-btn-outline-hover-border-color);
	color: var(--fanki-btn-outline-hover-color);
}

/* "Update cart" starts disabled (WooCommerce's own core JS only enables it
   once a quantity actually changes) — previously looked identical to an
   active button, giving no visual signal it couldn't be clicked yet.
   (Restored 2026-08-19: the auto-click-a-hidden-button approach tried right
   before this didn't actually update pricing — most likely because a
   display:none submit button isn't a reliable native form-submitter in
   every browser, even via a programmatic .click(); user asked for the
   visible manual button back rather than continuing to debug that.) */
table.shop_table.cart .button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* "Apply coupon" highlighted as the primary action in this row (requested
   2026-08-19) — same --fanki-btn-primary-* restatement pattern used for
   every other WC-native primary CTA this session, so it also follows
   Button Style preset/Advanced Styling like Add to Cart/Place Order do.
   "Update cart" (both copies — see below) stays on the shared outline
   look above; it's the secondary/utility action here, not the one meant
   to stand out. */
table.shop_table.cart .button[name="apply_coupon"] {
	border-width: var(--fanki-btn-primary-border-width);
	border-color: var(--fanki-btn-primary-border-color);
	background: var(--fanki-btn-primary-bg);
	color: var(--fanki-btn-primary-color);
	font-weight: var(--fanki-btn-primary-font-weight);
	box-shadow: var(--fanki-btn-primary-shadow);
}

table.shop_table.cart .button[name="apply_coupon"]:hover {
	background: var(--fanki-btn-primary-hover-bg);
	border-color: var(--fanki-btn-primary-hover-border-color);
	color: var(--fanki-btn-primary-hover-color);
}

/* Reported as "not looking okay" — traced to the shared .button rule
   above using the generic --fanki-btn-outline-* tokens as-is: transparent
   background + --fanki-color-border (the plain neutral border token this
   same card already had to move away from for its row dividers, coupon
   input, and the divider line, all because it washes out to near-
   invisible against .woocommerce-cart-form's Primary Color tint).
   Combined with the 0.5 opacity this button also carries while disabled
   (its normal starting state), it had almost no visible shape at all —
   a "standard," clearly-a-button look needs a real fill, not a ghost
   outline, on this specific background. Scoped to this one button, not
   a change to --fanki-btn-outline-* itself, since that token set is used
   correctly (on a plain, untinted background) by every other outline
   button site-wide. Placed AFTER the .button/.button:hover rules above
   (same specificity, so source order decides) — placing it earlier, next
   to its own divider rule, would have silently lost to those. */
table.shop_table.cart .fanki-cart-actions__update {
	background: var(--fanki-color-surface);
	border-color: var(--fanki-color-text-subtle);
	color: var(--fanki-color-text);
}

table.shop_table.cart .fanki-cart-actions__update:hover:not(:disabled) {
	background: var(--fanki-color-surface-alt);
	border-color: var(--fanki-color-primary);
	color: var(--fanki-color-primary);
}

/* WooCommerce's real "Update cart" button (cart/cart.php, un-overridden)
   renders as a direct <td> child, outside .coupon — fanki_cart_update_
   button_in_coupon() (wc-hooks.php) prints a second, fully real copy
   INSIDE .coupon via the real woocommerce_cart_coupon hook instead
   (requested: keep it inside .coupon, on the right). The direct-child
   selector here scopes to ONLY the original external copy — .coupon's own
   copy is a grandchild of td, not a direct child, so it's untouched and
   stays the one visible/interactive button. Hidden, not removed: nothing
   about WooCommerce's own :input[name="update_cart"] selectors cares which
   copy exists, so this is safe the same way the earlier "duplicate button,
   hide the original" reasoning already established for this exact case.

   Real bug fixed 2026-08-25: this selector (and the td.actions flex rule
   above it) originally said "tr.actions td" — but WooCommerce's real
   markup puts the "actions" class on the <td> itself, not the <tr> (a
   plain <tr> wraps <td class="actions">, confirmed against live HTML).
   "tr.actions" never matched anything, so this hide rule silently never
   applied and both "Update cart" buttons rendered on the page. */
table.shop_table.cart td.actions > .button[name="update_cart"] {
	display: none;
}

/* 400px, matching checkout's #order_review flex-basis (checkout.css) — was
   360px here, a width mismatch between the two pages' right sidebars
   (2026-08-19 cart/checkout design-parity pass). */
.cart-collaterals {
	flex: 0 0 400px;
}

/* Primary-color border + the same Primary Color tint as #order_review
   (checkout.css) instead of a plain neutral border with no tint — this
   sidebar is the "Cart totals" step of the exact same order-summary card
   checkout's "Your order" is one step later (2026-08-19 cart/checkout
   design-parity pass). */
.cart_totals {
	border: 1px solid var(--fanki-color-primary);
	border-radius: var(--fanki-radius-md);
	padding: var(--fanki-space-5);
	background: var(--fanki-checkout-form-bg);
	position: sticky;
	top: calc(var(--fanki-header-height) + var(--fanki-space-4));
}

.cart_totals h2 {
	font-size: var(--fanki-font-size-lg);
	margin-bottom: var(--fanki-space-4);
}

.cart_totals table {
	width: 100%;
	border-collapse: collapse;
}

.cart_totals table th,
.cart_totals table td {
	text-align: left;
	font-size: var(--fanki-font-size-sm);
	font-weight: var(--fanki-font-weight-regular);
	padding-block: var(--fanki-space-2);
}

.cart_totals table th {
	color: var(--fanki-color-text-muted);
}

.cart_totals .order-total th,
.cart_totals .order-total td {
	border-top: 1px solid var(--fanki-color-border);
	padding-top: var(--fanki-space-4);
	font-size: var(--fanki-font-size-md);
	font-weight: var(--fanki-font-weight-semibold);
	color: var(--fanki-color-text);
}

/* WooCommerce's real shipping-method choice (cart/cart-shipping.php,
   un-overridden — cart.php/cart-totals.php are deliberately left un-
   overridden too, see CLAUDE.md's Phase 4 notes, and this is the exact
   same AJAX-sensitive markup WC core's own cart.js listens on
   ":input[name^=shipping_method]" to trigger its update_shipping_method
   request — reproducing that in a template override would risk breaking
   it with no live install to verify against). Previously completely
   unstyled — a bare browser-default radio list — unlike checkout's own
   bordered .fanki-option-card treatment for the identical choice
   (fanki_checkout_shipping_options(), wc-hooks.php). Re-skinned via CSS
   against WC's real, stable class/id names instead, to visually match
   that same option-card language without touching the template.
   (2026-08-19, "রাইটসাইডবারের ডিজাইন ঠিক নাই, চেকআউট পেজ ফলো করো") */
.woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--fanki-space-2);
}

.woocommerce-shipping-methods li {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-2);
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
	padding: var(--fanki-space-3);
	background: var(--fanki-color-bg);
	cursor: pointer;
	transition: border-color var(--fanki-transition-fast), background-color var(--fanki-transition-fast);
}

.woocommerce-shipping-methods li:hover,
.woocommerce-shipping-methods li:has(input:checked) {
	border-color: var(--fanki-color-primary);
	background: var(--fanki-color-primary-light);
}

.woocommerce-shipping-methods li label {
	flex: 1;
	cursor: pointer;
}

.woocommerce-shipping-destination {
	font-size: var(--fanki-font-size-xs);
	color: var(--fanki-color-text-muted);
	margin-top: var(--fanki-space-2);
}

.wc-proceed-to-checkout {
	margin-top: var(--fanki-space-4);
}

/* Sizing/shape here, appearance (background, color, border, radius, shadow)
   from the real --fanki-btn-primary-* tokens — same pattern
   product.css's .single_add_to_cart_button and #place_order (checkout.css,
   via real fanki-btn classes) already use, so this CTA — sitting literally
   between those two in the buy flow — responds to Button Style preset/
   Advanced Styling/Corner Style the same as they do. Was hardcoded directly
   to --fanki-color-primary/-radius-md until the 2026-08-19 button-style
   chronology audit. */
.wc-proceed-to-checkout .checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: var(--fanki-space-4) var(--fanki-space-7);
	font-size: var(--fanki-button-font-size);
	background: var(--fanki-btn-primary-bg);
	color: var(--fanki-btn-primary-color);
	border-color: var(--fanki-btn-primary-border-color);
	border-width: var(--fanki-btn-primary-border-width);
	font-weight: var(--fanki-btn-primary-font-weight);
	box-shadow: var(--fanki-btn-primary-shadow);
	border-radius: var(--fanki-button-radius);
}

.wc-proceed-to-checkout .checkout-button:hover {
	background: var(--fanki-btn-primary-hover-bg);
	color: var(--fanki-btn-primary-hover-color);
	border-color: var(--fanki-btn-primary-hover-border-color);
}

/* Cross-sells might render full-width or inside the narrow .cart-collaterals
   column depending on WooCommerce's exact markup — auto-fill instead of a
   fixed column count so it looks reasonable in either case. */

.cross-sells {
	margin-top: var(--fanki-space-6);
}

.cross-sells > h2 {
	font-size: var(--fanki-font-size-xl);
	margin-bottom: var(--fanki-space-4);
}

.cross-sells ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

@media (max-width: 1024px) {
	.woocommerce-cart-form,
	.cart-collaterals {
		flex-basis: 100%;
	}

	.cart_totals {
		position: static;
	}

	table.shop_table.cart thead {
		display: none;
	}

	table.shop_table.cart tr:not(.actions) {
		display: block;
		border-bottom: 1px solid var(--fanki-color-text-subtle);
		padding-block: var(--fanki-space-4);
	}

	table.shop_table.cart tr:not(.actions) td {
		display: block;
		border-bottom: none;
		padding-block: var(--fanki-space-2);
	}

	/* The desktop-only fixed pixel widths above (product-remove/-thumbnail/
	   -price/-quantity/-subtotal) exist only to stop table-layout: fixed
	   from starving product-name of space — on mobile these cells are
	   display:block now (immediately above), where a leftover "width: 88px"
	   etc. would instead squeeze each stacked field into a narrow fixed-
	   width box instead of the full-width block it needs to be. Reset back
	   to auto so mobile is unaffected by the desktop-table-layout fix. */
	table.shop_table.cart td.product-remove,
	table.shop_table.cart td.product-thumbnail,
	table.shop_table.cart td.product-price,
	table.shop_table.cart td.product-quantity,
	table.shop_table.cart td.product-subtotal {
		width: auto;
	}
}