/* =========================================================
   Commerce
========================================================= */

.commerce-main {
	padding: 60px 0 90px;
}

.commerce-main .container {
	width: min(1200px, calc(100% - 32px));
	min-width: 0;
}


/* =========================================================
   Commerce Table
========================================================= */

.commerce-table {
	overflow-x: auto;

	margin: 24px 0;
}

.commerce-table table {
	width: 100%;
	min-width: 680px;
}

.commerce-table td {
	padding: 16px 12px;
}


/* =========================================================
   Inline Form
========================================================= */

.commerce-inline {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 12px;
}

.commerce-inline label {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.commerce-inline input,
.commerce-inline select,
.commerce-benefits input {
	max-width: 220px;

	padding: 10px;

	border: 1px solid #ccc;
}

.commerce-inline input[type="number"] {
	width: 100px;
}

.commerce-inline input[type="checkbox"] {
	width: auto;
}


/* =========================================================
   Benefits / Summary / Empty
========================================================= */

.commerce-benefits,
.commerce-summary,
.commerce-empty {
	margin: 28px 0;
	padding: 28px;

	border: 1px solid #e4e6e8;

	background: #f7f8fa;
}

.commerce-empty p{margin-bottom: 15px}

/* ---------------------------------------------------------
   Summary
--------------------------------------------------------- */

.commerce-summary dl > div {
	display: flex;
	justify-content: space-between;
	gap: 20px;

	padding: 12px;

	border-bottom: 1px solid #ddd;
}

.commerce-summary dd {
	font-weight: 600;
}


/* =========================================================
   Shopping
========================================================= */

.commerce-shopping {
	margin: 36px 0;
}

.commerce-shopping article {
	padding: 16px;

	border-bottom: 1px solid #ddd;
}

.commerce-shopping form {
	display: inline-block;
}

.commerce-shopping input {
	padding: 10px;

	border: 1px solid #ccc;
}


/* =========================================================
   Cart Count
========================================================= */

.cart-count {
	display: inline-block;

	min-width: 18px;

	padding: 2px 5px;

	border-radius: 12px;

	background: #292929;

	color: #fff;

	font-size: 12px;
	text-align: center;
}


/* =========================================================
   Alert
========================================================= */

.commerce-main p[role="alert"] {
	color: #a22;
}


/* =========================================================
   Stepper
========================================================= */

.commerce-main .stepper {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}


/* =========================================================
   Cart / Account
========================================================= */

.page-cart .cart-main > .container {
	width: min(1200px, calc(100% - 32px));
}

.page-account .account-main {
	height: auto;
	min-height: 70vh;
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 700px) {

	.commerce-main {
		padding: 32px 0;
	}

	.commerce-summary,
	.commerce-benefits {
		padding: 16px;
	}

	.commerce-summary dl > div {
		font-size: 14px;
	}

	.commerce-main .page-title {
		font-size: 32px;
	}

	.commerce-main .stepper {
		gap: 12px;

		font-size: 12px;
	}


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

	.commerce-table table,
	.commerce-table tbody,
	.commerce-table tr,
	.commerce-table td {
		display: block;

		width: 100%;
		min-width: 0;
	}

	.commerce-table thead {
		display: none;
	}

	.commerce-table tr {
		margin-bottom: 16px;
		padding: 16px;

		border: 1px solid #ddd;
	}

	.commerce-table td {
		padding: 8px 0;

		border: 0;
	}

	.commerce-table {
		overflow: visible;
	}


	/* -----------------------------------------------------
	   Mobile Inline Form
	----------------------------------------------------- */

	.commerce-table .commerce-inline {
		align-items: center;
	}

	.commerce-table .commerce-inline label {
		max-width: 100%;
	}

	.commerce-table .commerce-inline select {
		width: 250px;
		max-width: 100%;
	}

}