.woocommerce .me-checkout
{
	display: grid;
	grid-template-columns: 1fr 40%;
	font-weight: normal;
	box-sizing: border-box;

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

	@media ( max-width: 1020px )
	{
		grid-template-columns: 1fr;
		justify-items: center;
	}

	h3
	{
		text-wrap: balance;

		@media ( max-width: 400px )
		{
			font-size: 20px;
		}
	}

	.woocommerce-error
	{
		margin: 20px 38px 0;
		padding: 10px;
		border-radius: 8px;
		outline: none;

		@media ( max-width: 500px )
		{
			margin: 10px 15px 0;
			padding: 5px;
		}

		a
		{
			color: inherit;
			pointer-events: none;
		}

		strong
		{
			font-weight: inherit;
			color: inherit;
		}
	}

	wc-order-attribution-inputs
	{
		display: none;
	}

	.hidden
	{
		display: none !important;
	}

	.column-left,
	.column-right
	{
		display: grid;
		align-content: start;
		gap: 14px;
		padding: 38px;

		@media ( max-width: 1020px )
		{
			max-width: 600px;
			width: 100%;
		}

		@media ( max-width: 500px )
		{
			padding: 15px;
		}
	}

	.column-left
	{
		grid-column: 1;
		padding-top: 28px;

		@media ( max-width: 500px )
		{
			padding-top: 10px;
		}
	}

	.column-right
	{
		position: relative;
		background-color: #f5f5f5;
		border-left: 1px solid #dedede;
		isolation: isolate;
		grid-row: 1 / span 10;
		grid-column: 2;

		@media ( max-width: 1020px )
		{
			border-left: none;
			grid-row: 5;
			grid-column: 1;
		}

		&::after
		{
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			z-index: -1;
			left: 100%;
			width: 1000%;
			background-color: #f5f5f5;

			@media ( max-width: 1020px )
			{
				left: 50%;
				right: 50%;
				width: 100svw;
				margin-left: -50svw;
				border-top: 1px solid #dedede;
			}
		}

		.woocommerce-checkout-review-order-table
		{
			position: sticky;
			top: 100px;
		}
	}

	.fields-grid
	{
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: 14px;
		padding: 5px;
		margin: -5px;

		@media ( max-width: 500px )
		{
			gap: 8px;
		}
	}

	.form-row
	{
		position: relative;
		margin: 0;
		grid-column: 1 / -1;
		display: grid;
		align-content: start;
		gap: 5px;

		&.in-row-2
		{
			grid-column: span 3;
		}

		&.in-row-3
		{
			grid-column: span 2;

			@media ( max-width: 400px )
			{
				grid-column: 1 / -1;
			}
		}

		label:first-child:not([data-hack])
		{
			position: absolute;
			left: 11px;
			top: 18px;
			margin: 0;
			text-transform: none;
			font-family: 'Roboto';
			font-size: 14px;
			color: #707070;
			letter-spacing: normal;
			font-weight: normal;
			line-height: 1;
			transform-origin: left top;
			transition: transform 0.2s ease-in-out;
			pointer-events: none;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 80%;
		}

		&:focus-within,
		&:has(
			input:focus,
			select:focus,
			textarea:focus
		),
		&:has(
			input:not(:placeholder-shown),
			select:not([multiple]):not([size]):valid,
			textarea:not(:placeholder-shown)
		)
		{
			--inner-padding-shift: 6px;

			label:first-child:not([data-hack])
			{
				transform: translateY(-10px) scale(0.85);
			}
		}

		&:has([type="checkbox"],[type="radio"])
		{
			display: flex;
			align-items: center;
			user-select: none;

			label
			{
				cursor: pointer;
			}
		}
	}

	.checkout-inline-error-message
	{
		color: #d91c1c;
		font-size: 12px;
		margin: 0;
		font-weight: normal;
	}

	input.input-text,
	select:not([multiple]):not([size]),
	textarea
	{
		--input-border-color: #dedede;
		--input-outline-color: transparent;
		--input-box-shadow: 0 0 0 1px var(--input-outline-color);
		--input-border: 1px solid var(--input-border-color);
		border: var(--input-border) !important;
		box-shadow: var(--input-box-shadow) !important;
		border-radius: 8px;
		padding: calc(14px + var(--inner-padding-shift, 0px)) 11px calc(14px - var(--inner-padding-shift, 0px));
		transition-property: box-shadow, border-color;
		transition-duration: 0.2s;
		transition-timing-function: ease-in-out;
		display: block;
		height: auto;
		font-size: 14px;
		line-height: 1;
		font-weight: normal;

		&:is(input, select)
		{
			height: 48px;
		}

		&:focus
		{
			--input-border-color: #005bd1;
			--input-outline-color: #005bd1;
			border-color: var(--input-border-color) !important;
			color: inherit;
		}

		.woocommerce-invalid &
		{
			--input-border-color: #d91c1c;
			--input-outline-color: #d91c1c;
			border-color: var(--input-border-color) !important;
			color: inherit;
		}
	}

	input:is([type='checkbox'],[type='radio'])
	{
		position: relative;
		--input-border-color: #dedede;
		appearance: none;
		height: 18px !important;
		width: 18px !important;
		aspect-ratio: 1;
		padding: 0;
		margin: 0 !important;
		border: none;
		box-shadow: inset 0 0 0 1px var(--input-border-color);
		background: #fff;
		flex-shrink: 0;
		transition: box-shadow 0.2s ease-in-out;
		border: none;
		outline: none;

		&:is([type='checkbox'])
		{
			border-radius: 4px;

			&::after
			{
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				width: 10px;
				height: 10px;
				transform: translate(-50%, -50%);
				background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxNCAxNCI+PHBhdGggc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIGQ9Im0xLjUgNy4xIDMuNiAzLjYuMi4yYS4zLjMgMCAwIDAgLjIgMGwuMi0uMkwxMi41IDMiLz48L3N2Zz4=") no-repeat center / contain;
			}
		}

		&:is([type='radio'])
		{
			border-radius: 100px;

			&::after
			{
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				width: 8px;
				height: 8px;
				transform: translate(-50%, -50%);
				background-color: #fff;
				border-radius: inherit;
			}
		}

		&:focus
		{
			--input-border-color: #005bd1;
		}

		&:is(:checked, :checked:focus)
		{
			--input-border-color: #005bd1;
			box-shadow: inset 0 0 0 .7rem var(--input-border-color);
			background: #fff;
		}

		label:has(&)
		{
			display: flex;
			align-items: center;
			gap: 6px;
			font-weight: normal;
			cursor: pointer;
			user-select: none;
			font-size: 14px;
			line-height: 1.1;
		}
	}

	.woocommerce-shipping-fields
	{
		display: grid;
		gap: 14px;
		background-color: #f5f5f5;
		padding: 14px;
		border: 1px solid #dedede;
		border-radius: 7px;
	}

	.checkout-products-table
	{
		border: none;

		td
		{
			padding-block: 7px;
			border: none;

			@media ( max-width: 400px )
			{
				padding-block: 4px;
			}
		}

		.product-pic
		{
			.thumb-wrap
			{
				position: relative;
				width: 64px;
				height: 64px;
				aspect-ratio: 1;

				@media ( max-width: 400px )
				{
					width: 50px;
					height: 50px;
				}
			}

			img
			{
				width: 100%;
				height: 100%;
				object-fit: cover;
				border-radius: 8px;
			}

			.qty
			{
				position: absolute;
				top: -7px;
				right: -7px;
				display: flex;
				place-items: center;
				place-content: center;
				font-size: 12px;
				font-weight: 600;
				background-color: #666;
				color: #fff;
				border-radius: 100px;
				min-width: 22px;
				height: 22px;
				padding: 0 3px;
				line-height: 1;
				user-select: none;

				@media ( max-width: 400px )
				{
					font-size: 10px;
					min-width: 18px;
					height: 18px;
					top: -5px;
					right: -5px;
				}
			}
		}

		.product-data
		{
			width: 100%;
			padding-inline: 14px !important;

			@media ( max-width: 400px )
			{
				padding-inline: 8px !important;
			}

			.data-wrap
			{
				display: grid;
			}

			.product-name
			{
				font-size: 14px;
				line-height: 1.3;
			}

			.product-meta
			{
				font-size: 12px;
				color: #666;

				.meta-prop
				{
					display: flex;
					align-items: center;
					gap: 4px;
				}
			}
		}

		.product-total
		{
			min-width: 70px;
			font-size: 14px;
			line-height: 1.5;
			text-align: right;
			color: #000;

			.subscription-price
			{
				display: grid;
			}

			.subscription-details
			{
				font-size: 10px;
				line-height: 1;
				color: #737373;
			}
		}
	}

	.checkout-order-table
	{
		border: none;
		table-layout: fixed;
		line-height: 1.2;

		strong
		{
			color: inherit;
		}

		th,
		td
		{
			border: none;
			padding: 7px 0;
			font-size: 14px;
			vertical-align: top;
		}

		th
		{
			width: 150px;
			font-weight: normal;

			&[colspan="2"]
			{
				font-size: 1.25em;
			}
		}

		td
		{
			text-align: right;
			width: 100%;
			font-weight: 300;

			@media ( max-width: 1020px )
			{
				padding-left: 0 !important;
			}

			p
			{
				margin: 0;
			}

			li
			{
				display: revert;
				text-align: right;
			}
		}
	}

	.woocommerce-checkout-payment
	{
		display: grid;
		gap: 10px;

		.wc_payment_method
		{
			display: grid;
			gap: 10px;

			#wc-authorize-net-cim-credit-card-context_field
			{
				display: none;
			}

			.method-wrapper
			{
				display: grid;
				gap: 10px;

				> p
				{
					margin: 0;
					font-size: 12px;
				}
			}
		}

		.payment-method-label
		{
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 6px;
			font-weight: normal;
			pointer-events: none;
			user-select: none;

			> h3
			{
				margin: 0;
			}

			> div
			{
				display: flex;
				align-items: center;
				gap: 4px;

				> :is(img)
				{
					width: 25px;
					height: 100%;
					object-fit: contain;
				}
			}
		}

		.old-new-card-wrapper
		{
			input[type="radio"] + label
			{
				padding-left: 10px;
				cursor: pointer;
				vertical-align: top;
				user-select: none;

				span
				{
					display: inline-flex;
					align-items: center;
					gap: 5px;
				}
			}
		}

		.form-row.place-order
		{
			> div
			{
				order: 2;
			}
		}
	}

	.color-meta-circle
	{
		flex-shrink: 0;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;

		&[data-color-name='A511']
		{
			background-image: url( '../color-previews/A511.jpeg' );
		}

		&[data-color-name='A512']
		{
			background-image: url( '../color-previews/A512.jpeg' );
		}

		&[data-color-name='A513']
		{
			background-image: url( '../color-previews/A513.jpeg' );
		}

		&[data-color-name='A514']
		{
			background-image: url( '../color-previews/A514.jpeg' );
		}

		&[data-color-name='N501']
		{
			background-image: url( '../color-previews/N501.jpeg' );
		}

		&[data-color-name='N502']
		{
			background-image: url( '../color-previews/N502.jpeg' );
		}

		&[data-color-name='N503']
		{
			background-image: url( '../color-previews/N503.jpeg' );
		}

		&[data-color-name='N504']
		{
			background-image: url( '../color-previews/N504.jpeg' );
		}

		&[data-color-name='N505']
		{
			background-image: url( '../color-previews/N505.jpeg' );
		}
	}

	.blockUI.blockOverlay
	{
		background-color: transparent !important;
		inset: -10px !important;
		backdrop-filter: blur(4px);
		opacity: 1 !important;
		width: auto !important;
		height: auto !important;
	}

	.coupon-box
	{
		display: grid;
		background-color: #fff5e0;
		padding: 14px;
		border: 1px solid #fadb8c;
		border-radius: 7px;

		.coupon-box-toggle
		{
			cursor: pointer;
			text-decoration: underline;
			text-decoration-thickness: 1px;
			text-decoration-style: dashed;
			text-underline-offset: 3px;
			text-align: center;
			user-select: none;

			@media ( max-width: 500px )
			{
				font-size: 14px;
			}

			&:hover
			{
				text-decoration: none;
			}
		}

		.woocommerce-form-coupon
		{
			padding-top: 15px;

			@media ( max-width: 500px )
			{
				padding-top: 8px;
			}
		}

		.coupon-box-form
		{
			display: flex;
			gap: 10px;

			@media ( max-width: 500px )
			{
				flex-direction: column;
				align-items: center;
				gap: 4px;
			}

			.form-row
			{
				flex: 1;

				@media ( max-width: 500px )
				{
					min-width: 240px;
				}
			}

			.button
			{
				width: 200px;
				flex-shrink: 0;
			}
		}

		.coupon-box-messages
		{
			text-align: center;
			padding-top: 10px;
			overflow: hidden;
			font-size: 12px;
			line-height: 1.2;
		}
	}
}

.woocommerce .empty-cart
{
	text-align: center;
	padding: 40px 0;
	display: grid;
	align-content: center;
	gap: 10px;
	min-height: 40svh;

	*
	{
		margin: 0;
	}
}

.woocommerce-shipping-methods
{
	li
	{
		cursor: pointer;
		user-select: none;

		&:not(:first-child)
		{
			margin-top: 8px;
		}

		:is(input[type=radio] + label)
		{
			display: inline-flex;
			margin-left: 5px;
		}
	}
}