/**
 * TS - Wishlist.
 *
 * Deliberately small. Flatsome already styles the heart, the popup that holds
 * it, `td.wishlist-empty`, `.wishlist-title` and `.wishlist_table .add_to_cart`
 * from its own integration stylesheet, and that file is loaded whether or not
 * this one is. What is left is the wishlist page's own table, and making it
 * readable on a phone without YITH's second server-rendered template.
 *
 * Note the handle is `ts-wishlist`. Flatsome deregisters `yith-wcwl-main` and
 * `yith-wcwl-font-awesome` outright, so those two names are unusable.
 */

.ts-wishlist .wishlist_table {
	width: 100%;
	margin-bottom: 2em;
}

.ts-wishlist .wishlist_table td {
	vertical-align: middle;
	padding: 12px 10px;
}

.ts-wishlist .product-thumbnail {
	width: 90px;
}

.ts-wishlist .product-thumbnail img {
	display: block;
	max-width: 100%;
	height: auto;
}

.ts-wishlist .product-remove {
	width: 30px;
}

.ts-wishlist .product-remove a {
	color: #ccc;
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
}

.ts-wishlist .product-remove a:hover {
	color: #333;
}

.ts-wishlist .wishlist-out-of-stock {
	opacity: 0.7;
}

/*
 * One table for every screen, rather than YITH's `wp_is_mobile()` choice
 * between two templates — that decision gets baked into cached HTML and then
 * serves the wrong one. Below 768px the row becomes a block and each cell a
 * line, which is the same breakpoint Flatsome's own mobile rules use.
 */
@media screen and (max-width: 768px) {
	.ts-wishlist .wishlist_table,
	.ts-wishlist .wishlist_table tbody,
	.ts-wishlist .wishlist_table tr,
	.ts-wishlist .wishlist_table td {
		display: block;
		width: auto;
	}

	.ts-wishlist .wishlist_table tr {
		position: relative;
		padding: 15px 0 15px 100px;
		min-height: 90px;
		border-bottom: 1px solid #ececec;
	}

	.ts-wishlist .wishlist_table td {
		padding: 2px 0;
		text-align: left;
	}

	.ts-wishlist .product-thumbnail {
		position: absolute;
		top: 15px;
		left: 0;
		width: 85px;
		padding: 0;
	}

	.ts-wishlist .product-remove {
		position: absolute;
		top: 15px;
		right: 0;
		width: auto;
		padding: 0;
	}

	/*
	 * Not `width: 100%`. Flatsome puts a margin-right on every button, so a
	 * full-width one overflows its container — see the note in the KB. Letting
	 * the button size itself avoids that entirely.
	 */
	.ts-wishlist .product-add-to-cart .button {
		margin-top: 8px;
	}
}