/**
 * מכון נדב — כרטיס הערכה.
 *
 * Overrides the fixed-height card in consulting-child/style.css (lines 512-539
 * and 739-758), which pins every card to 260px, clips the title box at 50px and
 * absolutely positions the footer button. Everything here is scoped to
 * .elementor-wc-products so nothing else on the site is touched.
 */

.elementor-wc-products ul.products li.product {
	height: auto !important;
	min-height: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	padding: 0 !important;
	overflow: hidden;
	background: var( --mn-card-bg, #fff ) !important;
	border: var( --mn-card-border-w, 1px ) solid var( --mn-card-border, #e3ddd3 ) !important;
	border-radius: var( --mn-card-radius, 6px ) !important;
	box-shadow: var( --mn-card-shadow, 0 1px 2px rgba( 23, 32, 43, 0.05 ), 0 10px 26px -14px rgba( 23, 32, 43, 0.28 ) ) !important;
	transition: transform 0.18s cubic-bezier( 0.2, 0.7, 0.3, 1 ), box-shadow 0.18s ease, border-color 0.18s ease;
}

.elementor-wc-products ul.products li.product:hover {
	transform: translateY( var( --mn-card-lift, -3px ) );
	border-color: var( --mn-card-hover, var( --mn-primary ) ) !important;
	box-shadow: var( --mn-card-shadow-hover, 0 2px 4px rgba( 23, 32, 43, 0.06 ), 0 20px 40px -18px rgba( 23, 32, 43, 0.34 ) ) !important;
}

/* The loop link wraps the banner, title and price. It points at the single
   product page, which the theme redirects to the cart, so the script turns it
   into a quick-view trigger instead. */
.elementor-wc-products ul.products li.product > a.woocommerce-loop-product__link {
	display: flex !important;
	flex-direction: column !important;
	text-decoration: none !important;
	color: inherit;
	box-shadow: none !important;
	cursor: pointer;
}

/* ------------------------------------------------------------------ banner */

.elementor-wc-products .mn-card__art {
	position: relative;
	aspect-ratio: 2 / 1;
	/* Single-column grids give the card ~500px, where a strict 2:1 banner
	   would dominate the card. */
	max-height: 190px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #eee9e1;
	border-bottom: 1px solid #e3ddd3;
}

.elementor-wc-products .mn-card__gradient {
	position: absolute;
	inset: 0;
	display: block;
}

.elementor-wc-products .mn-card__caption {
	position: relative;
	z-index: 1;
	color: #fff;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	padding: 6px 14px;
	text-shadow: 0 1px 10px rgba( 0, 0, 0, 0.3 );
	max-width: 100%;
}

/* A wash under the caption, so the institute name stays readable whatever
   the photo is doing behind it. */
.elementor-wc-products .mn-card__scrim {
	position: absolute;
	inset: 0;
	display: block;
	background: linear-gradient( 180deg, rgba( 10, 12, 16, 0.22 ) 0%, rgba( 10, 12, 16, 0.62 ) 100% );
}

.elementor-wc-products .mn-card__art.has-photo .mn-card__caption {
	color: #fff;
	text-shadow: 0 1px 12px rgba( 0, 0, 0, 0.5 );
}

/* The theme hides every image inside a card; a real product photo has to opt
   back in. Generated banners are markup, so they are unaffected. */
.elementor-wc-products ul.products li.product .mn-card__art img.mn-card__img {
	display: block !important;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.elementor-wc-products ul.products li.product:hover .mn-card__art img.mn-card__img {
	transform: scale( 1.04 );
}

.elementor-wc-products .mn-card__org {
	position: absolute;
	z-index: 2;
	top: 8px;
	inset-inline-start: 8px;
	background: rgba( 255, 255, 255, 0.94 );
	color: #17202b;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	border-radius: 999px;
	padding: 2px 9px;
	max-width: calc( 100% - 16px );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ------------------------------------------------------------------- title */

.elementor-wc-products ul.products li.product .woocommerce-loop-product__title {
	height: auto !important;
	min-height: 0 !important;
	padding: 12px 13px 0 !important;
	margin: 0 !important;
	font-size: var( --mn-title-size, 16px ) !important;
	font-weight: 700;
	line-height: 1.34 !important;
	color: #17202b;
	text-align: start;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.elementor-wc-products ul.products li.product .price {
	display: block;
	padding: 7px 13px 0 !important;
	margin: 0 !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	color: #6b7480 !important;
	text-align: start;
}

/* Information under the title, not a second title: smaller and softer than the
   kit's name, the figures lined up. */
.elementor-wc-products ul.products li.product .price .amount,
.elementor-wc-products ul.products li.product .price .mn-card__amount {
	font-size: 15px;
	font-weight: 500;
	color: #4a5563;
	font-variant-numeric: tabular-nums;
}

.elementor-wc-products ul.products li.product .price .mn-card__from {
	font-size: 13px;
	font-weight: 400;
	color: #8b949f;
}

.elementor-wc-products ul.products li.product .author {
	display: none !important;
}

/* ------------------------------------------------------------------- plans */

.elementor-wc-products ul.products li.product form.cart {
	margin: 0 !important;
	padding: 10px 13px 13px;
	display: flex;
	flex-direction: column !important;
	gap: 9px;
	margin-top: auto !important;
}

/* The real <select> still drives WooCommerce; the buttons below mirror it. */
.elementor-wc-products ul.products li.product table.variations {
	display: none !important;
}

.elementor-wc-products .mn-card__plansrow {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.elementor-wc-products .mn-card__plan {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid var( --mn-plan-border, #ddd6cb );
	background: var( --mn-plan-bg, #fbf9f6 );
	color: var( --mn-plan-text, #4a5563 );
	border-radius: var( --mn-plan-radius, 4px );
	padding: 5px 7px;
	font-size: var( --mn-plan-size, 12.5px );
	font-weight: var( --mn-plan-weight, 600 );
	line-height: 1.35;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
	font-family: inherit;
}

.elementor-wc-products .mn-card__plan:hover {
	border-color: var( --mn-plan-active-border, var( --mn-primary ) );
	color: var( --mn-plan-active-text, #17202b );
}

/* On a card the price line above already says it; the quick view shows it on
   each plan (mn-quickview.css). */
body.mn-flow-button .elementor-wc-products .mn-card__planprice {
	display: none;
}

/* Tinted rather than filled: the plan is a choice, "הוספה לסל" is the action,
   and only one of them should carry solid orange. */
.elementor-wc-products .mn-card__plan.is-active {
	background: var( --mn-plan-active-bg, var( --mn-primary-tint ) );
	border-color: var( --mn-plan-active-border, var( --mn-primary ) );
	color: var( --mn-plan-active-text, #17202b );
	box-shadow: inset 0 0 0 1px var( --mn-plan-active-border, var( --mn-primary ) );
}

/* The buy button pressed before a plan was chosen: a word under the plans,
   and one pulse across them. */
.mn-card__pick {
	position: relative;
	display: none;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	padding: 6px 10px;
	border: 1px solid var( --mn-primary-line );
	border-radius: 4px;
	background: var( --mn-primary-tint );
	color: var( --mn-primary-ink );
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
}

.mn-card__pick.is-on {
	display: flex;
	animation: mn-pick-in 0.18s ease-out;
}

/* A bubble's tail, pointing up at the plans. Physical sides on purpose: it is
   a shape, not text, and must not mirror in RTL. */
.mn-card__pick.is-on::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 50%;
	width: 8px;
	height: 8px;
	margin-left: -4px;
	background: var( --mn-primary-tint );
	border-top: 1px solid var( --mn-primary-line );
	border-left: 1px solid var( --mn-primary-line );
	transform: rotate( 45deg );
}

.mn-card__plansrow.is-nudge .mn-card__plan {
	animation: mn-plan-nudge 0.9s ease 1;
}

@keyframes mn-pick-in {
	from { opacity: 0; transform: translateY( -3px ); }
	to   { opacity: 1; transform: none; }
}

@keyframes mn-plan-nudge {
	35% { border-color: var( --mn-primary ); box-shadow: 0 0 0 3px var( --mn-primary-a35 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.mn-card__pick.is-on,
	.mn-card__plansrow.is-nudge .mn-card__plan {
		animation: none;
	}

	.mn-card__plansrow.is-nudge .mn-card__plan {
		border-color: var( --mn-primary );
	}
}

/* ------------------------------------------------------------------ footer */

.elementor-wc-products ul.products li.product .single_variation_wrap {
	position: static !important;
	width: auto !important;
	margin: 0 !important;
	display: block !important;
}

.elementor-wc-products ul.products li.product .woocommerce-variation {
	display: none !important;
}

/* Keep the button a positioning context: the theme absolutely positions the
   chevron inside `.icon_right` buttons, and it escapes if this goes static. */
.elementor-wc-products ul.products li.product .single_add_to_cart_button {
	position: relative !important;
	width: 100% !important;
	height: var( --mn-buy-height, 46px ) !important;
	border-radius: var( --mn-buy-radius, 4px ) !important;
	border: var( --mn-buy-border-w, 0px ) solid var( --mn-buy-border, transparent ) !important;
	background-color: var( --mn-buy-bg, var( --mn-primary ) ) !important;
	/* A second colour makes it a gradient; without one, the same colour twice. */
	background-image: linear-gradient( var( --mn-buy-angle, 135deg ), var( --mn-buy-bg, var( --mn-primary ) ), var( --mn-buy-bg2, var( --mn-buy-bg, var( --mn-primary ) ) ) ) !important;
	color: var( --mn-buy-text, var( --mn-buy-text-auto, var( --mn-on-primary ) ) ) !important;
	font-size: var( --mn-buy-size, 17px ) !important;
	/* Bold (the owner asked, 24/09/2026): the widget's own button typography,
	   weight 500, used to win here. */
	font-weight: var( --mn-buy-weight, 700 ) !important;
	line-height: calc( var( --mn-buy-height, 46px ) - 2 * var( --mn-buy-border-w, 0px ) ) !important;
	padding: 0 !important;
	transition: background-color 0.15s ease;
}

.elementor-wc-products ul.products li.product .single_add_to_cart_button i,
.mn-qv-foot .single_add_to_cart_button i {
	font-size: 13px;
	opacity: var( --mn-buy-arrow, 1 );
}

.elementor-wc-products ul.products li.product .single_add_to_cart_button:hover {
	background-color: var( --mn-buy-hover-bg, var( --mn-buy-hover-auto, var( --mn-primary-strong ) ) ) !important;
	background-image: none !important;
	color: var( --mn-buy-hover-text, var( --mn-buy-hover-text-auto, var( --mn-on-primary-strong ) ) ) !important;
}

/* No plan chosen yet: a lighter orange, still plainly a button — pressing it
   points at the plans (mn-product-card.js). The same in the quick view. */
.elementor-wc-products ul.products li.product .single_add_to_cart_button.disabled,
.elementor-wc-products ul.products li.product .single_add_to_cart_button.wc-variation-selection-needed,
.mn-qv-foot .single_add_to_cart_button.disabled,
.mn-qv-foot .single_add_to_cart_button.wc-variation-selection-needed {
	opacity: 1 !important;
	cursor: pointer !important;
	background-color: var( --mn-buy-idle-bg, var( --mn-buy-idle-auto, var( --mn-primary-soft ) ) ) !important;
	background-image: none !important;
	color: var( --mn-buy-idle-text, var( --mn-buy-idle-text-auto, var( --mn-on-primary-soft ) ) ) !important;
}

.elementor-wc-products ul.products li.product .single_add_to_cart_button.disabled:hover,
.elementor-wc-products ul.products li.product .single_add_to_cart_button.wc-variation-selection-needed:hover,
.mn-qv-foot .single_add_to_cart_button.disabled:hover,
.mn-qv-foot .single_add_to_cart_button.wc-variation-selection-needed:hover {
	background-color: var( --mn-buy-idle-hover-auto, var( --mn-primary-soft-strong ) ) !important;
	color: var( --mn-buy-idle-text, var( --mn-buy-idle-text-auto, var( --mn-on-primary-soft-strong ) ) ) !important;
}

/* ------------------------------------------------------------- trust line */

/* Under the buy button — on the card and in the quick-view footer alike.
   Regular weight and a soft grey: reassurance, not a second call to action.
   Two halves across the button's width with a hairline between them; in a card
   too narrow for both on one line, each icon stands over its words instead. */
.mn-card__trust {
	container: mntrust / inline-size;
	display: var( --mn-trust-hide, grid );
	grid-template-columns: 1fr 1fr;
	align-items: center;
	margin: 2px 0 0 !important;
	padding: 0;
	font-size: var( --mn-trust-size, 12.5px );
	font-weight: 400;
	line-height: 1.4;
	color: var( --mn-trust-text, #6b7480 );
}

.mn-card__trustitem {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 0;
	padding: 1px 4px;
	white-space: nowrap;
}

.mn-card__trustitem + .mn-card__trustitem {
	border-inline-start: 1px solid #e6dfd6;
}

@container mntrust ( max-width: 215px ) {
	.mn-card__trustitem {
		flex-direction: column;
		gap: 3px;
	}

	.mn-card__trustitem + .mn-card__trustitem {
		border-inline-start: 0;
	}
}

/* Browsers without container queries: one centred line that may wrap. */
@supports not ( container-type: inline-size ) {
	.mn-card__trust {
		display: var( --mn-trust-hide, flex );
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px 14px;
	}

	.mn-card__trustitem + .mn-card__trustitem {
		border-inline-start: 0;
	}
}

.mn-card__trustitem svg {
	flex: none;
	width: 13px;
	height: 13px;
	color: var( --mn-trust-icon, var( --mn-primary-strong ) );
}

/* ------------------------------------------------------------ small screens */

@media ( max-width: 767px ) {
	.elementor-wc-products .mn-card__caption {
		font-size: 19px;
	}

	.elementor-wc-products ul.products li.product .woocommerce-loop-product__title {
		font-size: var( --mn-title-size, 17px ) !important;
		-webkit-line-clamp: 3;
	}

	.elementor-wc-products .mn-card__plan {
		font-size: var( --mn-plan-size, 13.5px );
		padding: 7px 9px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.elementor-wc-products ul.products li.product,
	.elementor-wc-products ul.products li.product .mn-card__art img.mn-card__img {
		transition: none;
	}

	.elementor-wc-products ul.products li.product:hover {
		transform: none;
	}
}