/* Cart and checkout pages. The Cart and Checkout blocks print each answer row inline with " / " between rows and drop aria attributes,
   so the rows are stacked here, the separators hidden, and each Edit link given a touch-sized target. Colours are the site's tokens. */
.na-ri-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.wc-block-components-product-details:has(.na-ri-row) {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-block-start: 8px;
}

.wc-block-components-product-details:has(.na-ri-row) span[aria-hidden="true"] {
	display: none;
}

.wc-block-components-product-details:has(.na-ri-row) .wc-block-components-product-details__name {
	display: block;
	font-weight: 600;
}

.wc-block-components-product-details:has(.na-ri-row) .wc-block-components-product-details__value {
	display: block;
}

.wc-block-components-product-details .na-ri-row {
	display: block;
	overflow-wrap: anywhere;
}

.wc-block-components-product-details .na-ri-edit {
	display: inline-block;
	padding-block: 12px;
	min-height: 24px;
	color: var(--na-copper, #96452F);
	font-weight: 600;
}

.wc-block-components-product-metadata:has(.na-ri-row) .wc-block-components-product-metadata__description {
	display: none;
}

.na-ri-add-another a {
	display: inline-block;
	padding-block: 12px;
}

/* The buttons' words are white on the copper pill (the link colour otherwise wins on this palette). */
.wc-block-cart__submit-button .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text {
	color: #FFFFFF;
}

/* CartFlows' reminder consent line: readable size and a button-sized target for its skip control (D4). */
#wcf_cf_gdpr_message_block,
#wcf_cf_gdpr_message_block span {
	font-size: 16px !important;
	line-height: 1.5;
}

#wcf_ca_gdpr_no_thanks {
	display: inline-block;
	padding: 12px 8px;
	color: var(--na-copper, #96452F);
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

/* WooCommerce's own tick boxes on the checkout (terms, order note) get the site's focus ring: 2 px, Ink. */
html body .wc-block-components-checkbox input.wc-block-components-checkbox__input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--na-ink, #1E2421);
	outline-offset: 2px;
}

/* The readings have no product image: WooCommerce's grey placeholder is hidden on Review and in the checkout summary, which gives the answers the full width (specification 11.2). */
.wc-block-cart .wc-block-cart-item__image,
.wc-block-cart .wc-block-cart-items__header .wc-block-cart-items__header-product,
.wc-block-components-order-summary .wc-block-components-order-summary-item .wc-block-components-order-summary-item__image {
	display: none;
}

/* Without the image column, Review's line (a grid on narrower screens) is the answers, then the price on the right.
   On wide screens WooCommerce's header cell over the image column carries the word "Product": it now heads the answers' column. */
body .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__header .wc-block-cart-items__header-image {
	width: auto;
}

body .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
	grid-template-columns: minmax(0, 1fr) auto;
}

body .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
	grid-column: 1 / 2;
}

body .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
	grid-column: 2 / 3;
}