/* === TM · שכבת ליטוש · 26/08/2026 · מקור מתועד === */

/* 0 · ניגודיות — נמדד --muted #7A756E על --bg #F6F5F2 = 4.19:1,
      מתחת ל-4.5 של WCAG AA. #635F58 = 5.82:1.
      112 חוקים משתמשים בטוקן, אפס מהם על רקע כהה. */
body.tm{ --muted:#635F58; }

/* 1 · התנגשות צפים — נמדד ב-360/390/430/1363:
      wa-float 54x54 · bottom:15 · z:130
      cmp-bar  h=51 מובייל / 55 דסקטופ · bottom:0 · z:75
      חפיפה 36-40px בכל ארבעת הרוחבים. השניים אחים ב-DOM
      (הפרש עומק div = 0), ולכן ~ עובד בלי שורת JS אחת.

      ⚠️ הגובה שממנו מתרוממים הוא 72 ולא 55: inc/70-compare.php
         מגדיר max-height:72px על הסרגל. 55 זה מה שנמדד היום,
         72 זה מה שמותר לו להיות. מתרוממים מהתקרה.

      ⚠️ האתר RTL אבל .tm-wa-float מוצמד ב-left פיזי. כל
         padding-inline-start כאן היה שומר מקום בצד ההפוך. */
body.tm .tm-wa-float{ transition:bottom .22s cubic-bezier(.4,0,.2,1); }
body.tm .tm-cmp-bar:not([hidden]) ~ .tm-wa-float{ bottom:88px; }
body.tm:has(.tm-cmp-bar:not([hidden])){ padding-bottom:80px; }

/* במובייל הסרגל היה פס מלא ברוחב המסך. עכשיו כרטיסייה צפה
   וצרה יותר, והוואטסאפ מתרומם מעליה לגמרי — בלי שיניים
   משתלבות ובלי הסתמכות על כיוון הכתיבה. */
@media (max-width:640px){
	body.tm .tm-cmp-bar{
		inset-inline:8px; bottom:8px; border-radius:14px;
		border:1px solid var(--line); padding:9px 12px;
		box-shadow:0 18px 40px -22px rgba(30,22,10,.55);
	}
	body.tm .tm-cmp-bar:not([hidden]) ~ .tm-wa-float{ bottom:96px; }
	body.tm:has(.tm-cmp-bar:not([hidden])){ padding-bottom:88px; }
}

/* 2 · כיווץ הכותרת בגלילה — נמדד: לוגו 52px + padding 14x2 = 80px
      ועוד .nav. הפס השחור אינו דביק ויוצא לבד.
      scroll() נתמך ב-Chrome/Edge/Safari; ב-Firefox פשוט לא קורה
      כלום וזה בדיוק המצב הנוכחי — הידרדרות נקייה. */
@supports (animation-timeline: scroll()){
	@media (prefers-reduced-motion: no-preference){
		body.tm .hdr-main{
			animation:tmShrinkPad linear both; animation-duration:auto;
			animation-timeline:scroll(root block); animation-range:70px 210px;
		}
		body.tm .logo-img{
			animation:tmShrinkLogo linear both; animation-duration:auto;
			animation-timeline:scroll(root block); animation-range:70px 210px;
		}
		body.tm .nav-link{
			animation:tmShrinkNav linear both; animation-duration:auto;
			animation-timeline:scroll(root block); animation-range:70px 210px;
		}
	}
}
@keyframes tmShrinkPad{ to{ padding-block:7px; } }
@keyframes tmShrinkLogo{ to{ height:34px; } }
@keyframes tmShrinkNav{ to{ padding-block:8px; } }

/* 3 · טיפוגרפיה משנית — נמדד ~150 חוקים ב-14px ומטה.
      נוגעים רק בשלושה שהם באמת טקסט קריאה. */
body.tm .nav-link{ font-size:15px; }
body.tm .tm-fcard .tx{ font-size:15px; line-height:1.65; max-width:38ch; }
body.tm .util{ font-size:13.5px; }

/* 4 · המחירון — נמדד: השורה נפרשת על מלוא ה-wrap 1240px,
      העין עוברת כמעט את כל המסך בין התיאור למחיר. */
body.tm #tm-lab-prices .wrap{ max-width:1000px; }
body.tm .tm-prc{ border-collapse:collapse; width:100%; }
body.tm .tm-prc td{
	padding:11px 14px; font-size:15px; line-height:1.55;
	border-bottom:1px solid var(--line); vertical-align:top;
}
body.tm .tm-prc tbody tr:nth-child(odd) td{ background:#FBFAF8; }
body.tm .tm-prc tbody tr:last-child td{ border-bottom:0; }
body.tm .tm-prc td.p{
	width:168px; white-space:nowrap; font-weight:700;
	color:var(--ink); text-align:start;
}
body.tm .tm-prc tr.is-free td.p{ color:var(--green); }
body.tm .tm-prc-group{ margin-bottom:26px; }
body.tm .tm-prc-group h3{
	font-size:19px; letter-spacing:-.01em; padding-bottom:8px;
	border-bottom:2px solid var(--primary);
	display:inline-block; margin-bottom:10px;
}
@media (max-width:640px){
	body.tm .tm-prc td{ padding:10px 8px; font-size:14.5px; }
	body.tm .tm-prc td.p{ width:104px; }
}

/* 5 · טופס התיקון — נמדד: textarea rows=10, כשליש מסך.
      שדות: your-name · your-tel · tm-branch · textarea. */
body.tm .wpcf7-form textarea{ height:156px; min-height:0; resize:vertical; }
body.tm .wpcf7-form input[type=submit]{ width:100%; }
@media (min-width:760px){
	body.tm .wpcf7-form{
		display:grid; grid-template-columns:1fr 1fr; gap:0 14px; align-items:start;
	}
	body.tm .wpcf7-form > *{ grid-column:1 / -1; }
	body.tm .wpcf7-form > p:has(input[name=your-name]){ grid-column:1; }
	body.tm .wpcf7-form > p:has(input[name=your-tel]){ grid-column:2; }
}

/* 6 · כרטיסי השירות — גבוהים ורובם ריק, האייקון קטן ביחס לשטח. */
body.tm .tm-fcard{ padding-block:22px; }
body.tm .tm-fcard .ic{ transform:scale(1.12); }
body.tm .tm-fcard b{ font-size:17px; }

/* 7 · הקוביות הפכו לקישורים — <a class="tm-fcard">.
      בלי איפוס, הן יורשות קו תחתון וצבע קישור. */
body.tm a.tm-fcard{ text-decoration:none; color:inherit; }
body.tm a.tm-fcard:focus-visible{
	outline:2px solid var(--primary); outline-offset:3px;
}

/* 8 · "בחרו את התיקון" — תשעה כפתורים לתשעת עמודי המעבדה.
      עד היום היה אפשר להגיע אליהם רק מרשימה בת 24 קישורים
      בפוטר. שורה ולא כרטיס: השם והמחיר נקראים באותה תנועת עין,
      וזה מה שהלקוח באמת משווה בין תיקון לתיקון. */
body.tm .tm-rgrid{
	display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
body.tm .tm-rbtn{
	display:grid; grid-template-columns:auto 1fr auto;
	align-items:center; gap:13px;
	padding:14px 16px;
	background:var(--surface,#fff);
	border:1px solid var(--line); border-radius:var(--r-md,16px);
	text-decoration:none; color:inherit;
	transition:border-color .16s, transform .16s, box-shadow .16s;
}
body.tm .tm-rbtn:hover{
	border-color:var(--primary);
	transform:translateY(-2px);
	box-shadow:var(--sh-1);
}
body.tm .tm-rbtn:focus-visible{
	outline:2px solid var(--primary); outline-offset:3px;
}
body.tm .tm-rbtn .ic{
	display:grid; place-items:center; width:42px; height:42px;
	border-radius:13px; background:var(--primary-soft,#FCEBDB);
	flex:none;
}
body.tm .tm-rbtn .ic svg{ width:21px; height:21px; color:var(--primary-deep); }
body.tm .tm-rbtn .t{ display:flex; flex-direction:column; gap:3px; min-width:0; }
body.tm .tm-rbtn .t b{ font-size:15.5px; line-height:1.3; color:var(--ink); }
body.tm .tm-rbtn .t i{
	font-style:normal; font-size:13.5px; line-height:1.45; color:var(--muted);
}
body.tm .tm-rbtn .ar svg{
	width:15px; height:15px; color:var(--muted);
	transition:transform .16s;
}
body.tm .tm-rbtn:hover .ar svg{ transform:translateX(-3px); color:var(--primary); }

@media (prefers-reduced-motion:reduce){
	body.tm .tm-rbtn,body.tm .tm-rbtn .ar svg{ transition:none; }
	body.tm .tm-rbtn:hover{ transform:none; }
}
@media (max-width:1000px){
	body.tm .tm-rgrid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
	body.tm .tm-rgrid{ grid-template-columns:1fr; gap:9px; }
	body.tm .tm-rbtn{ padding:12px 13px; gap:11px; }
	body.tm .tm-rbtn .ic{ width:38px; height:38px; border-radius:11px; }
}

/* 9 · הפוטר — נמדד: .f-col a ב-13.5px, קטן מכל טקסט אחר באתר. */
body.tm .f-col a{ font-size:15px; }

/* 10 · הפוטר עבר מארבע עמודות לחמש: "מידע ושירות" בת 24 הקישורים
       נחלקה ל"מעבדה ושירותים" ול"מידע ומדיניות".
       ⚠️ רק מעל 1020. מתחת לזה style.css מקפל לשתי עמודות ואז
          לאחת, וכלל בלי תנאי כאן היה גובר עליהם ושובר מובייל. */
@media (min-width:1021px){
	body.tm .f-grid{ grid-template-columns:1.3fr 1fr 1.05fr 1.05fr 1.2fr; gap:28px; }
}

/* 12 · סבב המחודשים — כרטיס אחד בכל פעם.
       המחלקה tm-rf-stack נוספת ב-JS בלבד. בלי JS העמוד נשאר
       בדיוק כפי שהיה: ארבעה כרטיסים סטטיים, אפס רגרסיה.

       ⚠️ כל 16 הכרטיסים נשארים ברשת ומקובעים לתא לפי data-pos.
          זה כל העניין: אם מסתירים כרטיס ב-display:none, שלושת
          הנותרים זזים למלא את החור.
       ⚠️ visibility ולא רק opacity — כרטיס שקוף בלבד נשאר בסדר
          הטאבים ובעץ הנגישות, וקורא מסך היה מקריא 16 מוצרים. */
body.tm .tm-rf-stack .refurb-slot{
	grid-row:var(--rf-r,auto); grid-column:var(--rf-c,auto);
	opacity:0; visibility:hidden; pointer-events:none; transform:none;
	transition:opacity .55s ease, visibility 0s linear .55s;
}
body.tm .tm-rf-stack .refurb-slot.is-on{
	opacity:1; visibility:visible; pointer-events:auto;
	transition:opacity .55s ease, visibility 0s;
}
body.tm .tm-rf-stack .refurb-slot[data-pos="0"]{ --rf-r:1; --rf-c:1; }
body.tm .tm-rf-stack .refurb-slot[data-pos="1"]{ --rf-r:1; --rf-c:2; }
body.tm .tm-rf-stack .refurb-slot[data-pos="2"]{ --rf-r:2; --rf-c:1; }
body.tm .tm-rf-stack .refurb-slot[data-pos="3"]{ --rf-r:2; --rf-c:2; }

@media (prefers-reduced-motion:reduce){
	body.tm .tm-rf-stack .refurb-slot{ transition:none; }
}

/* 11 · המחירון המלא — אקורדיון סגור בתחתית עמוד המעבדה.
       ‏<details> מקבל כאן מראה של כפתור רחב, כי אחרת הוא נראה
       כמו טקסט עם משולש קטן ואף אחד לא לוחץ עליו. */
body.tm .tm-prc-acc{
	border:1px solid var(--line); border-radius:var(--r-md,16px);
	background:var(--surface,#fff); overflow:hidden;
}
body.tm .tm-prc-acc > summary{
	display:flex; align-items:center; justify-content:space-between;
	flex-wrap:wrap; gap:4px 14px;
	padding:16px 20px; cursor:pointer;
	list-style:none; user-select:none;
	transition:background .16s;
}
body.tm .tm-prc-acc > summary::-webkit-details-marker{ display:none; }
body.tm .tm-prc-acc > summary:hover{ background:#FBFAF8; }
body.tm .tm-prc-acc > summary:focus-visible{
	outline:2px solid var(--primary); outline-offset:-2px;
}
body.tm .tm-prc-acc-t{
	font-weight:700; font-size:16.5px; color:var(--ink);
}
body.tm .tm-prc-acc-s{ font-size:14px; color:var(--muted); }
/* החץ נבנה ב-CSS ולא ב-SVG: אין תלות ב-sprite ואין עוד בקשה. */
body.tm .tm-prc-acc > summary::after{
	content:''; width:9px; height:9px; flex:none;
	border-inline-end:2px solid var(--primary);
	border-block-end:2px solid var(--primary);
	transform:rotate(45deg); margin-block-end:4px;
	transition:transform .18s;
}
body.tm .tm-prc-acc[open] > summary::after{
	transform:rotate(-135deg); margin-block:4px 0;
}
body.tm .tm-prc-acc[open] > summary{ border-block-end:1px solid var(--line); }
body.tm .tm-prc-acc-b{ padding:20px; }
body.tm .tm-prc-acc-b .tm-prc-group:last-child{ margin-bottom:0; }
@media (prefers-reduced-motion:reduce){
	body.tm .tm-prc-acc > summary,
	body.tm .tm-prc-acc > summary::after{ transition:none; }
}
@media (max-width:640px){
	body.tm .tm-prc-acc > summary{ padding:14px 15px; }
	body.tm .tm-prc-acc-b{ padding:14px 10px; }
	body.tm .tm-prc-acc-t{ font-size:15.5px; }
}