/*
 * One-page checkout: mobile cart layout.
 * Below 768px each cart line becomes a card instead of Simple's squeezed, horizontally
 * scrolling table: photo | name + sizes + unit price, then quantity stepper | line total,
 * remove button in the top-right corner. Loaded after simple.css, so it overrides it.
 */
@media only screen and (max-width: 767px) {
	#simplecheckout_cart .table-responsive {
		overflow: visible;
		border: 0;
		margin-bottom: 0;
	}

	#simplecheckout_cart .simplecheckout-cart,
	#simplecheckout_cart .simplecheckout-cart tbody {
		display: block;
		width: 100%;
		border: 0;
	}

	#simplecheckout_cart .simplecheckout-cart colgroup,
	#simplecheckout_cart .simplecheckout-cart thead {
		display: none;
	}

	#simplecheckout_cart .simplecheckout-cart tbody tr {
		position: relative;
		display: grid;
		grid-template-columns: 84px minmax(0, 1fr) auto;
		grid-template-areas:
			"image name  name"
			"image price price"
			"qty   qty   total";
		column-gap: 14px;
		row-gap: 10px;
		padding: 16px 0;
		border-bottom: 1px solid #ebe3da;
	}

	#simplecheckout_cart .simplecheckout-cart tbody tr:first-child {
		padding-top: 4px;
	}

	#simplecheckout_cart .simplecheckout-cart td {
		display: block !important;
		width: auto !important;
		padding: 0 !important;
		border: 0 !important;
		text-align: left !important;
		vertical-align: top;
		background: none;
	}

	#simplecheckout_cart .simplecheckout-cart td.image {
		grid-area: image;
	}

	#simplecheckout_cart .simplecheckout-cart td.image img {
		display: block;
		width: 84px;
		height: auto;
		border-radius: 8px;
	}

	#simplecheckout_cart .simplecheckout-cart td.name {
		grid-area: name;
		padding-right: 40px !important;
		font-size: 15px;
		line-height: 1.35;
	}

	#simplecheckout_cart .simplecheckout-cart td.name > .image,
	#simplecheckout_cart .simplecheckout-cart td.model {
		display: none !important;
	}

	#simplecheckout_cart .simplecheckout-cart td.name .options {
		margin-top: 8px;
	}

	#simplecheckout_cart .simplecheckout-cart td.name .size-selector {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 6px;
		margin: 0;
	}

	#simplecheckout_cart .simplecheckout-cart td.name .size-selector .form-radio {
		margin: 0;
	}

	#simplecheckout_cart .simplecheckout-cart td.price {
		grid-area: price;
		font-size: 13px;
		color: #8a7b6c;
	}

	#simplecheckout_cart .simplecheckout-cart td.price::before {
		content: attr(data-label) ": ";
	}

	#simplecheckout_cart .simplecheckout-cart td.price > div {
		display: inline;
	}

	#simplecheckout_cart .simplecheckout-cart td.quantity {
		grid-area: qty;
		align-self: center;
	}

	/* theme centres .input-group with margin:auto; keep the stepper on the left edge */
	#simplecheckout_cart .simplecheckout-cart td.quantity .input-group {
		display: flex !important;
		flex-wrap: nowrap;
		align-items: stretch;
		width: auto !important;
		max-width: 150px !important;
		margin: 0 !important;
	}

	#simplecheckout_cart .simplecheckout-cart td.quantity .input-group-btn {
		display: block !important;
		width: auto;
	}

	#simplecheckout_cart .simplecheckout-cart td.quantity button,
	#simplecheckout_cart .simplecheckout-cart td.quantity input {
		display: block !important;
		height: 40px;
		min-height: 40px;
		margin: 0;
	}

	#simplecheckout_cart .simplecheckout-cart td.quantity button {
		width: 40px;
		padding: 0;
	}

	#simplecheckout_cart .simplecheckout-cart td.quantity input {
		width: 46px !important;
		padding: 0 4px;
		text-align: center;
	}

	#simplecheckout_cart .simplecheckout-cart td.total {
		grid-area: total;
		align-self: center;
		text-align: right !important;
		font-size: 17px;
		font-weight: 700;
		white-space: nowrap;
	}

	#simplecheckout_cart .simplecheckout-cart td.remove {
		position: absolute;
		top: 12px;
		right: 0;
	}

	#simplecheckout_cart .simplecheckout-cart tbody tr:first-child td.remove {
		top: 0;
	}

	#simplecheckout_cart .simplecheckout-cart td.remove button {
		display: block !important;
		width: 32px;
		height: 32px;
		min-height: 32px;
		padding: 0;
		line-height: 32px;
		font-size: 14px;
	}

	/* totals: label left, amount right (simple.css gives the label a fixed 200px width) */
	#simplecheckout_cart .simplecheckout-cart-total {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 0;
		border-left: 0;
		border-right: 0;
		text-align: left;
	}

	/* simple.css clearfix would become an extra flex item and eat a gap */
	#simplecheckout_cart .simplecheckout-cart-total::after,
	#simplecheckout_cart .simplecheckout-cart-total .simplecheckout-cart-total-remove {
		display: none;
	}

	#simplecheckout_cart .simplecheckout-cart-total > span:first-child {
		width: auto !important;
		flex: 1 1 auto;
		text-align: left;
	}

	#simplecheckout_cart .simplecheckout-cart-total .simplecheckout-cart-total-value {
		width: auto !important;
		flex: 0 0 auto;
		margin: 0;
		white-space: nowrap;
		text-align: right;
	}

	#simplecheckout_cart #total_total {
		font-size: 17px;
	}
}