/**
 * Trade account registration and locked details.
 * Palette matches the rest of the site: red #CD4547, ink #14110F, beige #F4EFE3.
 */

.alcli-ac__intro {
	margin: 0 0 18px;
	padding: 14px 16px;
	background: #f4efe3;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: #57514a;
}

.alcli-ac__fields {
	margin-top: 4px;
}

.alcli-ac__notice {
	margin: 0 0 22px;
	padding: 15px 18px;
	border-radius: 12px;
	border-inline-start: 3px solid #cd4547;
	background: #f4efe3;
	font-size: 14px;
	line-height: 1.55;
	color: #14110f;
}

.alcli-ac__notice strong {
	display: block;
	margin-bottom: 3px;
	font-size: 15px;
}

.alcli-ac__notice--pending {
	border-inline-start-color: #c99700;
}

.alcli-ac__notice--rejected {
	border-inline-start-color: #9b1c1c;
}

/* A locked field is not disabled-looking, it is settled-looking: still legible,
   clearly not an input waiting to be filled in. */
.woocommerce form .form-row.alcli-ac-locked input.input-text,
.woocommerce form .form-row.alcli-ac-locked select,
.woocommerce-page form .form-row.alcli-ac-locked input.input-text,
.woocommerce-page form .form-row.alcli-ac-locked select {
	background: #f7f5f0 !important;
	border-color: rgba(20, 17, 15, 0.1) !important;
	color: #57514a !important;
	cursor: default;
	box-shadow: none !important;
}

.woocommerce form .form-row.alcli-ac-locked label {
	color: #9a938a;
}

/* A small padlock on the label, so the reason is obvious without reading the
   note under the form. */
.woocommerce form .form-row.alcli-ac-locked label::after {
	content: "\1F512";
	margin-inline-start: 6px;
	font-size: 11px;
	opacity: 0.55;
}

.woocommerce form .form-row.alcli-ac-locked .description {
	margin-top: 6px;
	font-size: 12.5px;
	color: #9a938a;
}

/* ===================================================== checkout summary */

/* WooCommerce still prints its "Billing details" heading above the billing
   form even when every field has been removed from it. The panel below carries
   its own heading, so the theme one is redundant. */
.alcli-co-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-billing-fields > h3 {
	display: none;
}

.alcli-co {
	--co-red: #cd4547;
	--co-ink: #14110f;
	--co-soft: #57514a;
	--co-mute: #9a938a;
	--co-beige: #f4efe3;
	--co-line: rgba(20, 17, 15, 0.11);
	position: relative;
	overflow: hidden;
	margin: 0 0 28px;
	background: #fff;
	border: 1px solid var(--co-line);
	border-radius: 16px;
	box-shadow: 0 18px 40px -30px rgba(20, 17, 15, 0.55);
	animation: alcli-co-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.alcli-co *,
.alcli-co *::before,
.alcli-co *::after {
	box-sizing: border-box;
}

/* A green edge, not the site red: this is a reassurance, not a warning. */
.alcli-co::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 4px;
	background: linear-gradient(180deg, #2f8b45, #1c6b23);
}

.alcli-co__head {
	padding: 22px 26px 4px;
}

.alcli-co__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 12px;
	padding: 5px 12px 5px 9px;
	border-radius: 999px;
	background: #e3f3e3;
	color: #1c6b23;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.9px;
}

.alcli-co__badge svg {
	width: 13px;
	height: 13px;
	fill: currentColor;
}

.alcli-co__title {
	margin: 0 0 4px !important;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.3px;
	color: var(--co-ink);
}

.alcli-co__sub {
	margin: 0 !important;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--co-soft);
}

.alcli-co__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px;
	margin: 18px 0 0 !important;
	padding: 0 !important;
}

.alcli-co__row {
	display: grid;
	grid-template-columns: 34px auto;
	grid-template-rows: auto auto;
	column-gap: 12px;
	row-gap: 2px;
	align-items: start;
	padding: 14px 26px 14px 22px;
	border-top: 1px solid rgba(20, 17, 15, 0.06);
	opacity: 0;
	animation: alcli-co-row 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: calc(min(var(--alcli-co-i, 0), 6) * 60ms + 120ms);
}

/* The address is the longest value, so it takes the full width rather than
   wrapping into a narrow column beside the phone. */
.alcli-co__row--address {
	grid-column: 1 / -1;
}

.alcli-co__icon {
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--co-beige);
}

.alcli-co__icon svg {
	width: 17px;
	height: 17px;
	fill: var(--co-red);
}

.alcli-co__label {
	grid-column: 2;
	margin: 0 !important;
	font-size: 10.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--co-mute);
}

.alcli-co__value {
	grid-column: 2;
	margin: 0 !important;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--co-ink);
	word-break: break-word;
}

.alcli-co__foot {
	margin: 0 !important;
	padding: 14px 26px 18px 22px;
	border-top: 1px solid rgba(20, 17, 15, 0.06);
	background: #fcfbf8;
	font-size: 12.5px;
	color: var(--co-mute);
}

.alcli-co__foot a {
	color: var(--co-red);
	font-weight: 600;
	text-decoration: none;
}

.alcli-co__foot a:hover {
	text-decoration: underline;
}

@keyframes alcli-co-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

@keyframes alcli-co-row {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
	.alcli-co__grid {
		grid-template-columns: 1fr;
	}

	.alcli-co__row {
		grid-column: 1 / -1;
		padding: 13px 18px 13px 16px;
	}

	.alcli-co__head {
		padding: 18px 18px 2px;
	}

	.alcli-co__foot {
		padding: 13px 18px 16px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.alcli-co,
	.alcli-co__row {
		opacity: 1;
		animation: none !important;
		transform: none !important;
	}
}

/* ================================================== checkout page layout */

/* The classic checkout is a form with two blocks stacked in source order:
   #customer_details then #order_review. Gridding the form itself turns that
   into details on the left and a sticky summary on the right, without touching
   a template or reordering anything in the DOM. */

.woocommerce-checkout .woocommerce {
	max-width: 1180px;
	margin-inline: auto;
}

.woocommerce-checkout form.checkout.woocommerce-checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 372px;
	grid-template-rows: auto auto;
	column-gap: 34px;
	row-gap: 0;
	align-items: start;
}

.woocommerce-checkout form.checkout #customer_details {
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 100%;
	float: none;
}

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

.woocommerce-checkout form.checkout #order_review_heading {
	grid-column: 2;
	grid-row: 1;
	margin: 0 0 12px !important;
	font-size: 15px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.1px;
	color: #57514a;
}

.woocommerce-checkout form.checkout #order_review {
	grid-column: 2;
	grid-row: 2;
	position: sticky;
	top: 24px;
	background: #fff;
	border: 1px solid rgba(20, 17, 15, 0.11);
	border-radius: 16px;
	box-shadow: 0 18px 40px -30px rgba(20, 17, 15, 0.55);
	overflow: hidden;
}

/* ------------------------------------------------------------ the coupon */

.woocommerce-checkout .woocommerce-form-coupon-toggle {
	margin-bottom: 22px;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	margin: 0;
	padding: 13px 18px;
	background: #f4efe3;
	border: 0;
	border-radius: 12px;
	color: #57514a;
	font-size: 13.5px;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
	display: none;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle a {
	color: #cd4547;
	font-weight: 700;
	text-decoration: none;
}

/* ------------------------------------------------------ the review table */

.woocommerce-checkout #order_review table.shop_table {
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-size: 14px;
}

.woocommerce-checkout #order_review table.shop_table thead {
	display: none;
}

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
	border: 0 !important;
	padding: 13px 18px !important;
}

.woocommerce-checkout #order_review table.shop_table tbody tr {
	border-bottom: 1px solid rgba(20, 17, 15, 0.07);
}

.woocommerce-checkout #order_review table.shop_table tfoot tr th,
.woocommerce-checkout #order_review table.shop_table tfoot tr td {
	border-top: 1px solid rgba(20, 17, 15, 0.07) !important;
	font-size: 13.5px;
	color: #57514a;
}

.woocommerce-checkout #order_review table.shop_table tfoot tr th {
	font-weight: 600;
	text-align: start;
}

.woocommerce-checkout #order_review table.shop_table tfoot tr td {
	text-align: end;
	font-weight: 700;
	color: #14110f;
}

/* The total gets weight, everything above it does not. */
.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total th {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #9a938a;
}

.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td,
.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total .woocommerce-Price-amount {
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.4px;
	color: #14110f;
}

/* ------------------------------------------------------------ line items */

.alcli-cor__line {
	display: grid;
	grid-template-columns: 52px auto;
	column-gap: 12px;
	align-items: center;
}

.alcli-cor__thumb {
	width: 52px;
	height: 52px;
	border-radius: 9px;
	overflow: hidden;
	background: #f4efe3;
}

.alcli-cor__thumb img,
img.alcli-cor__img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	display: block;
	margin: 0 !important;
	border-radius: 0 !important;
}

.alcli-cor__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.alcli-cor__name {
	font-size: 13.5px;
	font-weight: 650;
	line-height: 1.35;
	color: #14110f;
}

.alcli-cor__sku {
	font-size: 11.5px;
	color: #9a938a;
}

.woocommerce-checkout #order_review .product-quantity {
	display: inline-block;
	margin-top: 3px;
	font-size: 11.5px;
	font-weight: 700;
	color: #cd4547;
}

.woocommerce-checkout #order_review td.product-total {
	white-space: nowrap;
	font-weight: 700;
	color: #14110f;
	text-align: end;
	vertical-align: middle;
}

/* ------------------------------------------------------------ the button */

.woocommerce-checkout #order_review #payment {
	background: #fcfbf8 !important;
	border-radius: 0 !important;
	padding: 4px 18px 18px !important;
}

.woocommerce-checkout #order_review #payment .place-order {
	padding: 0 !important;
	margin: 0 !important;
}

.woocommerce-checkout #order_review #payment .woocommerce-privacy-policy-text {
	margin: 0 0 14px;
	font-size: 11.5px;
	line-height: 1.5;
	color: #9a938a;
}

.woocommerce-checkout #order_review #payment .woocommerce-privacy-policy-text a {
	color: #57514a;
}

.woocommerce-checkout #order_review #payment button#place_order {
	display: block;
	width: 100%;
	min-height: 54px;
	margin: 0 !important;
	padding: 16px 22px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: #cd4547 !important;
	color: #fff !important;
	font-size: 13.5px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 1.2px !important;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce-checkout #order_review #payment button#place_order:hover {
	background: #b23a3c !important;
	transform: translateY(-1px);
	box-shadow: 0 14px 26px -14px rgba(205, 69, 71, 0.75);
}

.woocommerce-checkout #order_review #payment button#place_order:active {
	transform: none;
}

/* --------------------------------------------------------- order notes */

.woocommerce-checkout .woocommerce-additional-fields {
	margin-top: 6px;
	padding: 18px 20px;
	background: #fcfbf8;
	border: 1px solid rgba(20, 17, 15, 0.09);
	border-radius: 14px;
}

.woocommerce-checkout .woocommerce-additional-fields h3 {
	margin: 0 0 4px !important;
	font-size: 14.5px;
	font-weight: 700;
	color: #14110f;
}

.woocommerce-checkout .woocommerce-additional-fields textarea {
	min-height: 84px;
	border-radius: 10px;
	border: 1px solid rgba(20, 17, 15, 0.13);
	font-size: 14px;
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 900px) {
	.woocommerce-checkout form.checkout.woocommerce-checkout {
		grid-template-columns: 1fr;
	}

	.woocommerce-checkout form.checkout #customer_details,
	.woocommerce-checkout form.checkout #order_review_heading,
	.woocommerce-checkout form.checkout #order_review {
		grid-column: 1;
		grid-row: auto;
		position: static;
	}

	.woocommerce-checkout form.checkout #order_review_heading {
		margin-top: 26px !important;
	}
}