/*
 * Cart, checkout, order received and account pages (spec sections 4 and 6).
 * Layered on WooCommerce's own CSS, which keeps the layout (including the
 * phone layout of the cart table); this sets the Hang Tag look. Selectors
 * match WooCommerce's specificity on purpose.
 */

/* ---------- Fields ---------- */

.woocommerce form .form-row {
	margin: 0 0 var(--space-4);
	padding: 0;
}

.woocommerce form .form-row label {
	margin-bottom: var(--space-1);
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: 1.4;
	color: var(--ink-2);
}

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

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce .quantity .qty,
.woocommerce-cart table.cart td.actions .coupon .input-text {
	min-height: 48px;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius-input);
	background: var(--tag);
	color: var(--ink);
	font: inherit;
	line-height: 1.4;
	box-shadow: none;
}

.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce .quantity .qty:focus {
	border-color: var(--cobalt);
	outline: none;
	box-shadow: 0 0 0 2px rgba(36, 65, 201, 0.25);
}

/* Country and state pickers (selectWoo). */
.select2-container--default .select2-selection--single {
	height: 48px;
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius-input);
	background: var(--tag);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	padding-left: var(--space-4);
	line-height: 46px;
	color: var(--ink);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px;
	right: var(--space-2);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--cobalt);
	box-shadow: 0 0 0 2px rgba(36, 65, 201, 0.25);
}

.select2-dropdown {
	border-color: var(--rule-strong);
	border-radius: var(--radius-input);
	background: var(--tag);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--ink);
	color: var(--paper);
}

/* Errors: border plus WooCommerce's message under the field. */
.woocommerce form .form-row.woocommerce-invalid label {
	color: var(--error);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid textarea,
.woocommerce form .form-row.woocommerce-invalid .select2-container .select2-selection {
	border-color: var(--error);
}

/* WooCommerce marks valid fields green; green isn't in the palette. */
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select,
.woocommerce form .form-row.woocommerce-validated textarea,
.woocommerce form .form-row.woocommerce-validated .select2-container:not(.select2-container--open) .select2-selection {
	border-color: var(--rule-strong);
}

.woocommerce form .form-row .checkout-inline-error-message {
	margin: var(--space-1) 0 0;
	font-size: var(--fs-small);
	color: var(--error);
}

/* ---------- Buttons ---------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--space-5);
	border: 1px solid var(--ink);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--ease), color var(--ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--tag);
	color: var(--ink);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--paper);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--ink-2);
	color: var(--paper);
}

.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce button.button.disabled {
	border-color: transparent;
	background: var(--linen-2);
	color: var(--muted);
	opacity: 1;
}

/* Pay: cobalt, the only cobalt button in the store. */
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
	float: none;
	width: 100%;
	min-height: 56px;
	margin-top: var(--space-4);
	border: 0;
	background: var(--cobalt);
	color: #fff;
	font-size: var(--fs-body);
}

.woocommerce #payment #place_order:hover {
	background: var(--cobalt-hover);
	color: #fff;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button {
	min-height: 56px;
	margin-bottom: var(--space-3);
	font-size: var(--fs-body);
}

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

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	display: block; /* One message per line here, not the shop pages' row layout. */
	margin: 0 0 var(--space-5);
	padding: var(--space-4) var(--space-4) var(--space-4) var(--space-7);
	border: var(--line);
	border-radius: var(--radius-input);
	background: var(--tag);
	color: var(--ink);
}

.woocommerce-message::before,
.woocommerce-info::before {
	top: var(--space-4);
	left: var(--space-4);
	color: var(--ink);
}

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

.woocommerce-error::before {
	top: var(--space-4);
	left: var(--space-4);
	color: var(--error);
}

.woocommerce-message .button,
.woocommerce-info .button {
	float: right;
}

/* ---------- Tables as hang tags ---------- */

.woocommerce table.shop_table {
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
	background: transparent;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: var(--space-3) 0;
	border-top: var(--line-dashed);
	color: var(--ink-2);
}

.woocommerce table.shop_table thead th {
	border-top: 0;
	font-size: var(--fs-tag-label);
	font-weight: 600;
	letter-spacing: var(--tracking-tag);
	text-transform: uppercase;
	color: var(--muted);
}

.woocommerce table.shop_table td + td,
.woocommerce table.shop_table th + td,
.woocommerce table.shop_table th + th {
	padding-left: var(--space-3);
}

.woocommerce table.shop_table .order-total th,
.woocommerce table.shop_table .order-total td {
	padding-top: var(--space-4);
	border-top: var(--line-ink);
	font-weight: 400;
	color: var(--ink);
}

.woocommerce table.shop_table .order-total th {
	font-size: var(--fs-tag-label);
	font-weight: 600;
	letter-spacing: var(--tracking-tag);
	text-transform: uppercase;
	vertical-align: middle;
}

.woocommerce table.shop_table .order-total td strong,
.woocommerce table.shop_table .order-total td .amount {
	font-family: var(--font-serif);
	font-size: var(--fs-h3);
	font-weight: 400;
}

.woocommerce ul#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul#shipping_method li {
	margin: 0;
	padding: 0;
	text-indent: 0;
}

.woocommerce-shipping-destination,
.woocommerce-shipping-calculator .shipping-calculator-button {
	font-size: var(--fs-small);
	color: var(--muted);
}

/* ---------- Cart ---------- */

.woocommerce-cart table.cart img {
	width: 64px;
	height: 80px;
	object-fit: cover;
	border-radius: var(--radius-photo);
	background: var(--linen);
}

.woocommerce-cart table.cart td.product-name a {
	color: var(--ink);
	font-weight: 500;
	text-decoration: none;
}

.woocommerce-cart table.cart td.product-name a:hover {
	text-decoration: underline;
}

.woocommerce a.remove {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--rule-strong);
	border-radius: 50%;
	color: var(--ink) !important; /* WooCommerce sets this with !important. */
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
}

.woocommerce a.remove:hover {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--paper) !important;
}

.woocommerce-cart table.cart td.actions {
	padding-top: var(--space-4);
}

.woocommerce-cart table.cart td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
	width: 200px;
	margin: 0;
}

/* Phone cart (WooCommerce stacks each row as label: value lines). */
@media (max-width: 768px) {
	.woocommerce table.shop_table_responsive tr:nth-child(2n) td,
	.woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
		background: transparent;
	}

	/* Label left, quantity control right, whatever the control is. */
	.woocommerce-cart table.cart td.product-quantity {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
	}

	.woocommerce-cart table.cart td.product-quantity::before {
		float: none;
	}

	.woocommerce-cart table.cart td.actions .coupon .input-text {
		flex: 1;
		width: auto;
	}
}

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout-review-order {
	position: relative;
	padding: var(--space-6) var(--space-5) var(--space-5);
	border: var(--line);
	border-radius: var(--radius-photo);
	background: var(--tag);
}

/* The punch hole, like the product page's hang tag. */
.woocommerce-cart .cart-collaterals .cart_totals::before,
.woocommerce-checkout-review-order::before {
	content: "";
	position: absolute;
	top: var(--space-3);
	left: 50%;
	width: 14px;
	height: 14px;
	border: 1px solid var(--rule-strong);
	border-radius: 50%;
	background: var(--paper);
	transform: translateX(-50%);
}

.woocommerce-cart .cart-collaterals .cart_totals h2 {
	margin: 0 0 var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--fs-tag-label);
	font-weight: 600;
	letter-spacing: var(--tracking-tag);
	text-transform: uppercase;
	color: var(--muted);
}

/* ---------- Checkout ---------- */

/* Desktop: details on the left, the order tag on the right. Anything else
   WooCommerce or a plugin puts in the form (notices, express buttons) spans
   both columns. */
@media (min-width: 900px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
		column-gap: var(--space-7);
		align-items: start;
	}

	.woocommerce-checkout form.checkout > * {
		grid-column: 1 / -1;
	}

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

	/* The order tag sits beside the details and stays in view while the
	   form scrolls. Its heading stays for screen readers only; a visible
	   heading would take its own grid row and push the tag down. */
	.woocommerce-checkout form.checkout > #order_review_heading {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.woocommerce-checkout form.checkout > #order_review {
		position: sticky;
		top: var(--space-5);
		grid-column: 2;
	}

	.woocommerce-checkout form.checkout > .blockUI {
		grid-column: auto;
	}
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	float: none;
	width: 100%;
}

.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading {
	margin: var(--space-5) 0 var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--fs-tag-label);
	font-weight: 600;
	letter-spacing: var(--tracking-tag);
	text-transform: uppercase;
	color: var(--muted);
}

.woocommerce-checkout #customer_details .col-1 > :first-child h3 {
	margin-top: 0;
}

.woocommerce-checkout #order_review_heading {
	margin-top: 0;
}

.woocommerce-checkout .woocommerce-review-order-table .product-quantity {
	font-weight: 500;
	color: var(--muted);
}

/* Payment */
.woocommerce-checkout #payment {
	border-radius: 0;
	background: transparent;
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: var(--space-4) 0;
	border-bottom: var(--line-dashed);
}

.woocommerce-checkout #payment ul.payment_methods li {
	margin-bottom: var(--space-2);
	line-height: 1.5;
}

.woocommerce-checkout #payment ul.payment_methods li label {
	font-weight: 500;
	color: var(--ink);
}

.woocommerce-checkout #payment div.payment_box {
	margin: var(--space-2) 0 var(--space-3);
	border-radius: var(--radius-input);
	background: var(--sand);
	color: var(--ink-2);
	font-size: var(--fs-small);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--sand);
}

.woocommerce-checkout #payment div.form-row {
	padding: var(--space-4) 0 0;
}

.woocommerce-terms-and-conditions-wrapper,
.woocommerce-privacy-policy-text {
	font-size: var(--fs-small);
	color: var(--muted);
}

/* "Or pay with card" line between Stripe's wallet buttons and the form. */
#wc-stripe-express-checkout-button-separator,
#wc-stripe-payment-request-button-separator,
#wcpay-express-checkout-button-separator {
	margin: var(--space-3) 0 var(--space-5) !important;
	font-size: var(--fs-tag-label);
	letter-spacing: var(--tracking-tag);
	text-transform: uppercase;
	color: var(--muted);
	text-align: center;
}

.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info {
	font-size: var(--fs-small);
}

/* ---------- Order received ---------- */

.woocommerce-order .woocommerce-thankyou-order-received,
.woocommerce-order .woocommerce-notice--success {
	font-family: var(--font-serif);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	color: var(--ink);
}

.woocommerce ul.order_details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--space-3);
	margin: var(--space-5) 0;
	padding: 0;
}

.woocommerce ul.order_details li {
	float: none;
	margin: 0;
	padding: var(--space-3) 0 0;
	border-top: var(--line-ink);
	border-right: 0;
	font-size: var(--fs-tag-label);
	letter-spacing: var(--tracking-tag);
	text-transform: uppercase;
	color: var(--muted);
}

.woocommerce ul.order_details li strong {
	margin-top: var(--space-1);
	font-size: var(--fs-body);
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
}

.woocommerce-order h2,
.woocommerce-customer-details h2,
.woocommerce-order-details__title {
	font-size: var(--fs-h3);
}

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

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0 0 var(--space-5);
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: var(--space-2) 0;
	border-bottom: var(--line);
	color: var(--ink);
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	font-weight: 600;
}