/**
 * Grid / list view switch (see inc/shop-view-toggle.php).
 * List styles only apply on shop/category pages (.tbb-has-view-toggle) when the
 * visitor picked list view (html.tbb-view-list).
 */

/* ---------- The switch ---------------------------------------------------- */

.tbb-view-toggle {
	display: inline-flex;
	gap: 0.35em;
	margin: 0 0 1em;
	vertical-align: middle;
}

@media (min-width: 768px) {
	.tbb-view-toggle {
		float: right;
		margin: 0 0 0 1em;
	}
}

.tbb-view-toggle .tbb-view-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4em;
	height: 2.4em;
	padding: 0;
	background: #fff;
	color: #9a9a9a;
	border: 1px solid #e3dcd9;
	border-radius: 0;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.tbb-view-toggle .tbb-view-btn svg {
	fill: currentColor;
}

.tbb-view-toggle .tbb-view-btn:hover,
.tbb-view-toggle .tbb-view-btn:focus-visible {
	color: #1a1a1a;
	border-color: #1a1a1a;
	background: #fff;
}

.tbb-view-toggle .tbb-view-btn[aria-pressed="true"] {
	color: #fff;
	background: #1a1a1a;
	border-color: #1a1a1a;
}

/* Short description: list view only. */
.tbb-loop-excerpt {
	display: none;
}

/* ---------- List view ----------------------------------------------------- */

html.tbb-view-list .tbb-has-view-toggle .site-main ul.products li.product {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75em 1.5em;
	float: none;
	clear: both;
	width: 100%;
	margin: 0;
	padding: 1.25em 0;
	border-bottom: 1px solid #efe7e4;
	text-align: left;
}

html.tbb-view-list .tbb-has-view-toggle .site-main ul.products li.product:first-child {
	border-top: 1px solid #efe7e4;
}

/* Photo on the left, details on the right. */
html.tbb-view-list .tbb-has-view-toggle .site-main ul.products li.product > a.woocommerce-LoopProduct-link {
	display: grid;
	grid-template-columns: 96px 1fr;
	column-gap: 1em;
	align-items: start;
	flex: 1 1 100%;
	min-width: 0;
}

html.tbb-view-list .tbb-has-view-toggle .site-main ul.products li.product > a.woocommerce-LoopProduct-link > * {
	grid-column: 2;
	margin-left: 0;
	margin-right: 0;
}

html.tbb-view-list .tbb-has-view-toggle .site-main ul.products li.product > a.woocommerce-LoopProduct-link > img {
	grid-column: 1;
	grid-row: 1 / span 6;
	width: 100%;
	height: auto;
	margin: 0;
}

html.tbb-view-list .tbb-has-view-toggle .site-main ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 0.25em;
	font-size: 1rem;
}

html.tbb-view-list .tbb-has-view-toggle .site-main ul.products li.product .price {
	margin: 0 0 0.35em;
}

html.tbb-view-list .tbb-has-view-toggle .site-main ul.products li.product .onsale {
	justify-self: start;
	margin: 0 0 0.35em;
}

html.tbb-view-list .tbb-has-view-toggle .site-main ul.products li.product .tbb-loop-excerpt {
	display: block;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: #6b6b6b;
}

/* Add to cart sits under the details on phones... */
html.tbb-view-list .tbb-has-view-toggle .site-main ul.products li.product > .button,
html.tbb-view-list .tbb-has-view-toggle .site-main ul.products li.product > .added_to_cart {
	margin: 0 0 0 calc(96px + 1em);
	white-space: nowrap;
}

/* ...and on the right-hand side on larger screens. */
@media (min-width: 768px) {
	html.tbb-view-list .tbb-has-view-toggle .site-main ul.products li.product {
		flex-wrap: nowrap;
	}

	html.tbb-view-list .tbb-has-view-toggle .site-main ul.products li.product > a.woocommerce-LoopProduct-link {
		grid-template-columns: 160px 1fr;
		column-gap: 1.75em;
		align-items: center;
		flex: 1 1 auto;
	}

	html.tbb-view-list .tbb-has-view-toggle .site-main ul.products li.product > .button,
	html.tbb-view-list .tbb-has-view-toggle .site-main ul.products li.product > .added_to_cart {
		flex: 0 0 auto;
		margin: 0;
	}
}