/* ==========================================================================
   Nordparts wishlist
   Heart toggle (card + single), header badge, wishlist page grid.
   Loaded site-wide. Kept out of style.css on purpose.
   ========================================================================== */

/* ---------- heart toggle button ---------- */
.wishlist-toggle {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	line-height: 1;
	color: #98a1ab;
	transition: color .15s ease, transform .15s ease;
	-webkit-appearance: none;
	appearance: none;
}
/* Icon must stay a real click target: the JS handler uses event delegation
   (e.target.closest('.wishlist-toggle')), so clicking the <i> climbs to the
   button reliably. pointer-events:none made icon clicks fall THROUGH to
   whatever sat behind the glyph's overflow, so only the text label toggled. */
.wishlist-toggle i { pointer-events: auto; }
.wishlist-toggle:hover { color: #E82020; }
.wishlist-toggle:active { transform: scale(.88); }
.wishlist-toggle.is-active { color: #E82020; }

/* heart sitting over the product image on catalog cards */
ul.products > li { position: relative; }
.wishlist-toggle--card {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 8px rgba(46, 65, 88, .18);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
}
.wishlist-toggle--card:hover { background: #fff; }

/* on the wishlist page the corner control is a "remove": show an × that reads
   as delete — neutral by default, red on hover. */
.wishlist-toggle--remove.is-active { color: #6b7480; }
.wishlist-toggle--remove i { font-size: 18px; }
.wishlist-toggle--remove:hover,
.wishlist-toggle--remove.is-active:hover { color: #E82020; }
.wishlist-toggle--remove:hover { box-shadow: 0 3px 10px rgba(232, 32, 32, .22); }

/* heart used as a labelled button on the single product page */
.wishlist-toggle--single {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #D77A2C; /* soft, not-bright orange so it's noticeable without shouting */
	transition: color .15s ease;
}
.wishlist-toggle--single i { font-size: 18px; color: #D77A2C; transition: color .15s ease; }
.wishlist-toggle--single:hover,
.wishlist-toggle--single.is-active { color: #E82020; }
.wishlist-toggle--single:hover i,
.wishlist-toggle--single.is-active i { color: #E82020; }
.wishlist-toggle--single .wishlist-label-remove { display: none; }
.wishlist-toggle--single.is-active .wishlist-label-add { display: none; }
.wishlist-toggle--single.is-active .wishlist-label-remove { display: inline; }

/* ---------- header heart + count badge ---------- */
.wishlist-li .wishlist-link {
	position: relative;
	display: inline-block;
	color: inherit;
	font-size: 20px;
	line-height: 1;
}
.wishlist-li .wishlist-link:hover { color: #E82020; }
.wishlist-count {
	background: #E82020;
	border-radius: 50%;
	box-shadow: 0 8px 14px 0 rgba(253, 193, 0, .3);
	color: #fff;
	font-size: 12px;
	width: 18px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	position: absolute;
	top: -10px;
	left: 14px;
	display: none;
}
.wishlist-count.has-items { display: inline-block; }

/* ---------- wishlist page ---------- */
#wishlist-app { min-height: 200px; }

.wishlist-empty {
	text-align: center;
	padding: 60px 20px;
	font-family: 'Rubik', sans-serif;
	color: #515252;
}
.wishlist-empty p { font-size: 18px; margin-bottom: 20px; }
.wishlist-empty .button {
	display: inline-block;
	background: #2E4158;
	color: #fff;
	padding: 12px 26px;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 500;
}
.wishlist-empty .button:hover { background: #E82020; color: #fff; }

.wishlist-loading { text-align: center; padding: 60px 0; }
.wishlist-spinner {
	display: inline-block;
	width: 38px;
	height: 38px;
	border: 4px solid #e6e9ec;
	border-top-color: #2E4158;
	border-radius: 50%;
	animation: wishlist-spin .8s linear infinite;
}
@keyframes wishlist-spin { to { transform: rotate(360deg); } }

/* grid + cards — mirror the shop archive product cards so the wishlist page is
   ONE consistent style with the rest of the site. The wishlist page does NOT
   carry the archive's inline styles, so the shop card look is fully redefined
   here, scoped to #wishlist-app (with !important where the global stylesheet
   would otherwise win). The X-remove corner button + spinner/empty states are
   styled above. Discount badges (-NN% / Atlaide līdz) already come through
   because they're inline-styled inside get_price_html(). */
#wishlist-app .wishlist-grid {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px 24px;
}
#wishlist-app .wishlist-grid > li {
	width: auto !important;
	min-width: 0;
	float: none !important;
	margin: 0 !important;
	overflow: visible !important;
	display: flex !important;
	flex-direction: column;
	position: relative;
	background: #fff;
	text-align: left;
}
/* photo: same fixed 154px contain box as the shop, never wider than the cell */
#wishlist-app .wishlist-grid > li > a:first-of-type {
	display: block !important;
	text-align: center;
	margin-bottom: 10px;
}
#wishlist-app .wishlist-grid > li > a:first-of-type img {
	width: auto !important;
	max-width: 100% !important;
	height: 154px !important;
	object-fit: contain;
	margin: 0 auto;
}
#wishlist-app .loop-product {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 15px;
}
/* title: Rubik bold, exactly 3 lines like the shop */
#wishlist-app .loop-product .product-title {
	min-height: 51px;
	max-height: 51px;
	margin: 0 0 4px 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
#wishlist-app .loop-product .product-title a {
	font-family: 'Rubik', sans-serif;
	color: #2E4158;
	font-weight: 700;
	font-size: 16px;
	line-height: 17px;
	text-decoration: none;
}
#wishlist-app .loop-product .product-sku {
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	color: #515252;
	margin: 0 0 4px 0;
}
#wishlist-app .loop-product .product-in-stock {
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	min-height: 58px;
	margin: 0 0 4px 0;
}
#wishlist-app .loop-product .product-in-stock span { color: #515252; }
#wishlist-app .loop-product .product-in-stock .green { color: #5D8D4D; font-weight: 600; }
#wishlist-app .loop-product .product-in-stock .red { color: #C12727; font-weight: 600; }
/* price: keep the modern discount badges, just control spacing; fixed gap below
   so the Atlaide badge never touches the buy row (as in the shop). */
#wishlist-app .loop-product .product-price {
	display: block;
	font-family: 'Rubik', sans-serif;
	margin: 0 0 12px 0;
}
#wishlist-app .loop-product .product-price * { margin-top: 0 !important; margin-bottom: 0 !important; }
/* Non-discounted price (.np-price--plain) is 20px/800 site-wide — on the shop the
   archive's inline rule shrinks it, but the wishlist page has no such override, so
   the number + € rendered oversized and extra-bold. Scale it to match the deal
   "now" price (18px/600) for a consistent, calm price line. */
#wishlist-app .loop-product .product-price .np-price__now,
#wishlist-app .loop-product .product-price .np-price__now b {
	font-size: 18px !important;
	font-weight: 600 !important;
	color: #333438;
}
#wishlist-app .loop-product .product-price .np-price__label { font-size: 14px; color: #515252; }
/* buy row: qty stepper + grey cart button, pinned to the bottom (equal height) */
#wishlist-app .loop-product form.cart {
	display: flex;
	justify-content: space-between;
	margin: auto 0 0 0 !important;
	padding: 0 !important;
}
#wishlist-app .loop-product .number-input { display: flex; flex-wrap: nowrap; }
#wishlist-app .loop-product .cart .minus,
#wishlist-app .loop-product .cart .plus {
	background-color: #F3F3F3 !important;
	border: 1px solid #F3F3F3;
	border-radius: 0;
	color: #515252;
	height: 30px;
	width: 20px;
	font-size: 14px;
	font-family: 'Rubik', sans-serif;
	cursor: pointer;
}
#wishlist-app .loop-product .cart .quantity { width: 30px !important; margin: 0; }
#wishlist-app .loop-product .cart .qty {
	background: #fff !important;
	border: 1px solid #F3F3F3;
	border-radius: 0;
	color: #515252;
	height: 30px;
	width: 30px !important;
	font-family: 'Rubik', sans-serif;
	font-weight: 600;
	font-size: 14px;
	text-align: center;
}
#wishlist-app .loop-product .add_to_cart_button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	height: 30px;
	background: #F3F3F3 !important;
	color: #2E4158 !important;
	border: 1px solid #F3F3F3;
	border-left: 1px solid #fff;
	border-radius: 0;
	font-family: 'Rubik', sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 14px;
	box-shadow: none !important;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	margin: 0 !important;
}
#wishlist-app .loop-product .add_to_cart_button:hover { background: #CACACA !important; }
#wishlist-app .loop-product .add_to_cart_button img {
	height: 20px !important;
	width: 20px !important;
	max-width: none !important;
	margin: 0 !important;
	filter: none;
}

/* tablet: 2-up (mirror the shop) */
@media (min-width: 577px) and (max-width: 768px) {
	#wishlist-app .wishlist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
}
/* mobile: 2-up compact card, cart icon dropped, full-width stepper + button */
@media (max-width: 576px) {
	#wishlist-app .wishlist-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
	#wishlist-app .wishlist-grid > li {
		padding-top: 20px;
		padding-bottom: 14px;   /* keep the buy button off the card's bottom border */
		box-shadow: 0 0 5px 0 rgba(189, 189, 189, .75);
	}
	#wishlist-app .loop-product { padding: 0 10px; }
	#wishlist-app .wishlist-grid > li > a:first-of-type img { height: 120px !important; }
	/* Set the size/line-height on the .product-title element itself (not just the
	   <a>) so 2.6em == exactly 2 lines and -webkit-line-clamp:2 clips cleanly.
	   Sizing only the <a> left the box at the inherited 16px (~41px), so the
	   clamp broke and the 2nd/3rd line spilled over the SKU below. */
	#wishlist-app .loop-product .product-title {
		min-height: 0; max-height: none;
		font-size: 13px;
		line-height: 1.3;
		height: 2.6em;   /* 2 lines * 1.3 */
		-webkit-line-clamp: 2;
		word-break: break-word;
	}
	#wishlist-app .loop-product .product-title a { font-size: 13px; line-height: 1.3; }
	#wishlist-app .loop-product .product-sku { font-size: 11px; }
	#wishlist-app .loop-product .product-in-stock { min-height: 2.6em; font-size: 12px; }
	#wishlist-app .loop-product form.cart { display: block; }
	#wishlist-app .loop-product .number-input {
		width: 100% !important; justify-content: center; gap: 4px; margin-bottom: 10px;
	}
	#wishlist-app .loop-product .number-input > * { height: 34px; }
	#wishlist-app .loop-product .number-input button { width: 34px; min-width: 34px; height: 34px; font-size: 20px; padding: 0; }
	#wishlist-app .loop-product .cart .quantity { width: 42px !important; }
	#wishlist-app .loop-product .cart .qty { width: 42px !important; height: 34px; font-size: 15px; }
	#wishlist-app .loop-product .add_to_cart_button { width: 100% !important; font-size: 14px; height: auto; min-height: 32px; padding: 6px 8px; }
	#wishlist-app .loop-product .add_to_cart_button img { display: none !important; }
	.wishlist-toggle--card { width: 32px; height: 32px; font-size: 14px; top: 6px; right: 6px; }
}