/*
 * The wishlist - "Mėgstamos prekės" (O-46, O-111).
 *
 * Two surfaces, one file:
 *   1. `.irkn-wl`  - the heart toggle, wherever it is printed (product card, product page).
 *   2. `.irkn-wl-page` - the wishlist page itself, which is YITH's table inside the shop's frame.
 *
 * ⚠️ WHY SO MANY LONG SELECTORS. The plugin ships six stylesheets of its own and they load on the
 * wishlist page, so every rule below has to out-specify them. The project's rule holds: **a longer
 * selector, never `!important`.** A rule that loses on specificity looks exactly like a rule that was
 * never written, and this shop has already paid for that four times (D-158, D-159).
 *
 * ⚠️ NOTHING HERE USES THE CALL ACCENT (#e8590c). Orange means "telephone us" and nothing else in
 * this design, so the heart is brand blue and the remove link is quiet grey.
 *
 * Rules the file is held to, the same as every other child-theme stylesheet:
 *   - no horizontal scrolling at 360, 768 or 1440
 *   - no tap target under 44px
 *   - the tokens come from `.irkn-land` (assets/landing.css), so the page matches the shop
 */

/* =====================================================================
   1. The heart toggle
   ===================================================================== */

.irkn-wl {
	margin: 0;
}

.irkn-wl .yith-wcwl-add-to-wishlist {
	margin: 0;
}

.irkn-wl .yith-wcwl-add-button,
.irkn-wl .yith-wcwl-wishlistaddedbrowse,
.irkn-wl .yith-wcwl-wishlistexistsbrowse {
	display: block;
	margin: 0;
}

/*
 * The button is a quiet line, not a second button. On a product card the blue `Į krepšelį` is the
 * action and a second filled button beside it would compete with it; on the product page the same is
 * true of the add-to-cart button. 44px of height rather than 44px of box: the line is the target.
 *
 * ⚠️ THE MARKUP IS TWO SHAPES AND BOTH ARE STYLED. The plugin's `add-to-wishlist.php` template puts the
 * link inside a `.yith-wcwl-add-button` wrapper on some versions and prints it directly under
 * `.yith-wcwl-add-to-wishlist` on others - measured on 4.19.1, the second shape is the one that renders
 * here. Targeting only the wrapper would have produced a completely unstyled button, which is exactly
 * the "a rule that matches nothing looks like a rule that was never written" fault of D-158.
 */
.irkn-wl a.add_to_wishlist,
.irkn-wl .yith-wcwl-add-button a,
.irkn-wl .yith-wcwl-wishlistaddedbrowse a,
.irkn-wl .yith-wcwl-wishlistexistsbrowse a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 2px;
	color: var(--irkn-ink2, #43506a);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.irkn-wl a.add_to_wishlist:hover,
.irkn-wl .yith-wcwl-add-button a:hover,
.irkn-wl .yith-wcwl-wishlistaddedbrowse a:hover,
.irkn-wl .yith-wcwl-wishlistexistsbrowse a:hover {
	color: var(--irkn-blue, #203ba6);
	text-decoration: underline;
}

/*
 * The plugin's AJAX spinner. Its own stylesheet is dropped on every page except the wishlist page, so
 * without this rule a small broken-image icon sits beside the label - and `yith_wcwl_ajax_enable` is `no`
 * on this shop, so the spinner has nothing to indicate anyway.
 */
.irkn-wl img.ajax-loading {
	display: none;
}

/* The plugin's own icon. It is an inline SVG drawn with `currentColor`, so it follows the text. */
.irkn-wl svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

/* The state after a click: "Pridėta į mėgstamas prekes" - already chosen, so it is blue. */
.irkn-wl .yith-wcwl-wishlistaddedbrowse .feedback,
.irkn-wl .yith-wcwl-wishlistexistsbrowse .feedback {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--irkn-blue, #203ba6);
	font-size: 14px;
	font-weight: 700;
}

.irkn-wl .feedback p {
	margin: 0;
}

/*
 * The "browse the list" words that `irkn_wl_button_html()` inserts into the plugin's icon-only link.
 * Without this the two halves of the added state run together on one line.
 */
.irkn-wl .irkn-wl__browse {
	margin-left: 8px;
	font-weight: 600;
	text-decoration: underline;
}

/* ---------- on a product card ---------- */

.irkn-card__wl {
	margin: 0;
	/* Sits under the primary action, sharing the card's own gap rather than adding a second one. */
	margin-top: -2px;
}

.irkn-card__wl .yith-wcwl-add-to-wishlist {
	font-size: 13.5px;
}

.irkn-card__wl svg {
	width: 16px;
	height: 16px;
}

/* ---------- on the product page ---------- */

.irkn-prod__wl {
	margin-top: 12px;
}

/* =====================================================================
   2. The wishlist page
   ===================================================================== */

.irkn-wl-page .irkn-wl__title {
	margin: 0 0 18px;
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--irkn-ink, #0e1626);
}

/*
 * YITH's own heading container. The `option_` filter in includes/wishlist.php stops it being printed
 * at all, so this rule is a belt rather than the fix - it only matters if the plugin ever prints the
 * container with an empty title.
 */
.irkn-wl-page .wishlist-title-container {
	display: none;
}

.irkn-wl-page form#yith-wcwl-form {
	margin: 0;
}

.irkn-wl-page table.shop_table.wishlist_table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	border: 1px solid var(--irkn-line, #e4e8f2);
	border-radius: var(--irkn-r, 16px);
	box-shadow: var(--irkn-sh);
	margin: 0 0 18px;
}

.irkn-wl-page table.shop_table.wishlist_table thead th {
	padding: 13px 16px;
	border-bottom: 1px solid var(--irkn-line, #e4e8f2);
	color: var(--irkn-muted, #7d8aa3);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-align: left;
	white-space: nowrap;
}

/* The two heading cells the plugin prints empty (remove and add-to-cart) carry no meaning. */
.irkn-wl-page table.shop_table.wishlist_table thead th.product-remove,
.irkn-wl-page table.shop_table.wishlist_table thead th.product-thumbnail,
.irkn-wl-page table.shop_table.wishlist_table thead th.product-add-to-cart {
	padding: 13px 8px;
}

.irkn-wl-page table.shop_table.wishlist_table tbody td {
	padding: 14px 16px;
	border-top: 1px solid var(--irkn-line, #e4e8f2);
	vertical-align: middle;
	text-align: left;
	/*
	 * ⚠️ OceanWP capitalises table cells, and on an English label that reads as a heading. On a Lithuanian
	 * SENTENCE it is wrong - measured 2026-10-26, the empty state rendered `Mėgstamų Prekių Sąrašas
	 * Tuščias.` in title case. The headings above keep their own uppercase rule; body cells do not.
	 */
	text-transform: none;
}

.irkn-wl-page table.shop_table.wishlist_table tbody tr:first-child td {
	border-top: 0;
}

/* ---------- the product ---------- */

/*
 * The thumbnail. The plugin's own stylesheet sizes it (`48px` wide), so this rule names the classes the
 * table actually carries - `shop_table`, `wishlist_table`, `wishlist_view` - to out-specify it. Measured
 * on the clone 2026-10-26: with one class fewer, the picture computed to **48 x 76**, a squashed box,
 * instead of a square 76.
 */
.irkn-wl-page table.shop_table.wishlist_table.wishlist_view td.product-thumbnail img {
	width: 76px;
	height: 76px;
	max-width: 76px;
	object-fit: contain;
	border-radius: 10px;
	background: #fff;
	display: block;
}

.irkn-wl-page table.shop_table.wishlist_table td.product-name a {
	color: var(--irkn-ink, #0e1626);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
	overflow-wrap: break-word;
}

.irkn-wl-page table.shop_table.wishlist_table td.product-name a:hover {
	color: var(--irkn-blue, #203ba6);
}

.irkn-wl-page table.shop_table.wishlist_table td.product-price {
	font-size: 16px;
	font-weight: 800;
	color: var(--irkn-ink, #0e1626);
	white-space: nowrap;
}

.irkn-wl-page table.shop_table.wishlist_table td.product-price .woocommerce-Price-amount {
	color: var(--irkn-ink, #0e1626);
}

/* Stock: the shop's own two words, `Turime` / `Neturime`, the same pair the cards use. */
.irkn-wl-page .wishlist-in-stock,
.irkn-wl-page .wishlist-out-of-stock {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
}

.irkn-wl-page .wishlist-in-stock {
	background: var(--irkn-blue-lt, #eef2ff);
	color: var(--irkn-blue, #203ba6);
}

.irkn-wl-page .wishlist-out-of-stock {
	background: #fdece0;
	color: #8a4512;
}

/* ---------- the actions ---------- */

/*
 * WooCommerce ships `table.shop_table td.product-remove a.remove` and the plugin adds its own on top, so
 * the `td` and the `table.shop_table` in this selector are load-bearing: measured on the clone
 * 2026-10-26, the shorter form lost and the link rendered **15 x 27** instead of 44 x 44.
 */
.irkn-wl-page table.shop_table.wishlist_table td.product-remove a.remove {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	color: var(--irkn-muted, #7d8aa3);
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
}

.irkn-wl-page table.shop_table.wishlist_table td.product-remove a.remove:hover {
	background: var(--irkn-bg, #f4f6fb);
	color: var(--irkn-ink, #0e1626);
}

/*
 * ⚠️ THIS BUTTON IS CENTRED BY PADDING, NOT BY `align-items`, AND THE REASON MATTERS.
 *
 * The plugin's own stylesheet carries
 *     .wishlist_table .product-add-to-cart a { text-align: center; display: table !important; margin: 0 auto 5px !important; }
 * An `!important` beats ANY selector length, so our `display: inline-flex` never applied. Measured on the
 * clone 2026-10-27, the label sat **2px from the top** of a 44px button and **23px from the bottom** - the
 * owner saw it and asked for the text to be centred.
 *
 * The fix does not fight the `!important`. A `display: table` box does not hand its spare height to the
 * text, so the line is centred by padding instead: 11 + 22 + 11 = 44. `line-height` is stated outright so
 * the arithmetic cannot drift with the theme's font size.
 */
.irkn-wl-page table.shop_table.wishlist_table td.product-add-to-cart a.button,
.irkn-wl-page table.shop_table.wishlist_table td.product-add-to-cart .add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: 11px 18px;
	line-height: 22px;
	text-align: center;
	border: 1px solid transparent;
	border-radius: 11px;
	background: var(--irkn-blue, #203ba6);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.irkn-wl-page table.shop_table.wishlist_table td.product-add-to-cart a.button:hover,
.irkn-wl-page table.shop_table.wishlist_table td.product-add-to-cart .add_to_cart_button:hover {
	background: #1a3089;
	color: #fff;
}

/* ---------- the empty list ---------- */

.irkn-wl-page table.shop_table.wishlist_table td.wishlist-empty {
	padding: 34px 16px;
	text-align: center;
	color: var(--irkn-ink2, #43506a);
	font-size: 15px;
}

/*
 * The "back to the catalogue" link under an empty list. A quiet text link rather than a button: an
 * empty wishlist is not an error, and a large blue button here would compete with the shop's real
 * actions. 44px of height for the thumb, as everywhere else.
 */
.irkn-wl-page .irkn-wl__back {
	margin: 0;
}

.irkn-wl-page .irkn-wl__back a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--irkn-blue, #203ba6);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.irkn-wl-page .irkn-wl__back a:hover {
	text-decoration: underline;
}

/* ---------- on a phone ---------- */

/*
 * YITH's table is a table: six columns on a 360px screen would either scroll sideways or crush the
 * product name. Below 820px each row becomes a small card and the headings go away, so the row reads
 * as picture / name / price / stock / button. The headings are hidden with the clip technique rather
 * than `display:none` so a screen reader still receives the table's structure.
 */
@media (max-width: 820px) {
	.irkn-wl-page table.shop_table.wishlist_table {
		border: 0;
		background: transparent;
		box-shadow: none;
	}

	.irkn-wl-page table.shop_table.wishlist_table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.irkn-wl-page table.shop_table.wishlist_table tbody tr {
		display: grid;
		grid-template-columns: 76px minmax(0, 1fr);
		gap: 6px 12px;
		align-items: start;
		position: relative;
		background: #fff;
		border: 1px solid var(--irkn-line, #e4e8f2);
		border-radius: var(--irkn-r, 16px);
		padding: 14px;
		margin-bottom: 12px;
	}

	.irkn-wl-page table.shop_table.wishlist_table tbody td {
		display: block;
		border: 0;
		padding: 0;
		text-align: left;
	}

	.irkn-wl-page table.shop_table.wishlist_table td.product-thumbnail {
		grid-column: 1;
		grid-row: 1 / span 3;
	}

	.irkn-wl-page table.shop_table.wishlist_table.wishlist_view td.product-thumbnail img {
		width: 76px;
		height: 76px;
		max-width: 76px;
	}

	/*
	 * ⚠️ MEASURED AT AN ASSERTED 375px ON 2026-10-26. The `×` is taken OUT of the grid and pinned to the
	 * card's corner. As a third grid column it measured **0px wide** - the 44px button then overflowed an
	 * empty cell and sat on top of the product name - and as a flex item inside that cell it shrank to
	 * **17 x 46**. Positioned this way it keeps a 44 x 44 target, and the name gets matching padding so
	 * the two can never collide.
	 */
	.irkn-wl-page table.shop_table.wishlist_table td.product-remove {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 44px;
		height: 44px;
	}

	/* The plugin puts the `×` inside a wrapper div; undo the wrapper's own layout. */
	.irkn-wl-page table.shop_table.wishlist_table td.product-remove > div {
		display: flex;
	}

	.irkn-wl-page table.shop_table.wishlist_table td.product-remove a.remove {
		flex: 0 0 auto;
	}

	.irkn-wl-page table.shop_table.wishlist_table td.product-name {
		grid-column: 2;
		grid-row: 1;
		padding-right: 44px;
	}

	.irkn-wl-page table.shop_table.wishlist_table td.product-price {
		grid-column: 2;
		grid-row: 2;
	}

	.irkn-wl-page table.shop_table.wishlist_table td.product-stock-status {
		grid-column: 2;
		grid-row: 3;
		justify-self: start;
	}

	.irkn-wl-page table.shop_table.wishlist_table td.product-add-to-cart {
		grid-column: 1 / -1;
		grid-row: 4;
		margin-top: 4px;
	}

	.irkn-wl-page table.shop_table.wishlist_table td.product-add-to-cart a.button,
	.irkn-wl-page table.shop_table.wishlist_table td.product-add-to-cart .add_to_cart_button {
		width: 100%;
	}

	.irkn-wl-page table.shop_table.wishlist_table td.wishlist-empty {
		display: block;
		padding: 26px 14px;
	}
}