/*
Theme Name:  RxMed Supply BriterAir
Theme URI:   https://rxmedsupply.com
Author:      RxMed Supply
Description: Theme for RxMed Supply — a certified medical device retailer and distributor serving Canada, the USA and the UK, carrying the BriterAir Medical private label. Requires the Lovable Core and RxMed Core plugins for content types, editable fields and lead capture.
Version:     1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rxmed
Tags:        custom-menu, featured-images, translation-ready, e-commerce
*/

/*
 * The design system lives in assets/css/app.css — the utility stylesheet compiled
 * for the original build and lifted from it whole. It is a fixed artefact: a
 * class that is not already in it has no styles at all, so anything it cannot
 * express is written here instead, using the same tokens.
 *
 * Palette, for reference:
 *   --brand #1E4FA8   --brand-dark #0B2B66   --brand-soft #DDE8F7
 *   --brand-tint #EEF3FB
 *   --ink #0F1D33     --body-text #4B5A72    --muted-ink #7A88A3
 *   --line #E2E8F0    --panel #F4F7FC        --page #FFFFFF
 *   --red #C0392B     (reserved for "Best Seller" tags)
 *
 * Type: Outfit for headings and figures, Inter for everything else. The
 * compiled sheet inlines both stacks at every use site rather than emitting
 * a --font-display variable, so the stacks are written out in full below.
 */

/* Core alignment classes. */
.alignwide {
	margin-left: auto;
	margin-right: auto;
	max-width: 80rem;
}

.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: none;
	width: 100vw;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignleft {
	float: left;
	margin-bottom: 1rem;
	margin-right: 1.5rem;
}

.alignright {
	float: right;
	margin-bottom: 1rem;
	margin-left: 1.5rem;
}

/* Screen-reader text, per the WordPress accessibility guidelines. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #fff;
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(15, 42, 92, 0.28);
	clip-path: none;
	color: var(--brand);
	display: block;
	font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	height: auto;
	left: 1rem;
	line-height: normal;
	padding: 0.75rem 1.25rem;
	text-decoration: none;
	top: 1rem;
	width: auto;
	z-index: 100000;
}

/* Honeypot: reachable by bots, never by people, and never affecting layout. */
.lvc-hp-field {
	clip-path: inset(50%) !important;
	height: 1px !important;
	overflow: hidden !important;
	pointer-events: none !important;
	position: absolute !important;
	white-space: nowrap !important;
	width: 1px !important;
}

/*
 * Editor-authored policy content. The utility sheet cannot reach block-editor
 * markup, so the legal-document styling is expressed here with the same tokens.
 */
.rx-doc > h2 {
	color: var(--ink);
	font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif;
	font-size: 1.25rem;
	font-weight: 600;
	margin-top: 2.5rem;
	scroll-margin-top: 6rem;
}

.rx-doc > h2:first-child {
	margin-top: 0;
}

.rx-doc > h3 {
	color: var(--ink);
	font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 600;
	margin-top: 1.75rem;
}

.rx-doc > p {
	color: var(--body-text);
	font-size: 0.875rem;
	line-height: 1.75;
	margin-top: 0.875rem;
}

.rx-doc > ul,
.rx-doc > ol {
	margin-top: 0.875rem;
}

.rx-doc > ul > li,
.rx-doc > ol > li {
	color: var(--body-text);
	font-size: 0.875rem;
	line-height: 1.75;
	list-style: none;
	padding-left: 1.25rem;
	position: relative;
}

.rx-doc > ul > li + li,
.rx-doc > ol > li + li {
	margin-top: 0.4375rem;
}

.rx-doc > ul > li::before {
	background: var(--brand);
	border-radius: 9999px;
	content: "";
	height: 0.3125rem;
	left: 0.125rem;
	position: absolute;
	top: 0.6875rem;
	width: 0.3125rem;
}

.rx-doc > ol {
	counter-reset: rx-doc-item;
}

.rx-doc > ol > li {
	counter-increment: rx-doc-item;
}

.rx-doc > ol > li::before {
	color: var(--brand);
	content: counter(rx-doc-item) ".";
	font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	left: 0;
	position: absolute;
}

.rx-doc a {
	color: var(--brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.rx-doc strong {
	color: var(--ink);
}

/* Native controls, tinted to the brand. */
.rx-check {
	accent-color: var(--brand);
	height: 1rem;
	width: 1rem;
}

@media print {
	.rx-no-print,
	header[data-site-header],
	footer[data-site-footer] {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
	}
}

/*
 * WooCommerce.
 *
 * Its three stylesheets are dropped in inc/woocommerce.php, so everything it
 * prints that no template of this theme reaches now arrives with nothing on it:
 * a notice is a bare paragraph, a checkout field is a browser field, the
 * place-order button is a browser button. What follows dresses all of that in
 * the same tokens as the rest of the site.
 *
 * The section sits in the `components` layer on purpose. The compiled sheet
 * declares components before utilities, so a class a template of this theme
 * puts on one of these elements still wins and these rules only fill in behind
 * it. Every selector here is WooCommerce's own name, because its scripts find
 * the cart table, the review order and the place-order button by exactly those
 * names — they are styled, never renamed.
 */
@layer components {

	/* ------------------------------------------------------------------
	 * Notices
	 * --------------------------------------------------------------- */

	.woocommerce-notices-wrapper:not(:empty),
	.woocommerce-NoticeGroup {
		display: block;
		margin-bottom: 1.5rem;
	}

	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error {
		background: #fff;
		border: 1px solid var(--line);
		border-left: 3px solid var(--brand);
		border-radius: 8px;
		color: var(--body-text);
		/* Contains the floated button below without a clearing element. */
		display: flow-root;
		font-size: 14px;
		line-height: 1.6;
		list-style: none;
		margin: 0 0 0.75rem;
		padding: 0.875rem 1.125rem;
	}

	.woocommerce-message:last-child,
	.woocommerce-info:last-child,
	.woocommerce-error:last-child {
		margin-bottom: 0;
	}

	.woocommerce-error {
		border-left-color: var(--red);
	}

	.woocommerce-error li + li {
		margin-top: 0.375rem;
	}

	/*
	 * WooCommerce prints the "view cart" button before the sentence it belongs
	 * to, and the sentence is a bare text node no selector can reach. Floating
	 * the button moves it to the end without touching the markup.
	 */
	.woocommerce-message .button,
	.woocommerce-info .button {
		float: right;
		margin-left: 1rem;
	}

	/* The two toggles above the checkout need room under them. */
	.woocommerce-form-coupon-toggle,
	.woocommerce-form-login-toggle {
		display: block;
		margin-bottom: 2rem;
	}

	/* ------------------------------------------------------------------
	 * Buttons WooCommerce prints for itself
	 * --------------------------------------------------------------- */

	.woocommerce .button,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	#place_order,
	.checkout-button,
	.single_add_to_cart_button {
		align-items: center;
		background: var(--brand);
		border: 0;
		border-radius: 6px;
		color: #fff;
		cursor: pointer;
		display: inline-flex;
		font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif;
		font-size: 13px;
		font-weight: 700;
		gap: 0.5rem;
		justify-content: center;
		letter-spacing: 0.025em;
		line-height: 1;
		min-height: 44px;
		padding: 0 1.5rem;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		transition: background-color 0.2s;
	}

	.woocommerce .button:hover,
	.woocommerce a.button:hover,
	.woocommerce button.button:hover,
	.woocommerce input.button:hover,
	#place_order:hover,
	.checkout-button:hover,
	.single_add_to_cart_button:hover {
		background: var(--brand-dark);
		color: #fff;
	}

	.woocommerce .button:disabled,
	.woocommerce button.button:disabled,
	.single_add_to_cart_button:disabled {
		cursor: not-allowed;
		opacity: 0.5;
	}

	/* The secondary action beside a primary one — update cart, apply coupon. */
	.woocommerce button[name="update_cart"],
	.woocommerce button[name="apply_coupon"] {
		background: #fff;
		border: 1px solid var(--line);
		color: var(--ink);
	}

	.woocommerce button[name="update_cart"]:hover,
	.woocommerce button[name="apply_coupon"]:hover {
		background: #fff;
		border-color: var(--brand);
		color: var(--brand);
	}

	/* The add to cart form on a product page: stepper, then button, on one row. */
	form.cart {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
	}

	form.cart .single_add_to_cart_button {
		flex: 1 1 auto;
		min-width: 12rem;
	}

	/* ------------------------------------------------------------------
	 * Form fields
	 * --------------------------------------------------------------- */

	.woocommerce form .form-row {
		display: block;
		margin: 0 0 1.125rem;
	}

	.woocommerce form .form-row label {
		color: var(--body-text);
		display: block;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.12em;
		margin-bottom: 0.375rem;
		text-transform: uppercase;
	}

	.woocommerce form .form-row .required {
		border: 0;
		color: var(--red);
		text-decoration: none;
	}

	.woocommerce form .form-row input.input-text,
	.woocommerce form .form-row textarea,
	.woocommerce form .form-row select {
		background: #fff;
		border: 1px solid var(--line);
		border-radius: 6px;
		box-shadow: none;
		color: var(--ink);
		font-family: Inter, ui-sans-serif, system-ui, sans-serif;
		font-size: 14px;
		height: 44px;
		line-height: 1.4;
		padding: 0 0.875rem;
		width: 100%;
	}

	.woocommerce form .form-row textarea {
		height: auto;
		min-height: 7rem;
		padding: 0.75rem 0.875rem;
		resize: vertical;
	}

	.woocommerce form .form-row input.input-text:focus,
	.woocommerce form .form-row textarea:focus,
	.woocommerce form .form-row select:focus {
		border-color: var(--brand);
		outline: 2px solid color-mix(in oklab, var(--brand) 20%, transparent);
		outline-offset: 0;
	}

	.woocommerce form .form-row.woocommerce-invalid input.input-text,
	.woocommerce form .form-row.woocommerce-invalid select {
		border-color: var(--red);
	}

	/* Two fields to a row from the tablet up, as the checkout expects. */
	@media (min-width: 768px) {
		.woocommerce form .form-row-first,
		.woocommerce form .form-row-last {
			display: inline-block;
			vertical-align: top;
			width: calc(50% - 0.5rem);
		}

		.woocommerce form .form-row-first {
			margin-right: 1rem;
		}
	}

	/* ------------------------------------------------------------------
	 * Tables: the cart, the order review
	 * --------------------------------------------------------------- */

	.shop_table,
	.cart_totals table,
	.woocommerce-checkout-review-order-table {
		border-collapse: collapse;
		font-size: 14px;
		width: 100%;
	}

	.shop_table th,
	.cart_totals table th,
	.woocommerce-checkout-review-order-table th {
		color: var(--body-text);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.12em;
		padding: 0.875rem 0;
		text-align: left;
		text-transform: uppercase;
	}

	.shop_table td,
	.cart_totals table td,
	.woocommerce-checkout-review-order-table td {
		padding: 0.875rem 0;
		vertical-align: middle;
	}

	.shop_table tr + tr > *,
	.cart_totals table tr + tr > *,
	.woocommerce-checkout-review-order-table tr + tr > *,
	.woocommerce-checkout-review-order-table tfoot tr:first-child > * {
		border-top: 1px solid var(--line);
	}

	.shop_table td.product-price,
	.shop_table td.product-subtotal,
	.cart_totals table td,
	.woocommerce-checkout-review-order-table td {
		font-variant-numeric: tabular-nums;
		text-align: right;
	}

	.shop_table td.product-name,
	.woocommerce-checkout-review-order-table td.product-name {
		color: var(--ink);
		font-weight: 600;
		text-align: left;
	}

	.shop_table .product-thumbnail img {
		border: 1px solid var(--line);
		border-radius: 6px;
		height: auto;
		width: 72px;
	}

	/*
	 * Column widths.
	 *
	 * The last row of the cart table is a single cell spanning all six columns
	 * that holds the coupon field and the two buttons, and it is laid out with
	 * flex. An automatic table layout still asks that cell how wide it wants to
	 * be and shares the answer out across the columns it spans — which handed
	 * the little remove-cross column half the page and shoved the product, the
	 * price and the totals hard against the right edge.
	 *
	 * A fixed layout takes the widths from the header row and ignores what the
	 * spanning cell would prefer, which is exactly the behaviour wanted here.
	 * Every column is therefore given a width, and the product name is given
	 * the remainder.
	 */

	.woocommerce-cart-form__contents {
		table-layout: fixed;
	}

	.woocommerce-cart-form__contents th.product-remove,
	.woocommerce-cart-form__contents td.product-remove {
		width: 2.5rem;
	}

	.woocommerce-cart-form__contents th.product-thumbnail,
	.woocommerce-cart-form__contents td.product-thumbnail {
		width: 6rem;
	}

	/* The name takes whatever the sized columns leave. */
	.woocommerce-cart-form__contents th.product-name,
	.woocommerce-cart-form__contents td.product-name {
		width: 100%;
	}

	.woocommerce-cart-form__contents th.product-price,
	.woocommerce-cart-form__contents td.product-price,
	.woocommerce-cart-form__contents th.product-subtotal,
	.woocommerce-cart-form__contents td.product-subtotal {
		white-space: nowrap;
		width: 6.5rem;
	}

	.woocommerce-cart-form__contents th.product-quantity,
	.woocommerce-cart-form__contents td.product-quantity {
		width: 10.5rem;
	}

	/*
	 * The checkout's order review is two columns with no spanning cell, so it
	 * keeps the automatic layout. It needs only one thing: the money column
	 * wide enough not to break a total across two lines.
	 */
	.woocommerce-checkout-review-order-table td.product-total,
	.woocommerce-checkout-review-order-table th.product-total,
	.woocommerce-checkout-review-order-table tfoot td {
		white-space: nowrap;
		width: 1%;
	}

	/*
	 * Space between the columns without indenting the outer edges, so the table
	 * still lines up with the headings above it.
	 */
	.shop_table th + th,
	.shop_table td + td {
		padding-left: 1rem;
	}

	.shop_table td.product-remove a,
	.woocommerce a.remove {
		color: var(--body-text);
		display: inline-block;
		font-size: 20px;
		line-height: 1;
		text-decoration: none;
	}

	.woocommerce a.remove:hover {
		color: var(--red);
	}

	.order-total th,
	.order-total td {
		color: var(--ink);
		font-size: 17px;
		font-weight: 700;
	}

	.cart_totals,
	.woocommerce-checkout-review-order {
		background: #fff;
		border: 1px solid var(--line);
		border-radius: 8px;
		padding: 1.5rem;
	}

	.cart_totals h2,
	.woocommerce-checkout-review-order h3 {
		color: var(--ink);
		font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif;
		font-size: 17px;
		font-weight: 600;
		margin-bottom: 0.5rem;
	}

	.wc-proceed-to-checkout {
		margin-top: 1.25rem;
	}

	.wc-proceed-to-checkout .checkout-button {
		width: 100%;
	}

	/* ------------------------------------------------------------------
	 * The empty cart
	 *
	 * WooCommerce puts its "Return to shop" button in a bare paragraph, and
	 * the preflight has already taken every paragraph's margin away, so
	 * without this the button sits flush against the notice above it.
	 * --------------------------------------------------------------- */

	.return-to-shop {
		margin-top: 1.25rem;
	}

	/* ------------------------------------------------------------------
	 * Payment
	 * --------------------------------------------------------------- */

	#payment .payment_methods {
		list-style: none;
		margin: 0 0 1rem;
		padding: 0;
	}

	#payment .payment_methods li {
		border: 1px solid var(--line);
		border-radius: 6px;
		margin-bottom: 0.625rem;
		padding: 0.875rem 1rem;
	}

	#payment .payment_methods li label {
		color: var(--ink);
		display: inline;
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 0;
		text-transform: none;
	}

	#payment .payment_methods li input[type="radio"] {
		accent-color: var(--brand);
		margin-right: 0.5rem;
	}

	#payment .payment_box {
		background: var(--panel);
		border-radius: 6px;
		color: var(--body-text);
		font-size: 13px;
		line-height: 1.6;
		margin-top: 0.75rem;
		padding: 0.75rem 0.875rem;
	}

	#payment .payment_box p:last-child {
		margin-bottom: 0;
	}

	.woocommerce-privacy-policy-text,
	.woocommerce-terms-and-conditions-wrapper {
		color: var(--body-text);
		font-size: 13px;
		line-height: 1.6;
	}

	.woocommerce-privacy-policy-text a,
	.woocommerce-terms-and-conditions-wrapper a {
		color: var(--brand);
		text-decoration: underline;
	}

	#place_order {
		margin-top: 1rem;
		width: 100%;
	}

	/* ------------------------------------------------------------------
	 * The two-column checkout
	 * --------------------------------------------------------------- */

	@media (min-width: 1024px) {
		form.checkout.woocommerce-checkout {
			align-items: start;
			column-gap: 3rem;
			display: grid;
			grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
			/*
			 * The first row holds the order heading and nothing else. The
			 * billing form spans both rows, and when both rows size themselves
			 * from their content the browser shares that form's height between
			 * them — which gave the heading a 170px row and left the review
			 * panel stranded 142px below its own title. Making the second row
			 * flexible sends the whole surplus there instead.
			 */
			grid-template-rows: min-content 1fr;
		}

		form.checkout.woocommerce-checkout #customer_details {
			grid-column: 1;
		}

		form.checkout.woocommerce-checkout > h3,
		form.checkout.woocommerce-checkout #order_review_heading,
		form.checkout.woocommerce-checkout #order_review {
			grid-column: 2;
		}
	}

	form.checkout h3 {
		color: var(--ink);
		font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif;
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 1rem;
	}

	/* ------------------------------------------------------------------
	 * Account pages
	 * --------------------------------------------------------------- */

	.woocommerce-MyAccount-navigation ul {
		list-style: none;
		margin: 0 0 1.5rem;
		padding: 0;
	}

	.woocommerce-MyAccount-navigation li {
		border-bottom: 1px solid var(--line);
	}

	.woocommerce-MyAccount-navigation li a {
		color: var(--ink);
		display: block;
		font-size: 14px;
		padding: 0.625rem 0;
		text-decoration: none;
	}

	.woocommerce-MyAccount-navigation li.is-active a,
	.woocommerce-MyAccount-navigation li a:hover {
		color: var(--brand);
	}

	@media (min-width: 1024px) {
		.woocommerce-account .woocommerce {
			display: grid;
			gap: 2.5rem;
			grid-template-columns: 220px minmax(0, 1fr);
		}
	}
}

/*
 * The cart's line items, on a narrow screen.
 *
 * The items table is six columns wide and six columns do not fit a phone.
 * WooCommerce solved this in woocommerce-smallscreen.css, which is dropped, so
 * the table is folded here instead or it runs off the side of the page.
 *
 * Deliberately outside the components layer: the cells carry their desktop
 * padding and alignment as utility classes, and a layer below `utilities` could
 * not override them.
 */
@media (max-width: 767px) {

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

	.woocommerce-cart-form__contents,
	.woocommerce-cart-form__contents tbody {
		display: block;
		width: 100%;
	}

	.woocommerce-cart-form__contents .cart_item {
		align-items: start;
		column-gap: 1rem;
		display: grid;
		grid-template-areas:
			"thumb name     remove"
			"thumb price    price"
			"qty   subtotal subtotal";
		grid-template-columns: 84px 1fr auto;
		padding-bottom: 1.25rem;
		padding-top: 1.25rem;
		row-gap: 0.875rem;
	}

	/*
	 * The rule between rows is drawn on the top edge of every cell, which is
	 * right for a table and wrong for a folded one — each cell is its own grid
	 * item here, so it would draw a line inside the item rather than between two.
	 */
	.woocommerce-cart-form__contents .cart_item > td {
		border-top: 0;
		display: block;
		padding: 0;
	}

	.woocommerce-cart-form__contents .cart_item + .cart_item {
		border-top: 1px solid var(--line);
	}

	.woocommerce-cart-form__contents .product-thumbnail {
		grid-area: thumb;
	}

	.woocommerce-cart-form__contents .product-name {
		grid-area: name;
	}

	.woocommerce-cart-form__contents .product-quantity {
		grid-area: qty;
	}

	.woocommerce-cart-form__contents .product-price {
		grid-area: price;
		text-align: left;
	}

	.woocommerce-cart-form__contents .product-subtotal {
		align-self: center;
		grid-area: subtotal;
		text-align: right;
	}

	.woocommerce-cart-form__contents .product-remove {
		align-self: start;
		grid-area: remove;
		text-align: right;
	}

	.woocommerce-cart-form__contents .actions {
		display: block;
		padding-left: 0;
		padding-right: 0;
	}
}

/*
 * WooCommerce, second pass — the pieces the first pass could not see until the
 * classic cart and checkout were actually rendering.
 */
@layer components {

	/* ------------------------------------------------------------------
	 * The cart's coupon row and actions
	 * --------------------------------------------------------------- */

	/*
	 * The coupon field is an .input-text that sits outside any .form-row, so the
	 * field rules above never reached it and it rendered as an unbordered box.
	 */
	.woocommerce .coupon .input-text,
	.woocommerce #coupon_code,
	.woocommerce .checkout_coupon .input-text {
		background: #fff;
		border: 1px solid var(--line);
		border-radius: 6px;
		color: var(--ink);
		font-family: Inter, ui-sans-serif, system-ui, sans-serif;
		font-size: 14px;
		height: 44px;
		padding: 0 0.875rem;
		width: 100%;
	}

	.woocommerce .coupon .input-text:focus,
	.woocommerce #coupon_code:focus {
		border-color: var(--brand);
		outline: 2px solid color-mix(in oklab, var(--brand) 20%, transparent);
	}

	/*
	 * The row under the cart table: coupon on the left, update on the right.
	 *
	 * This row is a single table cell spanning all six columns, and it has to
	 * stay a table cell. Making it a flex container takes it out of the table
	 * layout, and a cell outside the table layout has no colspan — it collapses
	 * to the width of the first column, dragging the coupon field and the
	 * update button into a 40px stack. So the cell keeps its own display and
	 * the two halves are placed with a float instead.
	 */
	.woocommerce .cart .actions {
		display: table-cell;
		padding-top: 1.25rem;
		text-align: right;
	}

	.woocommerce .cart .actions::after {
		clear: both;
		content: "";
		display: block;
	}

	.woocommerce .cart .actions .coupon {
		align-items: center;
		display: flex;
		float: left;
		gap: 0.5rem;
	}

	.woocommerce .cart .actions .coupon .input-text {
		width: 12rem;
	}

	/* Neither label is long enough to deserve two lines. */
	.woocommerce .cart .actions .button {
		white-space: nowrap;
	}

	/* The coupon and login panels the checkout's two notices open onto. */
	.checkout_coupon,
	.woocommerce-form-login {
		background: #fff;
		border: 1px solid var(--line);
		border-radius: 8px;
		margin-bottom: 1.5rem;
		padding: 1.25rem;
	}

	/*
	 * The totals sit in a column against the right edge from the desktop up,
	 * beside the table rather than under its full width.
	 */
	@media (min-width: 1024px) {
		.woocommerce .cart-collaterals {
			display: flex;
			justify-content: flex-end;
			margin-top: 2rem;
		}

		.woocommerce .cart-collaterals .cart_totals {
			width: 24rem;
		}
	}

	/* ------------------------------------------------------------------
	 * Checkboxes WooCommerce prints
	 * --------------------------------------------------------------- */

	.woocommerce form .form-row.woocommerce-validated input.input-text {
		border-color: var(--line);
	}

	.woocommerce input[type="checkbox"],
	.woocommerce input[type="radio"] {
		accent-color: var(--brand);
		height: 1rem;
		margin-right: 0.5rem;
		vertical-align: middle;
		width: 1rem;
	}

	.woocommerce-shipping-fields h3 label,
	.woocommerce-form__label-for-checkbox {
		align-items: center;
		color: var(--ink);
		display: inline-flex;
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 0;
		text-transform: none;
	}

	/* ------------------------------------------------------------------
	 * The checkout grid
	 * --------------------------------------------------------------- */

	@media (min-width: 1024px) {
		/*
		 * The heading and the review are two separate children, so they take
		 * rows one and two of the right-hand column — and row one is as tall as
		 * the billing form beside it, which left the review stranded hundreds of
		 * pixels down the page. Spanning the details across both rows puts the
		 * heading and the panel back together at the top.
		 */
		form.checkout.woocommerce-checkout #customer_details {
			grid-row: 1 / span 2;
		}

		form.checkout.woocommerce-checkout #order_review_heading {
			grid-row: 1;
			margin-top: 0;
		}

		form.checkout.woocommerce-checkout #order_review {
			align-self: start;
			grid-row: 2;
		}
	}

	/* The shipping row's own methods list inside the review. */
	#shipping_method {
		list-style: none;
		margin: 0;
		padding: 0;
		text-align: right;
	}

	#shipping_method li {
		margin-bottom: 0.25rem;
	}

	.woocommerce-shipping-destination {
		color: var(--body-text);
		font-size: 12.5px;
	}
}

/*
 * The quote sheet's product row.
 *
 * The five-track grid it uses is in the compiled sheet, but only unprefixed —
 * there is no `sm:` or `lg:` variant of it to fold at — so the fold is written
 * here. Below the tablet the row becomes two columns and the remove button sits
 * on the end of its own line.
 */
@media (max-width: 767px) {
	.rx-quote-row {
		grid-template-columns: 1fr 1fr;
	}

	.rx-quote-row > [data-quote-remove] {
		justify-self: end;
	}
}