/* =============================================================================
   Bogdánbor Child — WooCommerce Cart & Checkout
   Layout adaptation for the fixed cinematic header + brand identity system.
   Depends on: bogdanbor-header (which loads typography.css → header.css).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Header offset
   Clears the fixed header and adds editorial breathing room.
   --header-height is 180px desktop / 64px mobile (set in header.css :root).
   ----------------------------------------------------------------------------- */
body.woocommerce-cart   #main,
body.woocommerce-checkout #main {
	padding-top: calc( var( --header-height ) + 3rem );
}

/* -----------------------------------------------------------------------------
   2. Page title — h1
   WooCommerce renders <h1> as the page/post title within the article.
   ----------------------------------------------------------------------------- */
body.woocommerce-cart   h1,
body.woocommerce-checkout h1 {
	font-family:    var( --font-serif );
	font-size:      var( --text-2xl );
	font-weight:    400;
	letter-spacing: var( --tracking-wide );
	color:          var( --color-ink );
	margin-bottom:  3rem;
}

/* -----------------------------------------------------------------------------
   3. Page container width — match site grid
   WooCommerce's .woocommerce div is inside the article; add horizontal padding
   to align with the rest of the site's 1280px / 3rem gutter system.
   ----------------------------------------------------------------------------- */
body.woocommerce-cart   .woocommerce,
body.woocommerce-checkout .woocommerce {
	max-width: 1280px;
	margin:    0 auto;
	padding:   0 3rem;
	box-sizing: border-box;
}

/* =============================================================================
   CART PAGE
   ============================================================================= */

/* -----------------------------------------------------------------------------
   4. Cart table — shop_table
   ----------------------------------------------------------------------------- */
body.woocommerce-cart .woocommerce table.shop_table {
	border:          none;
	border-collapse: collapse;
	width:           100%;
}

body.woocommerce-cart .woocommerce table.shop_table th {
	font-family:    var( --font-ui );
	font-size:      var( --text-xs );
	font-weight:    400;
	letter-spacing: var( --tracking-ultra );
	text-transform: uppercase;
	color:          var( --color-muted );
	border-top:     none;
	border-bottom:  1px solid var( --color-border );
	padding-bottom: 1rem;
}

body.woocommerce-cart .woocommerce table.shop_table td {
	border-top:     none;
	border-bottom:  1px solid var( --color-border );
	padding:        1.75rem 0;
	vertical-align: middle;
}

/* Product thumbnail column — explicit width + right gap so image and name don't crowd each other */
body.woocommerce-cart .woocommerce table.cart td.product-thumbnail {
	width:         90px;
	padding-right: 1.75rem;
}

body.woocommerce-cart .woocommerce table.cart td.product-thumbnail img {
	width:   80px;
	height:  auto;
	display: block;
}

/* Product name link */
body.woocommerce-cart .woocommerce table.cart .product-name a {
	font-family:     var( --font-serif );
	font-size:       var( --text-md );
	font-weight:     400;
	color:           var( --color-ink );
	text-decoration: none;
	letter-spacing:  var( --tracking-wide );
}

body.woocommerce-cart .woocommerce table.cart .product-name a:hover {
	color: var( --color-accent );
}

/* Price + subtotal — scope to td only; th.product-subtotal must inherit
   the shared column-header rule above (font-ui, text-xs, muted). */
body.woocommerce-cart .woocommerce table.cart td.product-price,
body.woocommerce-cart .woocommerce table.cart td.product-subtotal {
	font-family: var( --font-serif );
	font-size:   var( --text-base );
	color:       var( --color-ink );
}

/* Quantity widget — verified against Blocksy 3.x (ct-decrease/ct-increase spans,
   [data-type] attribute, hard-coded height:22px default). Re-test after any Blocksy
   parent-theme update. Standard WooCommerce button.minus/button.plus are NOT used. */

/* Container */
body.woocommerce-cart .woocommerce .quantity[data-type] {
	display:  inline-flex;
	position: relative;
	width:    130px;
	height:   44px;
	border:   1px solid rgba( 0, 0, 0, 0.15 );
}

/* Input — fills the container; padding clears the 40 px buttons on each side */
body.woocommerce-cart .woocommerce .quantity[data-type] input.qty {
	width:       100%;
	padding:     0 42px;
	text-align:  center;
	border:      none;
	background:  transparent;
	font-family: var( --font-ui );
	font-size:   var( --text-sm );
	color:       var( --color-ink );
	box-sizing:  border-box;
	/* Remove native browser spin buttons */
	-webkit-appearance: textfield;
	appearance:         textfield;
}

body.woocommerce-cart .woocommerce .quantity[data-type] input.qty::-webkit-inner-spin-button,
body.woocommerce-cart .woocommerce .quantity[data-type] input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	appearance:         none;
	margin:             0;
}

body.woocommerce-cart .woocommerce .quantity[data-type] input.qty:focus {
	outline: none; /* focus ring is on the container via :focus-within below */
}

/* WCAG 2.4.7 Focus Visible — promote focus signal to the container border
   so keyboard users get a clear visual indicator. :focus-within is supported
   in all modern browsers. */
body.woocommerce-cart .woocommerce .quantity[data-type]:focus-within {
	border-color: var( --color-ink );
}

/* Shared styles for both stepper spans.
   Blocksy sets height:22px on these spans, which overrides the top:0/bottom:0
   stretch — must explicitly set height:100% to achieve pixel-perfect centering. */
body.woocommerce-cart .woocommerce .quantity[data-type] .ct-decrease,
body.woocommerce-cart .woocommerce .quantity[data-type] .ct-increase {
	position:        absolute;
	top:             0;
	bottom:          0;
	height:          100%;   /* overrides Blocksy's height:22px */
	width:           40px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	cursor:          pointer;
	background:      transparent;
	color:           var( --color-muted );
	transition:      color 0.25s ease;
	z-index:         2;
	/* Reset Blocksy's default left/right offset */
	left:  unset;
	right: unset;
}

body.woocommerce-cart .woocommerce .quantity[data-type] .ct-decrease { left:  0; }
body.woocommerce-cart .woocommerce .quantity[data-type] .ct-increase { right: 0; }

body.woocommerce-cart .woocommerce .quantity[data-type] .ct-decrease:hover,
body.woocommerce-cart .woocommerce .quantity[data-type] .ct-increase:hover {
	color: var( --color-ink );
}

/* Draw − (U+2212) and + glyphs — override Blocksy's empty ::before content.
   CSS unicode escapes are used for the minus sign to guarantee correct
   rendering regardless of file encoding or editor copy-paste. */
body.woocommerce-cart .woocommerce .quantity[data-type] .ct-decrease::before {
	content:     '\2212'; /* − MINUS SIGN U+2212 */
	font-size:   1.1rem;
	line-height: 1;
	font-weight: 300;
}

body.woocommerce-cart .woocommerce .quantity[data-type] .ct-increase::before {
	content:     '+';
	font-size:   1.1rem;
	line-height: 1;
	font-weight: 300;
}

/* Remove (×) button */
body.woocommerce-cart .woocommerce table.cart .product-remove a {
	color:       var( --color-muted );
	font-size:   1.25rem;
	line-height: 1;
}

body.woocommerce-cart .woocommerce table.cart .product-remove a:hover {
	color: var( --color-accent );
}

/* -----------------------------------------------------------------------------
   5. Actions row — coupon + update cart
   ----------------------------------------------------------------------------- */
body.woocommerce-cart .woocommerce table.cart .actions {
	border-top:    1px solid var( --color-border );
	border-bottom: none;
	padding:       2rem 0 0;
}

body.woocommerce-cart .woocommerce #coupon_code {
	font-family:  var( --font-ui );
	font-size:    var( --text-sm );
	letter-spacing: var( --tracking-wide );
	border:       1px solid rgba( 0, 0, 0, 0.15 );
	border-radius: 0;
	padding:      0.75rem 1rem;
	background:   transparent;
	color:        var( --color-ink );
	transition:   border-color 0.25s ease;
	-webkit-appearance: none;
	width: auto;
}

body.woocommerce-cart .woocommerce #coupon_code:focus {
	outline:      none;
	border-color: var( --color-ink );
}

/* -----------------------------------------------------------------------------
   6. Buttons — override WooCommerce blue throughout cart + checkout
   ----------------------------------------------------------------------------- */
body.woocommerce-cart   .woocommerce .button,
body.woocommerce-checkout .woocommerce .button,
body.woocommerce-cart   .woocommerce input.button,
body.woocommerce-checkout .woocommerce input.button,
body.woocommerce-cart   .woocommerce a.button,
body.woocommerce-checkout .woocommerce a.button,
body.woocommerce-checkout .woocommerce #place_order {
	font-family:     var( --font-ui );
	font-size:       var( --text-xs );
	font-weight:     400;
	letter-spacing:  var( --tracking-widest );
	text-transform:  uppercase;
	background:      var( --color-ink );
	color:           #fff;
	border:          1px solid transparent;
	border-radius:   0;
	padding:         0.875rem 2rem;
	cursor:          pointer;
	transition:      background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	display:         inline-block;
	text-decoration: none;
	line-height:     1;
}

body.woocommerce-cart   .woocommerce .button:hover,
body.woocommerce-checkout .woocommerce .button:hover,
body.woocommerce-cart   .woocommerce input.button:hover,
body.woocommerce-checkout .woocommerce input.button:hover,
body.woocommerce-cart   .woocommerce a.button:hover,
body.woocommerce-checkout .woocommerce a.button:hover,
body.woocommerce-checkout .woocommerce #place_order:hover {
	background: var( --color-accent );
	color:      #fff;
}

/* Coupon "Apply coupon" — secondary ghost style */
body.woocommerce-cart .woocommerce .button[name="apply_coupon"] {
	background:   transparent;
	color:        var( --color-ink );
	border-color: rgba( 0, 0, 0, 0.2 );
}

body.woocommerce-cart .woocommerce .button[name="apply_coupon"]:hover {
	background:   var( --color-ink );
	color:        #fff;
	border-color: var( --color-ink );
}

/* Update cart — subtle secondary style */
body.woocommerce-cart .woocommerce .button[name="update_cart"] {
	background:   transparent;
	color:        var( --color-muted );
	border-color: rgba( 0, 0, 0, 0.1 );
}

body.woocommerce-cart .woocommerce .button[name="update_cart"]:hover {
	background:   var( --color-ink );
	color:        #fff;
	border-color: var( --color-ink );
}

/* -----------------------------------------------------------------------------
   7. Cart totals panel
   ----------------------------------------------------------------------------- */
body.woocommerce-cart .woocommerce .cart-collaterals {
	margin-top: 4rem;
}

body.woocommerce-cart .woocommerce .cart_totals h2 {
	font-family:    var( --font-ui );
	font-size:      var( --text-xs );
	font-weight:    400;
	letter-spacing: var( --tracking-ultra );
	text-transform: uppercase;
	color:          var( --color-muted );
	margin-bottom:  1.5rem;
}

body.woocommerce-cart .woocommerce .cart_totals table {
	border: none;
}

/* Cart totals row labels — same typographic register as cart column headers
   (font-ui, text-xs, ultra tracking, uppercase, muted) for full consistency. */
body.woocommerce-cart .woocommerce .cart_totals table th {
	font-family:    var( --font-ui );
	font-size:      var( --text-xs );
	font-weight:    400;
	letter-spacing: var( --tracking-ultra );
	text-transform: uppercase;
	color:          var( --color-muted );
	border:         none;
	padding:        0.875rem 0;
	vertical-align: middle;
}

body.woocommerce-cart .woocommerce .cart_totals table td {
	font-family: var( --font-serif );
	font-size:   var( --text-base );
	color:       var( --color-ink );
	border:      none;
	padding:     0.875rem 0;
	vertical-align: middle;
}

body.woocommerce-cart .woocommerce .cart_totals table tr {
	border-bottom: 1px solid var( --color-border );
}

/* Prevent double-border on the grand-total row: the tr rule above adds a
   bottom border, but .order-total is the last row so that border is unwanted. */
body.woocommerce-cart .woocommerce .cart_totals table .order-total {
	border-bottom: none;
}

/* Grand-total row — label stays at text-xs uppercase (inherited), but weight
   and the top separator make it stand apart from sub-total rows. */
body.woocommerce-cart .woocommerce .cart_totals table .order-total th {
	font-weight:  500;
	padding-top:  1.5rem;
	border-top:   1px solid var( --color-border );
}

/* Grand-total amount — step up to text-md for visual punctuation */
body.woocommerce-cart .woocommerce .cart_totals table .order-total td {
	font-size:    var( --text-md );
	font-weight:  500;
	padding-top:  1.5rem;
	border-top:   1px solid var( --color-border );
}

/* The shipping row td is a colspan=2 cell with mixed heading+methods+note+button content.
   Override Blocksy's end-align so all text reads left-to-right correctly. */
body.woocommerce-cart .woocommerce .cart_totals tr.shipping td {
	text-align: left;
}

/* Shipping row — Blocksy renders tr.shipping as a single td[colspan=2] with
   display:flex and a ct-shipping-heading div (no th element).  Style the
   sub-elements so they match the rest of the cart-totals typography. */
body.woocommerce-cart .woocommerce .cart_totals .ct-shipping-heading {
	font-family:    var( --font-ui );
	font-size:      var( --text-xs );
	font-weight:    400;
	letter-spacing: var( --tracking-ultra );
	text-transform: uppercase;
	color:          var( --color-muted );
}

body.woocommerce-cart .woocommerce .cart_totals .woocommerce-shipping-methods {
	list-style: none;
	padding:    0;
	margin:     0;
}

body.woocommerce-cart .woocommerce .cart_totals .woocommerce-shipping-methods label {
	font-family:    var( --font-serif );
	font-size:      var( --text-base );
	color:          var( --color-ink );
	text-transform: none;
	letter-spacing: 0;
	font-weight:    400;
}

body.woocommerce-cart .woocommerce .cart_totals .woocommerce-shipping-destination {
	font-family:    var( --font-ui );
	font-size:      var( --text-xs );
	letter-spacing: var( --tracking-wide );
	color:          var( --color-muted );
	margin:         0.5rem 0 0;
}

body.woocommerce-cart .woocommerce .cart_totals .shipping-calculator-button {
	font-family:    var( --font-ui );
	font-size:      var( --text-xs );
	letter-spacing: var( --tracking-wide );
	color:          var( --color-muted );
	text-decoration: none;
	border-bottom:  1px solid rgba( 0, 0, 0, 0.15 );
	display:        inline-block;
	margin-top:     0.5rem;
}

body.woocommerce-cart .woocommerce .cart_totals .shipping-calculator-button:hover {
	color:              var( --color-ink );
	border-bottom-color: var( --color-ink );
}

body.woocommerce-cart .woocommerce .wc-proceed-to-checkout {
	margin-top: 2rem;
}

body.woocommerce-cart .woocommerce .wc-proceed-to-checkout .checkout-button {
	display:     block;
	width:       100%;
	text-align:  center;
	padding:     1.25rem 2rem;
}

/* Empty cart message */
body.woocommerce-cart .woocommerce-cart__empty-page p {
	font-family: var( --font-ui );
	font-size:   var( --text-sm );
	color:       var( --color-muted );
}

/* =============================================================================
   CHECKOUT PAGE
   ============================================================================= */

/* -----------------------------------------------------------------------------
   8. Section headings (Billing details, Your order, Payment)
   ----------------------------------------------------------------------------- */
body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-checkout h3,
body.woocommerce-checkout #order_review_heading {
	font-family:    var( --font-ui );
	font-size:      var( --text-xs );
	font-weight:    400;
	letter-spacing: var( --tracking-ultra );
	text-transform: uppercase;
	color:          var( --color-muted );
	margin-bottom:  2rem;
}

/* -----------------------------------------------------------------------------
   9. Form labels
   ----------------------------------------------------------------------------- */
body.woocommerce-checkout .woocommerce-checkout label,
body.woocommerce-checkout .woocommerce-checkout label.checkbox {
	font-family:    var( --font-ui );
	font-size:      var( --text-xs );
	font-weight:    400;
	letter-spacing: var( --tracking-widest );
	text-transform: uppercase;
	color:          var( --color-muted );
	margin-bottom:  0.4rem;
	display:        block;
}

/* Required asterisk — use accent instead of WC blue */
body.woocommerce-checkout .woocommerce-checkout label .required,
body.woocommerce-checkout .woocommerce-checkout .required {
	color: var( --color-accent );
}

/* -----------------------------------------------------------------------------
   10. Form inputs, selects, textareas
   ----------------------------------------------------------------------------- */
body.woocommerce-checkout .woocommerce-checkout input[type="text"],
body.woocommerce-checkout .woocommerce-checkout input[type="email"],
body.woocommerce-checkout .woocommerce-checkout input[type="tel"],
body.woocommerce-checkout .woocommerce-checkout input[type="number"],
body.woocommerce-checkout .woocommerce-checkout input[type="password"],
body.woocommerce-checkout .woocommerce-checkout select,
body.woocommerce-checkout .woocommerce-checkout textarea {
	font-family:        var( --font-ui );
	font-size:          var( --text-sm );
	letter-spacing:     var( --tracking-wide );
	border:             1px solid rgba( 0, 0, 0, 0.15 );
	border-radius:      0;
	padding:            0.875rem 1rem;
	width:              100%;
	background:         transparent;
	color:              var( --color-ink );
	transition:         border-color 0.25s ease;
	-webkit-appearance: none;
	box-sizing:         border-box;
}

body.woocommerce-checkout .woocommerce-checkout input:focus,
body.woocommerce-checkout .woocommerce-checkout select:focus,
body.woocommerce-checkout .woocommerce-checkout textarea:focus {
	outline:      none;
	border-color: var( --color-ink );
	box-shadow:   none;
}

/* Form row vertical rhythm */
body.woocommerce-checkout .woocommerce-checkout .form-row {
	margin-bottom: 1.5rem;
}

/* Validation — error state */
body.woocommerce-checkout .woocommerce-checkout .woocommerce-invalid input,
body.woocommerce-checkout .woocommerce-checkout .woocommerce-invalid select {
	border-color: var( --color-accent );
}

/* Inline field validation text */
body.woocommerce-checkout .woocommerce-checkout .validate-required.woocommerce-invalid > label {
	color: var( --color-accent );
}

/* -----------------------------------------------------------------------------
   11. Order review panel (right column)
   ----------------------------------------------------------------------------- */
body.woocommerce-checkout .woocommerce #order_review {
	background: var( --color-warm );
	padding:    2.5rem;
}

body.woocommerce-checkout .woocommerce table.shop_table {
	border:          none;
	border-collapse: collapse;
}

body.woocommerce-checkout .woocommerce table.shop_table th {
	font-family:    var( --font-ui );
	font-size:      var( --text-xs );
	font-weight:    400;
	letter-spacing: var( --tracking-ultra );
	text-transform: uppercase;
	color:          var( --color-muted );
	border-top:     none;
	border-bottom:  1px solid var( --color-border );
	padding-bottom: 1rem;
}

body.woocommerce-checkout .woocommerce table.shop_table td {
	font-family: var( --font-serif );
	font-size:   var( --text-base );
	color:       var( --color-ink );
	border-top:  none;
	border-bottom: 1px solid var( --color-border );
	padding:     0.875rem 0;
}

body.woocommerce-checkout .woocommerce table.shop_table .order-total th,
body.woocommerce-checkout .woocommerce table.shop_table .order-total td {
	font-weight:   500;
	padding-top:   1.25rem;
	border-bottom: none;
}

/* -----------------------------------------------------------------------------
   12. Payment methods
   ----------------------------------------------------------------------------- */
body.woocommerce-checkout #payment {
	background:    transparent;
	border:        1px solid var( --color-border );
	border-radius: 0;
	padding:       2rem;
	margin-top:    2.5rem;
}

body.woocommerce-checkout #payment .payment_methods {
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var( --color-border );
	padding-bottom: 1.5rem;
}

body.woocommerce-checkout #payment .payment_methods input[type="radio"] {
	accent-color: var( --color-ink );
}

body.woocommerce-checkout #payment .payment_methods li {
	margin-bottom: 0.75rem;
	list-style:    none;
}

body.woocommerce-checkout #payment .payment_methods label {
	font-family:    var( --font-ui );
	font-size:      var( --text-sm );
	font-weight:    400;
	letter-spacing: var( --tracking-wide );
	color:          var( --color-ink );
	text-transform: none;
	cursor:         pointer;
}

body.woocommerce-checkout #payment .payment_box {
	background:  transparent;
	padding:     0.75rem 0 0.25rem;
}

body.woocommerce-checkout #payment .payment_box p {
	font-family: var( --font-ui );
	font-size:   var( --text-sm );
	color:       var( --color-muted );
	margin:      0;
}

/* Place order button — full-width, primary */
body.woocommerce-checkout #payment #place_order {
	width:      100%;
	padding:    1.25rem 2rem;
	margin-top: 0.5rem;
	display:    block;
	box-sizing: border-box;
	text-align: center;
}

/* -----------------------------------------------------------------------------
   13. WooCommerce notices (success / error / info)
   ----------------------------------------------------------------------------- */
body.woocommerce-cart   .woocommerce-notices-wrapper,
body.woocommerce-checkout .woocommerce-notices-wrapper {
	margin-bottom: 2rem;
}

body.woocommerce-cart   .woocommerce-message,
body.woocommerce-checkout .woocommerce-message {
	font-family:  var( --font-ui );
	font-size:    var( --text-sm );
	letter-spacing: var( --tracking-wide );
	border-top:   2px solid var( --color-accent );
	background:   transparent;
	color:        var( --color-ink );
	/* Left padding must accommodate the absolute-positioned WooCommerce bell icon (left: 1.5em) */
	padding:      1.25rem 1.5rem 1.25rem 3.5rem;
}

body.woocommerce-cart   .woocommerce-error,
body.woocommerce-checkout .woocommerce-error {
	font-family:  var( --font-ui );
	font-size:    var( --text-sm );
	letter-spacing: var( --tracking-wide );
	border-top:   2px solid var( --color-accent );
	background:   transparent;
	color:        var( --color-ink );
	padding:      1.25rem 1.5rem;
}

body.woocommerce-cart   .woocommerce-info,
body.woocommerce-checkout .woocommerce-info {
	font-family:  var( --font-ui );
	font-size:    var( --text-sm );
	letter-spacing: var( --tracking-wide );
	border-top:   2px solid var( --color-muted );
	background:   transparent;
	color:        var( --color-muted );
	padding:      1.25rem 1.5rem;
}

/* "Return to shop" link in empty cart info notice */
body.woocommerce-cart .woocommerce-info .button {
	float:        right;
	margin-top:   -0.25rem;
}

/* =============================================================================
   14. Responsive — mobile ≤ 900px
   At this breakpoint --header-height resolves to 64px (set in header.css).
   ============================================================================= */
@media ( max-width: 900px ) {
	body.woocommerce-cart   #main,
	body.woocommerce-checkout #main {
		padding-top: calc( var( --header-height ) + 1.5rem );
	}

	body.woocommerce-cart   .woocommerce,
	body.woocommerce-checkout .woocommerce {
		padding: 0 1rem;
	}

	body.woocommerce-cart   h1,
	body.woocommerce-checkout h1 {
		font-size:     var( --text-xl );
		margin-bottom: 2rem;
	}

	/* Responsive cart table — hide thead, display each cell as a labeled block */
	body.woocommerce-cart .woocommerce table.shop_table_responsive thead {
		display: none;
	}

	body.woocommerce-cart .woocommerce table.shop_table_responsive tbody tr {
		display:       block;
		border-bottom: 1px solid var( --color-border );
		padding:       1.25rem 0;
	}

	body.woocommerce-cart .woocommerce table.shop_table_responsive tbody tr td {
		display:       flex;
		justify-content: space-between;
		align-items:   center;
		border-bottom: none;
		padding:       0.5rem 0;
		font-size:     var( --text-sm );
	}

	body.woocommerce-cart .woocommerce table.shop_table_responsive tbody tr td::before {
		content:       attr( data-title );
		font-family:   var( --font-ui );
		font-size:     var( --text-xs );
		letter-spacing: var( --tracking-ultra );
		text-transform: uppercase;
		color:         var( --color-muted );
		flex-shrink:   0;
		margin-right:  1rem;
	}

	/* Thumbnail cell: centre image, suppress the data-title label */
	body.woocommerce-cart .woocommerce table.shop_table_responsive td.product-thumbnail {
		justify-content: center;
		padding-right:   0;
	}

	body.woocommerce-cart .woocommerce table.shop_table_responsive td.product-thumbnail::before {
		display: none;
	}

	body.woocommerce-cart .woocommerce table.shop_table_responsive td.product-thumbnail img {
		width:  70px;
	}

	/* Remove cell: hide data-title label */
	body.woocommerce-cart .woocommerce table.shop_table_responsive td.product-remove::before {
		display: none;
	}

	body.woocommerce-cart .woocommerce table.shop_table_responsive td.product-remove {
		justify-content: flex-end;
	}

	/* Actions row: stack coupon + buttons vertically */
	body.woocommerce-cart .woocommerce table.cart .actions {
		display:        flex;
		flex-wrap:      wrap;
		gap:            1rem;
		padding:        1.5rem 0 0;
	}

	body.woocommerce-cart .woocommerce table.cart .actions .coupon {
		display:   flex;
		gap:       0.5rem;
		flex-wrap: wrap;
		width:     100%;
	}

	body.woocommerce-cart .woocommerce #coupon_code {
		flex:      1 1 auto;
		min-width: 0;
	}

	body.woocommerce-checkout .woocommerce #order_review {
		padding:    1.75rem;
		margin-top: 2rem;
	}

	body.woocommerce-checkout #payment {
		padding: 1.5rem;
	}

	/* Cart totals shipping row — Blocksy applies display:flex to the single
	   td[colspan=2]; on mobile this squishes all children into one cramped line.
	   Reset to column stack so each child (heading, methods, note, calculator)
	   gets its own full-width line. */
	body.woocommerce-cart .woocommerce .cart_totals tr.shipping td {
		display:        flex; /* display:flex already set by Blocksy; restated for clarity */
		flex-direction: column;
		align-items:    flex-start;
		text-align:     left;
		width:          100%;
		box-sizing:     border-box;
	}

	body.woocommerce-cart .woocommerce .cart_totals .ct-shipping-heading {
		margin-bottom: 0.5rem;
	}

	body.woocommerce-cart .woocommerce .cart_totals .woocommerce-shipping-destination {
		max-width: none;
	}

	body.woocommerce-cart .woocommerce .cart_totals .woocommerce-shipping-calculator {
		width: 100%;
	}
}