/**
 * Cart: keep the stacked cart rows aligned when a line has no quantity box.
 *
 * THE FAULT. The cart template lists each line with Divi's Cart Products
 * module in its "vertical" row layout, which stacks every cell and prints the
 * cell's label from a floated ::before (`content: attr(data-title) ": ";
 * float: left`). The four one-of-a-kind originals are sold individually, so
 * WooCommerce renders their quantity as a hidden input and the Quantity cell
 * has no in-flow content. A cell with nothing in it cannot contain its own
 * floated label: it collapses, the label hangs into the next cell, and
 * "Subtotal:" is pushed out of line.
 *
 * MEASURED, on the live cart holding "Radiant Heart - Sri Yantra | 90cm
 * Original":
 *
 *     before   Quantity cell 17px tall against 37px for Price and Subtotal;
 *              Subtotal began 17px below Quantity's top, under the hanging
 *              label
 *     after    Quantity cell 37px, Subtotal begins below it, labels align
 *
 * THE FIX is a clearfix on every stacked cell, so each cell is always at least
 * as tall as its own label. Cells that already contained their label measure
 * the same before and after. The Quantity value stays blank on an original,
 * which is correct: one per customer.
 *
 * Scoped to the Cart Products module, so the Cart Totals table, which also
 * carries `shop_table_responsive`, is not touched. Nothing in this theme styled
 * the cart before this file. See CHANGELOG.md for the verification.
 */

.et_pb_wc_cart_products.et_pb_row_layout_vertical table.shop_table_responsive tr td::after {
	content: "";
	display: table;
	clear: both;
}

/**
 * ---------------------------------------------------------------------------
 * Cart presentation fixes, 11 September 2026
 *
 * Four things the cart got wrong, each with its cause. Nothing here changes the
 * page's colours or layout; that is a separate decision.
 * ---------------------------------------------------------------------------
 */

/**
 * 1. The empty-cart "Return to shop" button.
 *
 * The empty-cart message is printed by the child theme, from
 * includes/cart-empty-message.php, so it sits OUTSIDE the Cart Products module
 * and inherits none of the module's button styling: it rendered in the default
 * grey, which reads as a disabled control. These are the Cart Totals module's
 * own button colours, so the two agree.
 */
.ruc-cart-empty p.return-to-shop .button.wc-backward {
	background-color: #221237;
	color: #ffffff;
	border: 0;
	border-radius: 5px;
	padding: 0.5em 1em;
	font-weight: 300;
	transition: background-color 300ms ease, color 300ms ease;
}

.ruc-cart-empty p.return-to-shop .button.wc-backward:hover {
	background-color: #f19d20;
	color: #221237;
}

/**
 * 2. The product thumbnail.
 *
 * Divi's own stylesheet hides the thumbnail cell in the vertical row layout
 * (`.et_pb_wc_cart_products.et_pb_row_layout_vertical table.cart
 * .product-thumbnail { display: none }`), so a cart holding a $1,111 painting
 * showed no painting. The cell is in the markup; it only needs showing, and
 * sizing so it does not print at its full 300px.
 */
.et_pb_wc_cart_products.et_pb_row_layout_vertical table.cart .product-thumbnail {
	display: block;
}

.et_pb_wc_cart_products.et_pb_row_layout_vertical table.cart .product-thumbnail img {
	width: 96px;
	height: auto;
	border-radius: 8px;
}

/**
 * The stacked layout prints each cell's label from `content: attr(data-title)
 * ": "`. The thumbnail cell has no data-title, so showing it printed a bare
 * colon; and every stacked cell is right-aligned, which put the picture in the
 * far corner above its own details.
 */
.et_pb_wc_cart_products.et_pb_row_layout_vertical table.cart .product-thumbnail::before {
	content: none !important;
}

.et_pb_wc_cart_products.et_pb_row_layout_vertical table.cart .product-thumbnail {
	text-align: left !important;
}

/**
 * 3. The empty "Quantity:" row.
 *
 * The four originals are sold individually, so WooCommerce renders their
 * quantity as a hidden input: the row printed a label with nothing after it.
 * Hidden only where there is no visible quantity box, so ordinary lines keep
 * theirs. `:has()` is unsupported on older browsers, where the row simply
 * remains as it was.
 */
.et_pb_wc_cart_products table.cart td.product-quantity:not(:has(input.qty)) {
	display: none;
}

/**
 * 4. The disabled "Update cart" button.
 *
 * WooCommerce disables it until a quantity changes, and in the vertical layout
 * Divi renders it full width, so an inert grey slab spanned the cart and read
 * as broken. Keeps the site's button colour and states its disabled state
 * honestly instead.
 */
.et_pb_wc_cart_products table.cart td.actions button[name="update_cart"]:disabled {
	background-color: #221237;
	color: #ffffff;
	opacity: 0.4;
	cursor: not-allowed;
}

/**
 * 5. "Proceed to checkout" on hover: half of one rule, half of another.
 *
 * The site styles EVERY WooCommerce button's hover state site-wide, with
 * `!important` on both properties:
 *
 *     .woocommerce a.button:hover { color: #ed6b25 !important;
 *                                   background-color: rgba(255,255,255,0) !important }
 *
 * Divi emits the Cart Totals module's own hover as
 * `color: #221237 !important; background-color: #F19D20` - the colour carries
 * `!important`, the background does not. So the module won the text and the
 * site-wide rule won the background, and the button hovered to dark text on
 * nothing, which is neither design.
 *
 * Resolved in favour of the site-wide pattern, so the cart hovers like every
 * other button on the site. The extra `.et_pb_module` in the selector is there
 * to outrank Divi's generated rule on specificity rather than on load order.
 */
body #page-container .et_pb_section .et_pb_wc_cart_totals.et_pb_module a.checkout-button:hover,
body #page-container .et_pb_section .et_pb_wc_cart_totals.et_pb_module button.button:hover {
	color: #ed6b25 !important;
	background-color: rgba(255, 255, 255, 0) !important;
}

/**
 * 6. The remove control.
 *
 * A bare 12px red glyph with almost no hit area. WooCommerce already gives it
 * an accessible label; this gives it a target worth aiming at.
 */
.et_pb_wc_cart_products table.cart td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7em;
	height: 1.7em;
	font-size: 20px;
	line-height: 1;
	border-radius: 50%;
}