/* WooCommerce notices and forms: checkout, the thank-you page, order tables, account pages, page numbers. */
/* Notices: words and lines, not colour */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce p.no-comments {
	border: var(--cc-line) solid var(--cc-grey-200);
	border-left: 4px solid var(--cc-ink);
	border-radius: 0;
	background: var(--cc-white);
	color: var(--cc-ink);
}

.woocommerce-error {
	border: var(--cc-line-strong) solid var(--cc-ink);
	border-left-width: 4px;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	color: var(--cc-ink);
}

/* WooCommerce moves focus to a notice so screen readers announce it; the outline it then draws is not a control */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus {
	outline: none;
}

.woocommerce-message .button,
.woocommerce-info .button {
	min-height: 2.25rem;
}

/* Phones: a notice's button (such as "Confirm email address") floats beside the words on computers; on a phone that
   squeezes the words to a sliver. It sits under them instead, full width. */
@media (max-width: 599px) {
	.woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):has(.button) {
		padding: var(--cc-space-4) var(--cc-space-4) calc(var(--cc-control-height) + 2 * var(--cc-space-4)) 3.5rem;
	}

	.woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button {
		position: absolute;
		right: var(--cc-space-4);
		bottom: var(--cc-space-4);
		left: 3.5rem;
		float: none;
		min-height: var(--cc-control-height);
		margin: 0;
	}
}

/* Forms (checkout, account, reviews) */
.woocommerce form .form-row label {
	margin-bottom: var(--cc-space-1);
	font-weight: 600;
	line-height: 1.4;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select {
	min-height: var(--cc-control-height);
	padding: var(--cc-space-2) var(--cc-space-3);
	border: var(--cc-line) solid var(--cc-grey-500);
	border-radius: var(--cc-radius);
	background: var(--cc-white);
	color: var(--cc-ink);
	font: inherit;
	line-height: 1.4;
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border: var(--cc-line-strong) solid var(--cc-ink);
}

.woocommerce form .form-row .required {
	color: var(--cc-ink);
	text-decoration: none;
}

.woocommerce form .form-row .woocommerce-input-wrapper .description {
	background: var(--cc-ink);
	color: var(--cc-white);
}

.woocommerce form .form-row .woocommerce-input-wrapper .description::before {
	border-color: var(--cc-ink) transparent transparent;
}

/* Country and state pickers (selectWoo): the same box as the text fields, the words centred in it. WooCommerce pads
   the words by half a line on top, which pushed them to the bottom edge, and select2 pulls the next label up 4px. */
.select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	height: var(--cc-control-height);
	margin: 0;
	border: var(--cc-line) solid var(--cc-grey-500);
	border-radius: var(--cc-radius);
	background: var(--cc-white);
}

:is(.woocommerce, .woocommerce-page) .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 var(--cc-space-7) 0 var(--cc-space-3);
	color: var(--cc-ink);
	font: inherit;
	line-height: 1.4;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: var(--cc-space-2);
	height: 100%;
}

.woocommerce-password-strength.short,
.woocommerce-password-strength.bad,
.woocommerce-password-strength.good,
.woocommerce-password-strength.strong {
	border: var(--cc-line) solid var(--cc-ink);
	background: var(--cc-white);
	color: var(--cc-ink);
}

/* Checkout and order tables */
.woocommerce table.shop_table {
	border: var(--cc-line) solid var(--cc-grey-200);
	border-radius: var(--cc-radius);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th {
	border-color: var(--cc-grey-200);
}

.woocommerce-checkout #payment,
.woocommerce-cart #payment {
	border: var(--cc-line) solid var(--cc-grey-200);
	border-radius: var(--cc-radius);
	background: var(--cc-white);
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom-color: var(--cc-grey-200);
}

.woocommerce-checkout #payment div.payment_box {
	border: var(--cc-line) solid var(--cc-grey-200);
	background: var(--cc-white);
	color: var(--cc-ink);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-color: transparent transparent var(--cc-grey-200);
}

.woocommerce-checkout #payment div.payment_box input.input-text,
.woocommerce-checkout #payment div.payment_box textarea {
	border-color: var(--cc-grey-500);
}

.woocommerce-checkout #payment #place_order {
	width: 100%;
	min-height: 3.25rem;
	float: none;
}

/* Thank-you page: order number, date, email, total, payment method. Phones: one under another with a line between;
   computers: side by side with a line between columns. */
.woocommerce ul.order_details {
	display: grid;
	margin: 0 0 var(--cc-space-6);
	padding: 0;
	border-block: var(--cc-line) solid var(--cc-grey-200);
	list-style: none;
}

.woocommerce ul.order_details::before,
.woocommerce ul.order_details::after {
	display: none;
}

.woocommerce ul.order_details li {
	float: none;
	margin: 0;
	padding: var(--cc-space-3) 0;
	border: 0;
	color: var(--cc-grey-600);
	font-size: var(--cc-size-label);
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* :not(:first-child) rather than li + li: it also outweighs WooCommerce's "no line on the last item" rule */
.woocommerce ul.order_details li:not(:first-child) {
	border-top: var(--cc-line) solid var(--cc-grey-200);
}

.woocommerce ul.order_details li strong {
	display: block;
	margin-top: var(--cc-space-1);
	color: var(--cc-ink);
	font-family: var(--cc-font-heading);
	font-size: var(--cc-size-body);
	font-weight: 600;
	letter-spacing: 0;
	overflow-wrap: anywhere;
	text-transform: none;
}

@media (min-width: 900px) {
	.woocommerce ul.order_details {
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
	}

	.woocommerce ul.order_details li {
		padding: var(--cc-space-4) var(--cc-space-5);
	}

	.woocommerce ul.order_details li:first-child {
		padding-left: 0;
	}

	.woocommerce ul.order_details li:not(:first-child) {
		border-top: 0;
		border-left: var(--cc-line) solid var(--cc-grey-200);
	}
}

/* Account pages */
/* Phones: WooCommerce's narrow-screen table hides the order number (the row's heading cell); show it as a row like
   the others. Same breakpoint as WooCommerce's. */
@media (max-width: 768px) {
	.woocommerce table.my_account_orders tbody th {
		display: block;
		font-weight: 400;
		text-align: right;
	}

	.woocommerce table.my_account_orders tbody th::before {
		content: attr(data-title) ": ";
		float: left;
		font-weight: 700;
	}
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0 0 var(--cc-space-6);
	padding: 0;
	border-top: var(--cc-line) solid var(--cc-grey-200);
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: var(--cc-space-3) 0;
	border-bottom: var(--cc-line) solid var(--cc-grey-200);
	font-family: var(--cc-font-heading);
	font-weight: 500;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	font-weight: 700;
	text-decoration: underline;
}

/* Page numbers: the frame is in layout.css; WooCommerce's list items lose their own lines */
.woocommerce nav.woocommerce-pagination {
	text-align: center;
}

.woocommerce nav.woocommerce-pagination ul li {
	float: none;
	margin: 0;
	border: 0;
	overflow: visible;
}

/* Cart block: names without underlines, the sale price in sale green and the old one in grey, and no copy of each
   product's description under its name */
.wc-block-cart-items .wc-block-components-product-name {
	color: var(--cc-ink);
	text-decoration: none;
}

.wc-block-cart-items .wc-block-components-product-name:hover {
	text-decoration: underline;
}

.wc-block-components-product-price .wc-block-components-product-price__regular {
	color: var(--cc-grey-600);
	opacity: 1;
}

.wc-block-components-product-price .wc-block-components-product-price__value.is-discounted {
	color: var(--cc-sale);
	font-weight: 700;
}

.wc-block-cart-items .wc-block-components-product-metadata__description {
	display: none;
}

/* Cart block: the remove (bin) button and the "Add coupons" opener get 44px tap areas; the bin keeps its place */
html body .wc-block-cart .wc-block-cart-item__remove-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--cc-control-height);
	min-height: var(--cc-control-height);
	margin-inline-start: calc((1.5rem - var(--cc-control-height)) / 2);
}

html body .wc-block-components-panel__button {
	min-height: var(--cc-control-height);
}

/* Empty cart: a smaller, grey sad face over "Your cart is currently empty!" */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	width: 2.5em;
	height: 2.5em;
	margin-bottom: 1em;
	background-color: var(--cc-grey-600);
	-webkit-mask-size: 2.5em;
	mask-size: 2.5em;
}