/**
 * YouBeauty — wishlist.
 *
 * TI WooCommerce Wishlist renders this through a shortcode on a plain WordPress page, so there is
 * no WooCommerce template underneath and none of Woo's own classes to lean on: the table is
 * `.tinvwl-table-manage-list` and every cell is `td.product-*`. Class names were read off the
 * rendered page.
 *
 * The layout, page width and shared chrome — buttons, notices, focus ring, form controls — come
 * from `woocommerce.css`, which now loads here because `b7ectg_is_wc_page()` counts the wishlist.
 * This file is only the table.
 *
 * Drawn as the cart's line-item list rather than as a grid of tiles: it is a management view, the
 * same shape of thing as the cart, and the two should read alike.
 */

/* ------------------------------------------------------------------- heading */

/*
 * The page already has its own `h1` ("Wishlist"), so the list name below it is a label, not a
 * second title. Padding is zeroed explicitly — Divi styles bare `h1`-`h6` globally and a class
 * rule that mentions only margin leaves the padding in place.
 */
#left-area .tinv-wishlist .tinv-header {
	margin: 0 0 var( --csl-space-5 );
}

#left-area .tinv-wishlist .tinv-header h2 {
	margin: 0;
	padding: 0;
	color: var( --csl-ink );
	font-size: var( --csl-text-xs );
	font-weight: var( --csl-weight-bold );
	letter-spacing: var( --csl-tracking-caps );
	line-height: var( --csl-leading-snug );
	text-transform: uppercase;
}

/* --------------------------------------------------------------------- table */

#left-area .tinvwl-table-manage-list {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

#left-area .tinvwl-table-manage-list thead tr {
	border-bottom: 1px solid var( --csl-ink );
}

#left-area .tinvwl-table-manage-list thead th {
	padding: 0 var( --csl-space-3 ) var( --csl-space-3 ) 0;
	border: 0;
	color: var( --csl-ink );
	font-size: var( --csl-text-2xs );
	font-weight: var( --csl-weight-bold );
	letter-spacing: var( --csl-tracking-caps );
	line-height: var( --csl-leading-snug );
	text-align: left;
	text-transform: uppercase;
	vertical-align: bottom;
}

#left-area .tinvwl-table-manage-list tbody tr.wishlist_item {
	border-bottom: 1px solid var( --csl-rule );
}

#left-area .tinvwl-table-manage-list tbody td {
	padding: var( --csl-space-4 ) var( --csl-space-3 ) var( --csl-space-4 ) 0;
	border: 0;
	vertical-align: middle;
}

/* ----------------------------------------------------------------- the cells */

#left-area .tinvwl-table-manage-list .product-cb,
#left-area .tinvwl-table-manage-list .product-remove {
	width: 2.5rem;
	padding-right: var( --csl-space-2 );
}

#left-area .tinvwl-table-manage-list .product-thumbnail {
	width: 96px;
}

/*
 * The thumbnail takes the same square well as a shop tile — brand neutral behind a contained
 * packshot — so a product reads the same here as it does on the archive. The plugin serves the
 * cropped `woocommerce_thumbnail`; at 64px the crop is not legible, so it is left alone rather
 * than swapped for a larger file the row does not need.
 */
#left-area .tinvwl-table-manage-list .product-thumbnail a {
	display: block;
	width: 72px;
}

#left-area .tinvwl-table-manage-list .product-thumbnail img {
	box-sizing: border-box;
	display: block;
	width: 72px;
	height: 72px;
	margin: 0;
	padding: var( --csl-space-1 );
	background-color: var( --csl-brand-neutral );
	object-fit: contain;
}

#left-area .tinvwl-table-manage-list .product-name a {
	color: var( --csl-ink );
	font-size: var( --csl-text-sm );
	font-weight: var( --csl-weight-semibold );
	line-height: var( --csl-leading-snug );
	text-decoration: none;
}

#left-area .tinvwl-table-manage-list .product-name a:hover,
#left-area .tinvwl-table-manage-list .product-name a:focus-visible {
	color: var( --csl-accent );
	text-decoration: underline;
}

/*
 * The price cell has no `.price` class, so the shared price rules in `woocommerce.css` do not
 * reach it. Same reading as everywhere else: sale price in pink, original struck and quiet, sale
 * first regardless of DOM order.
 *
 * Sale-first needs a flex container, because WooCommerce prints `<del>` before `<ins>`. That
 * container must not be the `td`: a table cell given a non-table display is replaced in its row by
 * an anonymous cell, so `vertical-align: middle` stops reaching it and the price rides at the top
 * of the row while the name, date and stock stay centred. The `tinvwl_wishlist_item_price` filter
 * in `functions.php` wraps the price for exactly this reason — the wrapper flexes, the cell stays
 * a cell. It also carries the ordering into the stacked layout below, where `td` becomes `block`
 * and a flexed cell would have lost it.
 */
#left-area .tinvwl-table-manage-list .product-price {
	font-size: var( --csl-text-sm );
	line-height: var( --csl-leading-snug );
}

#left-area .tinvwl-table-manage-list .yb-wishlist-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var( --csl-space-2 );
}

#left-area .tinvwl-table-manage-list .product-price del {
	order: 2;
	color: var( --csl-ink-soft );
	font-weight: var( --csl-weight-regular );
	text-decoration: line-through;
}

#left-area .tinvwl-table-manage-list .product-price ins {
	order: 1;
	background: none;
	color: var( --csl-brand-pink-deep );
	font-weight: var( --csl-weight-bold );
	text-decoration: none;
}

#left-area .tinvwl-table-manage-list .product-date,
#left-area .tinvwl-table-manage-list .product-date time {
	color: var( --csl-ink-soft );
	font-size: var( --csl-text-xs );
	line-height: var( --csl-leading-snug );
	white-space: nowrap;
}

/* Same pairing the single product page uses for its stock line. */
#left-area .tinvwl-table-manage-list .product-stock .stock {
	display: flex;
	align-items: center;
	gap: var( --csl-space-1 );
	margin: 0;
	font-size: var( --csl-text-xs );
	font-weight: var( --csl-weight-semibold );
	line-height: var( --csl-leading-snug );
}

#left-area .tinvwl-table-manage-list .product-stock .stock.in-stock {
	color: var( --csl-ink-soft );
}

#left-area .tinvwl-table-manage-list .product-stock .stock.out-of-stock {
	color: var( --csl-brand-pink-deep );
}

#left-area .tinvwl-table-manage-list .product-action {
	text-align: right;
	white-space: nowrap;
}

/*
 * The remove control is a bare submit carrying an icon font glyph. Quiet until wanted, and it
 * turns the same pink the wishlist heart does elsewhere on the site.
 */
#left-area .tinvwl-table-manage-list .product-remove button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var( --csl-ink-soft );
	cursor: pointer;
	transition: color var( --csl-transition );
}

#left-area .tinvwl-table-manage-list .product-remove button:hover,
#left-area .tinvwl-table-manage-list .product-remove button:focus-visible {
	color: var( --csl-brand-pink-deep );
}

/* ------------------------------------------------------------- the action bar */

/*
 * Bulk actions left, cart actions right, on one row.
 *
 * The plugin floats the two groups and that is left alone, because the alternatives do not survive
 * table layout: making the `td` a flex container while `tfoot` and `tr` are still table boxes
 * leaves the cell without the table's width, and switching those to `block` makes them invalid
 * table children, so the browser wraps them in anonymous boxes and the groups shrink to content
 * and stack. Floats work inside a real table cell, which is what this is.
 *
 * Each group is still a flex row internally — that only affects its own children.
 */
#left-area .tinvwl-table-manage-list tfoot td {
	padding: var( --csl-space-5 ) 0 0;
	border: 0;
}

#left-area .tinvwl-table-manage-list tfoot td::after {
	content: "";
	display: block;
	clear: both;
}

#left-area .tinvwl-table-manage-list tfoot .tinvwl-to-left {
	float: left;
}

/*
 * `justify-content` matters here: the floated group does not shrink-wrap to its buttons — it takes
 * the width left over beside the bulk-action group — so without this its two buttons sit at its
 * left edge, stranded in the middle of the row instead of against the right margin.
 */
#left-area .tinvwl-table-manage-list tfoot .tinvwl-to-right {
	float: right;
	justify-content: flex-end;
}

#left-area .tinvwl-table-manage-list tfoot .tinvwl-to-left,
#left-area .tinvwl-table-manage-list tfoot .tinvwl-to-right {
	display: flex;
	flex-wrap: wrap;
	gap: var( --csl-space-3 );
	align-items: center;
	margin: 0;
}

#left-area .tinvwl-table-manage-list tfoot .tinvwl-input-group {
	display: flex;
	flex-wrap: wrap;
	gap: var( --csl-space-2 );
	align-items: center;
	width: auto;
}

/*
 * `width: auto` is the load-bearing half of this rule.
 *
 * The plugin builds the bulk-action control as a Bootstrap-style table — `.tinvwl-input-group` is
 * `display: table` and the button's wrapper is `display: table-cell; width: 1%`, the old trick for
 * a shrink-to-fit cell. Re-laying the group out as flex leaves that `1%` behind, and as a flex
 * basis it resolves to about 3px: the wrapper measured 10px around an 85px button, which spilled
 * 70px past the viewport on a phone. `flex: 0 0 auto` alone does not fix it, because `auto` takes
 * its basis from that same `width`.
 */
#left-area .tinvwl-table-manage-list tfoot .tinvwl-input-group-btn {
	flex: 0 0 auto;
	width: auto;
}

/*
 * The bulk-action select sits beside its Apply button, so it takes the button's height rather than
 * the shared form-control padding, which would leave the two visibly mismatched. Width is its
 * content's, not the group's — as a flex child it would otherwise stretch across the row.
 */
#left-area .tinvwl-table-manage-list tfoot select {
	width: auto;
	min-height: 2.75rem;
	margin: 0;
}

/*
 * "Add All to Cart" is the primary action on this page and takes the orange fill the site gives a
 * primary everywhere else — Proceed to Checkout, Place Order, Add to Cart. Three identical amber
 * buttons in a row state no preference between them. Navy on brand orange is 5.59:1, and the
 * darkened hover 4.70:1, so both clear AA.
 */
#left-area .tinvwl-table-manage-list tfoot button[name="tinvwl-action-product_all"] {
	background-color: var( --csl-brand-orange );
}

#left-area .tinvwl-table-manage-list tfoot button[name="tinvwl-action-product_all"]:hover,
#left-area .tinvwl-table-manage-list tfoot button[name="tinvwl-action-product_all"]:focus-visible {
	background-color: #ec7a15;
}

/*
 * The Apply button is `Apply <span class="tinvwl-mobile">Action</span>` — the plugin shows both
 * words on every viewport, hiding `.tinvwl-mobile` only inside `thead th`. The shared button rule
 * makes buttons `inline-flex`, which turns that span into a flex item and drops the literal space
 * between the two words in favour of the 8px `gap`, so the label read "Apply  Action". A word-space
 * gap puts it back without giving up the centering the shared rule provides.
 */
#left-area .tinvwl-table-manage-list tfoot button.button {
	gap: 0.25em;
}

/* --------------------------------------------------------------------- share */

#left-area .tinv-wishlist .social-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --csl-space-3 );
	margin-top: var( --csl-space-8 );
	padding-top: var( --csl-space-5 );
	border-top: 1px solid var( --csl-rule );
}

#left-area .tinv-wishlist .social-buttons > span {
	color: var( --csl-ink-soft );
	font-size: var( --csl-text-xs );
	font-weight: var( --csl-weight-semibold );
	letter-spacing: var( --csl-tracking-caps );
	text-transform: uppercase;
}

#left-area .tinv-wishlist .social-buttons ul {
	display: flex;
	flex-wrap: wrap;
	gap: var( --csl-space-2 );
	margin: 0;
	padding: 0;
	list-style: none;
}

#left-area .tinv-wishlist .social-buttons li {
	margin: 0;
	padding: 0;
	list-style: none;
}

#left-area .tinv-wishlist .social-buttons a.social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var( --csl-rule );
	border-radius: var( --csl-radius-sm );
	background: var( --csl-ground );
	color: var( --csl-ink );
	text-decoration: none;
	transition: background-color var( --csl-transition ), border-color var( --csl-transition ), color var( --csl-transition );
}

#left-area .tinv-wishlist .social-buttons a.social:hover,
#left-area .tinv-wishlist .social-buttons a.social:focus-visible {
	border-color: var( --csl-brand-navy );
	background: var( --csl-brand-navy );
	color: #ffffff;
}

/* ------------------------------------------------------------------- mobile */

/*
 * The table stops being a table. Seven columns cannot survive a 320px column, and the plugin's own
 * narrow layout does not match anything else on this site, so the row is rebuilt as the cart's
 * stacked line item: thumbnail left, everything else in a column beside it.
 *
 * Every cell is placed explicitly. Auto-placement with a row-spanning thumbnail is what put the
 * cart's line total on top of its product name, and the same shape of bug is available here.
 */
@media ( max-width: 767px ) {
	/*
	 * The footer leaves table layout here too. The table itself is `display: block` at this
	 * breakpoint, so a `tfoot` left as a table group becomes an anonymous table sized to its
	 * content — the floated button row — and pushed the page 72px wider than the viewport.
	 * Below, with no table ancestor left to fight, block is the consistent choice.
	 */
	#left-area .tinvwl-table-manage-list,
	#left-area .tinvwl-table-manage-list tbody,
	#left-area .tinvwl-table-manage-list tfoot,
	#left-area .tinvwl-table-manage-list tfoot tr,
	#left-area .tinvwl-table-manage-list tfoot td {
		display: block;
		width: 100%;
	}

	#left-area .tinvwl-table-manage-list thead {
		display: none;
	}

	#left-area .tinvwl-table-manage-list tbody tr.wishlist_item {
		display: grid;
		grid-template-columns: 2rem 64px minmax( 0, 1fr );
		gap: var( --csl-space-1 ) var( --csl-space-3 );
		align-items: center;
		padding: var( --csl-space-4 ) 0;
	}

	#left-area .tinvwl-table-manage-list tbody td {
		display: block;
		padding: 0;
	}

	#left-area .tinvwl-table-manage-list .product-cb {
		grid-column: 1;
		grid-row: 1 / span 2;
		width: auto;
	}

	#left-area .tinvwl-table-manage-list .product-thumbnail {
		grid-column: 2;
		grid-row: 1 / span 2;
		width: auto;
	}

	#left-area .tinvwl-table-manage-list .product-name {
		grid-column: 3;
		grid-row: 1;
	}

	#left-area .tinvwl-table-manage-list .product-price {
		grid-column: 3;
		grid-row: 2;
	}

	/* The rest sits under the thumbnail, spanning the full width of the row. */
	#left-area .tinvwl-table-manage-list .product-stock,
	#left-area .tinvwl-table-manage-list .product-action {
		grid-column: 1 / -1;
		margin-top: var( --csl-space-2 );
		text-align: left;
	}

	/* Date and the remove control are noise at this width; the row is already actionable. */
	#left-area .tinvwl-table-manage-list .product-date {
		grid-column: 1 / -1;
	}

	#left-area .tinvwl-table-manage-list .product-remove {
		position: absolute;
		right: 0;
		width: auto;
	}

	#left-area .tinvwl-table-manage-list tbody tr.wishlist_item {
		position: relative;
	}

	/* Stacked: the floats come off and each group takes the full width of the row. */
	#left-area .tinvwl-table-manage-list tfoot .tinvwl-to-left,
	#left-area .tinvwl-table-manage-list tfoot .tinvwl-to-right {
		float: none;
		width: 100%;
	}

	#left-area .tinvwl-table-manage-list tfoot .tinvwl-to-left {
		margin-bottom: var( --csl-space-3 );
	}

	#left-area .tinvwl-table-manage-list tfoot .tinvwl-to-right button,
	#left-area .tinvwl-table-manage-list tfoot .tinvwl-input-group {
		width: 100%;
	}

	#left-area .tinvwl-table-manage-list tfoot select {
		flex: 1 1 6rem;
		min-width: 0;
	}
}