/*
 * Fatalii Cart Companion — the cart page on a phone.
 *
 * fataliiseeds.net's cart table is 950 px wide and scrolls sideways on a phone: only the picture,
 * the name and the price were in sight, while the quantity, the line total, the remove button, the
 * cart total and "Update cart" were off to the right (Jukka, 2026-10-12: the cart has always been
 * poor on a phone, and much of the ordering happens there). Below 700 px each product becomes one
 * compact row, the totals read label-left amount-right, and the buttons stack.
 *
 * Only presentation: no markup is changed and nothing in the cart. The file is loaded on the cart
 * page alone, so the selectors need no page prefix; they are tied to the theme's own cart form
 * (form.table > .table-cart) and do nothing on a page without it.
 */

@media (max-width: 700px) {

	/* No more sideways scrolling. */
	form.table {
		overflow: visible;
	}

	form.table > .table-cart {
		display: block;
		width: 100%;
		min-width: 0;
		margin: 0;
	}

	form.table > .table-cart thead {
		display: none;
	}

	form.table > .table-cart tbody,
	form.table > .table-cart tfoot {
		display: block;
		width: 100%;
	}

	/* One product: picture on the left, name and remove on top, unit price under the name, the
	   quantity and the line total on the bottom line. */
	form.table > .table-cart tbody tr {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr) auto;
		grid-template-areas:
			"img name remove"
			"img unit unit"
			"img qty sub";
		align-items: center;
		column-gap: 12px;
		row-gap: 4px;
		padding: 14px 12px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	}

	/* The theme gives the cells fixed widths for the wide table (180 px for the totals); in the
	   compact row they would push everything else aside. */
	form.table > .table-cart tbody td {
		display: block;
		width: auto;
		min-width: 0;
		max-width: none;
		height: auto;
		padding: 0;
		border: 0;
		text-align: left;
	}

	form.table > .table-cart tbody td:nth-child(1) {
		grid-area: img;
		align-self: start;
	}

	form.table > .table-cart tbody td:nth-child(2) {
		grid-area: name;
		min-width: 0;
	}

	form.table > .table-cart tbody td:nth-child(3) {
		grid-area: unit;
		font-size: 0.85em;
		opacity: 0.7;
	}

	form.table > .table-cart tbody td:nth-child(3) .table-cart__price {
		font-weight: 400;
	}

	form.table > .table-cart tbody td:nth-child(3) .table-cart__price::after {
		content: " each";
	}

	form.table > .table-cart tbody td:nth-child(4) {
		grid-area: qty;
		justify-self: start;
	}

	form.table > .table-cart tbody td:nth-child(5) {
		grid-area: sub;
		text-align: right;
		white-space: nowrap;
	}

	form.table > .table-cart tbody td:nth-child(6) {
		grid-area: remove;
		align-self: start;
		text-align: right;
	}

	form.table > .table-cart .table-cart__image {
		display: block;
		margin: 0;
	}

	form.table > .table-cart .table-cart__image img {
		display: block;
		width: 56px;
		height: 56px;
		max-width: 100%;
	}

	form.table > .table-cart .table-cart__title {
		display: block;
		line-height: 1.3;
		overflow-wrap: anywhere;
	}

	/* Totals: what it is on the left, the amount on the right. */
	form.table > .table-cart tfoot tr {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 1em;
		padding: 12px;
	}

	form.table > .table-cart tfoot td {
		display: block;
		width: auto;
		min-width: 0;
		height: auto;
		padding: 0;
		border: 0;
		text-align: left;
	}

	form.table > .table-cart tfoot td:empty {
		display: none;
	}

	form.table > .table-cart tfoot td:last-child:not(:empty),
	form.table > .table-cart tfoot .fcc-table-value {
		text-align: right;
	}

	/* The buttons under the cart, one under the other, as wide as the screen. */
	form.table > .table-cart + .table-cart tfoot tr {
		display: block;
		padding: 8px 12px;
	}

	form.table > .table-cart + .table-cart tfoot td {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		width: 100%;
	}

	form.table > .table-cart + .table-cart .button {
		flex: 1 1 auto;
		margin: 0;
		text-align: center;
	}

	form.table .form-coupon {
		display: flex;
		gap: 8px;
		width: 100%;
	}

	form.table .form-coupon br {
		display: none;
	}

	form.table .form-coupon .input {
		flex: 1 1 auto;
		min-width: 0;
	}

	form.table .form-coupon .button {
		flex: 0 0 auto;
	}

	/* The three checkout steps fit on one line. */
	.nav-cart .nav-cart__list {
		display: flex;
		justify-content: space-between;
		gap: 6px;
		min-width: 0;
		overflow: visible;
	}

	.nav-cart .nav-cart__item {
		flex: 1 1 0;
		min-width: 0;
		text-align: center;
	}

	/* The theme shrinks the step names to nothing on a phone; a small name tells the customer
	   where they are. */
	nav.nav-cart .nav-cart__list .nav-cart__item small {
		display: block;
		margin-top: 4px;
		font-size: 11px;
		line-height: 1.25;
	}
}