/* Northleaf WooCommerce pages
--------------------------------------------- */

/* Shared widths */

.wc-block-cart,
.wc-block-checkout,
.woocommerce-account .woocommerce {
	width: 100%;
	max-width: 100%;
}

/* Cart and checkout layout
--------------------------------------------- */

.wc-block-cart .wc-block-components-sidebar-layout,
.wc-block-checkout .wc-block-components-sidebar-layout {
	gap: clamp(1.5rem, 4vw, 3rem);
}

.wc-block-cart .wc-block-components-main,
.wc-block-cart .wc-block-components-sidebar,
.wc-block-checkout .wc-block-components-main,
.wc-block-checkout .wc-block-components-sidebar {
	min-width: 0;
}

.wc-block-cart .wc-block-components-sidebar,
.wc-block-checkout .wc-block-components-sidebar {
	padding: 1.5rem;
	border: 1px solid #d6d6d6;
	background: #f4f4f4;
}

.wc-block-cart .wc-block-components-totals-wrapper,
.wc-block-checkout .wc-block-components-totals-wrapper {
	border-top: 1px solid #d6d6d6;
}

/* Product names */

.wc-block-cart .wc-block-components-product-name,
.wc-block-checkout .wc-block-components-product-name,
.wc-block-cart-item__product .wc-block-components-product-name {
	color: #0b0b0b;
	font-weight: 700;
	text-decoration: none;
}

.wc-block-cart .wc-block-components-product-name:hover,
.wc-block-checkout .wc-block-components-product-name:hover,
.wc-block-cart-item__product .wc-block-components-product-name:hover {
	color: #2f6bff;
}

/* WooCommerce buttons */

.wc-block-cart .wc-block-components-button,
.wc-block-checkout .wc-block-components-button,
.wc-block-checkout .wc-block-components-checkout-place-order-button,
.wc-block-cart .wc-block-cart__submit-button {
	min-height: 50px;
	border: 1px solid #0b0b0b;
	border-radius: 0;
	background: #0b0b0b;
	color: #ffffff;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: none;
	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		color 160ms ease;
}

.wc-block-cart .wc-block-components-button:hover,
.wc-block-checkout .wc-block-components-button:hover,
.wc-block-checkout .wc-block-components-checkout-place-order-button:hover,
.wc-block-cart .wc-block-cart__submit-button:hover {
	border-color: #2f6bff;
	background: #2f6bff;
	color: #ffffff;
}

/* Form fields */

.wc-block-cart .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-combobox-control input,
.wc-block-checkout .wc-block-components-address-form input,
.wc-block-checkout .wc-block-components-address-form select,
.woocommerce-account form .form-row input.input-text,
.woocommerce-account form .form-row textarea,
.woocommerce-account form .form-row select {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid #d6d6d6;
	border-radius: 0;
	background: #ffffff;
	color: #0b0b0b;
}

.wc-block-cart .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-block-components-combobox-control input:focus,
.wc-block-checkout .wc-block-components-address-form input:focus,
.wc-block-checkout .wc-block-components-address-form select:focus,
.woocommerce-account form .form-row input.input-text:focus,
.woocommerce-account form .form-row textarea:focus,
.woocommerce-account form .form-row select:focus {
	border-color: #2f6bff;
	outline: none;
	box-shadow: 0 0 0 3px rgb(47 107 255 / 15%);
}

/* Order summary */

.wc-block-cart .wc-block-components-order-summary-item,
.wc-block-checkout .wc-block-components-order-summary-item {
	border-bottom: 1px solid #d6d6d6;
}

.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	background: #f4f4f4;
	object-fit: cover;
}

.wc-block-cart .wc-block-components-panel__button,
.wc-block-checkout .wc-block-components-panel__button,
.wc-block-cart .wc-block-components-totals-coupon-link,
.wc-block-checkout .wc-block-components-totals-coupon-link {
	color: #0b0b0b;
	font-weight: 700;
}

.wc-block-cart .wc-block-components-panel__button:hover,
.wc-block-checkout .wc-block-components-panel__button:hover,
.wc-block-cart .wc-block-components-totals-coupon-link:hover,
.wc-block-checkout .wc-block-components-totals-coupon-link:hover {
	color: #2f6bff;
}

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

/* Reset WooCommerce float-based account layout. */

.woocommerce-account .woocommerce {
	display: block;
	width: 100%;
	max-width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0;
	margin: 0 !important;
}

/*
 * Logged-in dashboard:
 * WooCommerce inserts an empty notices wrapper before the navigation.
 * Grid areas keep that wrapper on its own full-width row so it cannot
 * push the navigation and content into the wrong columns.
 */

.woocommerce-account.logged-in .woocommerce {
	display: grid !important;
	grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
	grid-template-areas:
		"notices notices"
		"navigation content";
	gap: 0 clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.woocommerce-account.logged-in
	.woocommerce
	> .woocommerce-notices-wrapper,
.woocommerce-account.logged-in
	.woocommerce
	> .woocommerce-message,
.woocommerce-account.logged-in
	.woocommerce
	> .woocommerce-info,
.woocommerce-account.logged-in
	.woocommerce
	> .woocommerce-error {
	grid-area: notices;
	width: 100%;
}

.woocommerce-account.logged-in
	.woocommerce
	> .woocommerce-MyAccount-navigation {
	grid-area: navigation;
}

.woocommerce-account.logged-in
	.woocommerce
	> .woocommerce-MyAccount-content {
	grid-area: content;
}

/* Account navigation */

.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	border: 1px solid #d6d6d6;
	list-style: none;
}

.woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid #d6d6d6;
}

.woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0;
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 1rem 1.25rem;
	color: #0b0b0b;
	font-weight: 700;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation .is-active a {
	background: #0b0b0b;
	color: #ffffff;
}

/* Account content */

.woocommerce-MyAccount-content {
	box-sizing: border-box;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border: 1px solid #d6d6d6;
	overflow-wrap: anywhere;
}

.woocommerce-MyAccount-content > :first-child {
	margin-top: 0;
}

.woocommerce-MyAccount-content > :last-child {
	margin-bottom: 0;
}

/* Login and registration screen */

.woocommerce-account:not(.logged-in) .u-columns.col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 4vw, 3rem);
	width: 100%;
}

.woocommerce-account:not(.logged-in) .col2-set .col-1,
.woocommerce-account:not(.logged-in) .col2-set .col-2 {
	float: none !important;
	width: 100% !important;
	min-width: 0;
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword {
	box-sizing: border-box;
	margin: 0;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border: 1px solid #d6d6d6;
	border-radius: 0;
	background: #ffffff;
}

.woocommerce-account .woocommerce-ResetPassword {
	max-width: 680px;
}

.woocommerce-account .woocommerce-form-row,
.woocommerce-account .form-row {
	width: 100%;
}

.woocommerce-account .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* Account tables */

.woocommerce-account table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #d6d6d6;
	border-radius: 0;
}

.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
	padding: 1rem;
	border-bottom: 1px solid #d6d6d6;
	text-align: left;
}

.woocommerce-account table.shop_table tr:last-child th,
.woocommerce-account table.shop_table tr:last-child td {
	border-bottom: 0;
}

/* Account buttons */

.woocommerce-account .button {
	min-height: 44px;
	padding: 0.75rem 1rem;
	border: 1px solid #0b0b0b;
	border-radius: 0;
	background: #0b0b0b;
	color: #ffffff;
	font-weight: 700;
	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		color 160ms ease;
}

.woocommerce-account .button:hover {
	border-color: #2f6bff;
	background: #2f6bff;
	color: #ffffff;
}

/* WooCommerce notices */

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid #d6d6d6;
	border-radius: 0;
	background: #f4f4f4;
	color: #0b0b0b;
}

/* Tablet
--------------------------------------------- */

@media (max-width: 780px) {
	.wc-block-cart .wc-block-components-sidebar-layout,
	.wc-block-checkout .wc-block-components-sidebar-layout {
		flex-direction: column;
	}

	.wc-block-cart .wc-block-components-sidebar,
	.wc-block-checkout .wc-block-components-sidebar {
		width: 100%;
	}

	.woocommerce-account.logged-in .woocommerce {
		grid-template-columns: 1fr;
		grid-template-areas:
			"notices"
			"navigation"
			"content";
		gap: 2rem 0;
	}

	.woocommerce-MyAccount-navigation ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.woocommerce-MyAccount-navigation li {
		border-right: 1px solid #d6d6d6;
	}

	.woocommerce-MyAccount-navigation a {
		height: 100%;
	}

	.woocommerce-account:not(.logged-in) .u-columns.col2-set {
		grid-template-columns: 1fr;
	}

	.woocommerce-account table.shop_table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* Mobile
--------------------------------------------- */

@media (max-width: 520px) {
	.wc-block-cart .wc-block-components-sidebar,
	.wc-block-checkout .wc-block-components-sidebar {
		padding: 1rem;
	}

	.woocommerce-MyAccount-navigation ul {
		grid-template-columns: 1fr;
	}

	.woocommerce-MyAccount-navigation li {
		border-right: 0;
	}

	.woocommerce-MyAccount-content,
	.woocommerce-account .woocommerce-form-login,
	.woocommerce-account .woocommerce-form-register,
	.woocommerce-account .woocommerce-ResetPassword {
		padding: 1.25rem;
	}

	.woocommerce-account .button {
		width: 100%;
		text-align: center;
	}
}