/**
 * TruckTrade Wishlist styles.
 *
 * Reuses the former WPFactory class names (.alg-wc-wl-view-table, etc.) so the
 * wishlist page design is identical, plus a self-contained heart button that
 * needs no Font Awesome and no positioner JS.
 */

/* ============================================================= */
/* Heart toggle button (loop + single)                          */
/*                                                               */
/* The heart icon + position come from the theme's style.css     */
/* (.alg-wc-wl-btn i.fa-heart:before -> thumb-heart-icon.svg and  */
/* .alg-wc-wl-thumb-btn-abs { inset: 20px 20px auto auto }).      */
/* These rules only restore what the removed plugin used to       */
/* provide: the positioning context + button reset.              */
/* ============================================================= */

/* Card must anchor the absolutely-positioned heart (was set by the plugin). */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.site-main ul.products li.product,
li.wp-block-post.product.type-product,
.wc-block-product-template .wc-block-product,
.woocommerce-LoopProduct-link {
	position: relative;
}

/* Loop heart is absolute over the card; the theme's .product-image-block rule
   overrides this to relative/inline on the single product page. */
.alg-wc-wl-thumb-btn-abs {
	position: absolute !important;
	display: inline-block;
}

/* <button> reset — the plugin used a <div>. */
.tt-wl-btn {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	line-height: 0;
	cursor: pointer;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	/* Explicit size prevents FA font metrics from inflating button height */
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Never let the browser add a native press-down visual */
	-webkit-tap-highlight-color: transparent;
}

.tt-wl-btn:focus,
.tt-wl-btn:focus-visible {
	outline: none;
	box-shadow: none;
}

/* Suppress any browser-default :active transform (e.g. Edge "press" effect) */
.tt-wl-btn:active {
	transform: none;
}

.tt-wl-btn .fa-heart {
	font-style: normal;
}

/* Loading: only block re-click — no transform or scale that could cause
   a perceived layout shift. The SVG circle remains fully opaque. */
.tt-wl-btn.loading {
	pointer-events: none;
	opacity: 0.65;
}

/* ============================================================= */
/* Wishlist page table (identical to former plugin design)      */
/* ============================================================= */

.alg-wc-wl-view-table {
	width: 100%;
}

.alg-wc-wl-view-table .product-thumbnail img {
	width: 25%;
	max-width: 250px;
	height: auto;
}

.alg-wc-wl-view-table td,
.alg-wc-wl-view-table tr {
	vertical-align: middle !important;
	text-align: center !important;
}

.alg-wc-wl-view-table th {
	text-align: center;
}

.alg-wc-wl-view-table th.product {
	text-align: left;
}

.alg-wc-wl-view-table td {
	padding: 15px;
}

.alg-wc-wl-empty-wishlist {
	display: none;
}

.tt-wl-remove {
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 24px;
	line-height: 1;
	color: #dc3232;
	padding: 0 6px;
	transition: color 0.14s ease-in-out;
}

.tt-wl-remove:hover {
	color: #a91d1d;
}

.tt-wl-remove[disabled] {
	opacity: 0.4;
	cursor: default;
}

/* ============================================================= */
/* Mobile layout                                                 */
/* Thumbnail (25%) left | name top-right | price bottom-right   */
/* Remove button far right. No column labels shown.             */
/* ============================================================= */
@media (max-width: 768px) {
	.alg-wc-wl-view-table thead {
		display: none;
	}

	/* Grid: [thumb] [name + price] [remove] */
	.alg-wc-wl-view-table tbody tr {
		display: grid;
		grid-template-columns: 25% 1fr auto;
		grid-template-rows: auto auto;
		align-items: center;
		border-bottom: 1px solid #eee;
		padding: 10px 0;
		margin-bottom: 0;
	}

	/* Thumbnail spans both rows on the left */
	.alg-wc-wl-view-table td.product-thumbnail {
		grid-column: 1;
		grid-row: 1 / 3;
		display: flex;
		align-items: center;
		padding: 8px;
		width: auto;
		text-align: left !important;
	}

	.alg-wc-wl-view-table td.product-thumbnail img {
		width: 100%;
		max-width: none;
		display: block;
	}

	/* Product name: top-right */
	.alg-wc-wl-view-table td.product-name {
		grid-column: 2;
		grid-row: 1;
		text-align: left !important;
		padding: 8px 8px 4px;
		width: auto;
	}

	/* Price: below the name */
	.alg-wc-wl-view-table td.product-price {
		grid-column: 2;
		grid-row: 2;
		text-align: left !important;
		padding: 4px 8px 8px;
		width: auto;
	}

	/* Remove button: right column, spans both rows */
	.alg-wc-wl-view-table td.product-removal {
		grid-column: 3;
		grid-row: 1 / 3;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 8px;
		width: auto;
		text-align: right !important;
	}

	/* Hide all data-title labels */
	.alg-wc-wl-view-table td::before {
		display: none;
	}

	.alg-wc-wl-view-table tr:nth-child(2n) td {
		background-color: rgba(0, 0, 0, 0.025);
	}
}