/* Natura — שיפורי כרטיס מוצר (JetWooBuilder)
   נטען רק כשהמתג "עיצוב כרטיסי המוצר" דלוק. אין כאן שינוי במבנה —
   רק סדר, צבע, יישור וריווח. כיבוי המתג מחזיר את המצב הקודם במלואו.

   על ה-!important: העיצוב הקיים של הכרטיסים מוגדר בהגדרות הווידג'ט
   ב-Elementor, ולכן נכתב כסלקטורים מסוג
   `.elementor-302 .elementor-element.elementor-element-XXXX .jet-woo-products …`
   — ספציפיות 0,4,1. אין שום סלקטור סביר מקובץ תוסף שינצח את זה, ומזהי
   הווידג'טים משתנים בכל עריכה בעורך. לכן דריסה מפורשת, ורק על התכונות
   שהעורך באמת קובע. */

.jet-woo-builder-product {
	--nhc-purple: var(--e-global-color-accent, #7030a0);
	--nhc-purple-soft: var(--e-global-color-770c301, #edddff);
	--nhc-ink: var(--e-global-color-text, #161616);
}

/* ---------------------------------------------------- 1. סדר המחירים
   ווקומרס מדפיס <del>ישן</del> ואז <ins>חדש</ins>. ב-RTL זה שם את
   המחיר הישן ראשון בקריאה. הופכים, בלי לגעת ב-DOM. */

.jet-woo-builder-product .jet-woo-product-price .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 9px;
}

.jet-woo-builder-product .jet-woo-product-price .price ins {
	order: 1;
	text-decoration: none;
	font-weight: 700;
	color: var(--nhc-ink);
}

.jet-woo-builder-product .jet-woo-product-price .price del {
	order: 2;
	font-size: .82em;
	font-weight: 500;
	color: #9a9a9a;
	opacity: 1;
	margin-left: 0 !important;   /* העורך מוסיף margin-left:10px; ה-gap כבר מטפל */
	margin-right: 0 !important;
}

/* קורא מסך מקבל את הניסוח המלא של ווקומרס — לא נוגעים בו */
.jet-woo-builder-product .jet-woo-product-price .screen-reader-text {
	order: 3;
}

/* ------------------------------------------------------- 2. תגית מבצע */

.jet-woo-builder-product .jet-woo-product-badge__sale {
	background: var(--nhc-purple) !important;
	background-color: var(--nhc-purple) !important;
	color: #fff !important;
	box-shadow: none !important;
	border-radius: 6px !important;
	font-weight: 700;
	line-height: 1;
}

/* הנחה קטנה — תגית שקטה במקום צעקנית. המחלקה נוספת ב-JS. */
.jet-woo-builder-product .jet-woo-product-badge__sale.nhc-badge--soft {
	background: var(--nhc-purple-soft) !important;
	background-color: var(--nhc-purple-soft) !important;
	color: var(--nhc-purple) !important;
}

/* ------------------------------- 3. יישור: תמונות בגובה אחיד ושתי שורות כותרת
   זו הסיבה האמיתית לכך שהכפתורים לא היו באותו גובה: קובצי התמונות
   בפרופורציות שונות (300×450 לבקבוק, 300×255 לדיפיוזר), ולכן כל מה
   שמתחת לתמונה התחיל בגובה אחר. */

.jet-woo-builder-product .jet-woo-product-thumbnail img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

/* גזירה לשתי שורות. ה-!important על display הוא הכרחי: JetWooBuilder
   קובע לכותרת display:flex, וזה מבטל את -webkit-line-clamp בשקט —
   כותרת ארוכה נשפכה לארבע שורות ודחפה את הכפתור למטה. */
.jet-woo-builder-product .jet-woo-product-title {
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 10px;
}

/* היישור עצמו.
   הכרטיס הוא flex column, והעורך מפזר בו יותר משוליים אוטומטיים אחד:
   גם למחיר וגם לכפתור. שני `auto` בעמודה אחת מחלקים ביניהם את המרווח
   הפנוי — ולכן כרטיס בלי תגיות (למשל סרניטי, שאין לו) קיבל 15px לכל
   אחד והכפתור שלו ירד. זו הייתה הסיבה האמיתית, לא גובה התמונה.

   הפתרון: משאירים שוליים אוטומטיים ב**מקום אחד בלבד** — מתחת לכפתור.
   כל המרווח הפנוי נופל אחריו, ומיקום הכפתור נקבע רק לפי הבלוקים
   שמעליו, שכולם בגובה קבוע. עובד גם עם תגיות אחרי הכפתור וגם בלעדיהן. */

.jet-woo-builder-product .jet-woo-products__inner-box {
	border-radius: 12px;
	overflow: hidden;
	height: 100% !important;
}

.jet-woo-builder-product .jet-woo-product-price {
	margin-top: 0 !important;
	margin-bottom: 4px !important;
}

.jet-woo-builder-product .jet-woo-product-button {
	margin-bottom: auto !important;
}

/* ------------------------------------------------------- 4. הכפתור */

.jet-woo-builder-product .jet-woo-product-button .button,
.jet-woo-builder-product .jet-woo-product-button .button:visited {
	background: var(--nhc-purple) !important;
	background-color: var(--nhc-purple) !important;
	border-color: var(--nhc-purple) !important;
	color: #fff !important;
	border-radius: 8px !important;
	font-weight: 600;
	padding: 9px 14px !important;
	width: auto !important;
	min-width: 130px;
	transition: filter .15s ease;
}

.jet-woo-builder-product .jet-woo-product-button .button:hover,
.jet-woo-builder-product .jet-woo-product-button .button:focus {
	background: var(--nhc-purple) !important;
	background-color: var(--nhc-purple) !important;
	border-color: var(--nhc-purple) !important;
	color: #fff !important;
	filter: brightness(1.12);
}

/* כפתור "הצג עגלה" שמופיע אחרי הוספה — נשאר משני */
.jet-woo-builder-product .jet-woo-product-button .added_to_cart {
	color: var(--nhc-purple) !important;
	font-weight: 600;
}

/* --------------------------------- 5. אותו תיקון סדר מחירים בעמוד המוצר
   ווקומרס מדפיס <del>ישן</del> לפני <ins>חדש</ins> גם כאן, וב-RTL המחיר
   היקר יושב מימין ונקרא ראשון — בדיוק מעל כפתור הקנייה.
   inline-flex ולא flex, כדי לא לשבור את היישור שנקבע בעורך. */

.elementor-widget-woocommerce-product-price .price,
.woocommerce div.product .summary > p.price {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
}

.elementor-widget-woocommerce-product-price .price ins,
.woocommerce div.product .summary > p.price ins {
	order: 1;
	text-decoration: none;
	font-weight: 700;
}

.elementor-widget-woocommerce-product-price .price del,
.woocommerce div.product .summary > p.price del {
	order: 2;
	font-size: .78em;
	font-weight: 500;
	opacity: .65;
	margin: 0 !important;
}

.elementor-widget-woocommerce-product-price .price .screen-reader-text,
.woocommerce div.product .summary > p.price .screen-reader-text {
	order: 3;
}