/* Decoretz Wood Configurator – עיצוב חזית */

.dwc-configurator {
	--dwc-accent: #8a5a2b;
	--dwc-surface: #ffffff;
	--dwc-text: #2b2b2b;
	--dwc-muted: #6f6f6f;
	--dwc-border: #e3ddd4;
	--dwc-bg: #faf8f5;
	--dwc-radius: 12px;
	--dwc-error: #b3261e;

	color: var(--dwc-text);
	background: var(--dwc-bg);
	border-radius: var(--dwc-radius);
	padding: clamp(16px, 3vw, 32px);
	box-sizing: border-box;
}

.dwc-configurator *,
.dwc-configurator *::before,
.dwc-configurator *::after {
	box-sizing: inherit;
}

.dwc-notice {
	padding: 16px;
	border: 1px dashed #c9b79b;
	border-radius: 10px;
	background: #fdf8f0;
	color: #6b4b22;
}

/* ---------- כותרות ---------- */

.dwc-header {
	margin-bottom: 20px;
}

.dwc-heading {
	margin: 0 0 6px;
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	line-height: 1.25;
}

.dwc-subheading {
	margin: 0;
	/* שורה קצרה יותר קלה לקריאה. ניתן לשינוי בפקד "רוחב" שבווידג'ט. */
	max-width: 60%;
	color: var(--dwc-muted);
}

/* ---------- סרגל שלבים ---------- */

/* ---------- סרגל השלבים: מסילת התקדמות שהשלבים יושבים עליה ---------- */

/*
 * המסילה נמתחת לרוחב המלא, וכל שלב ממוקם עליה לפי האחוז שבו הוא מתחיל
 * (‎--dwc-step-at, נקבע ב-PHP). הכיוון RTL מטופל דרך inset-inline-start,
 * כך שהשלב הראשון יושב בימין והמילוי גדל לכיוון שמאל – כמו שהעין מצפה.
 */
.dwc-steps {
	--dwc-step-size: 30px;
	--dwc-track-height: 6px;

	/*
	 * ברירת המחדל: בדיוק רוחב עמודת הטופס שמתחת – מה שנשאר אחרי עמודת
	 * הסיכום והרווח שביניהן. בשלב האחרון העמודות שוות, ולכן זה חצי.
	 * הפקד "רוחב הסרגל" שבווידג'ט גובר על זה כשמגדירים אותו.
	 */
	max-width: calc(100% - var(--dwc-side-width) - var(--dwc-layout-gap));
	margin-bottom: 26px;
}

.dwc-steps-rail {
	position: relative;
	/* הסמנים, רווח, ואז שורת השמות שמתחתיהם. */
	min-height: calc(var(--dwc-step-size) + 24px);
}

.dwc-progress-track {
	position: absolute;
	inset-inline: 0;
	/* ממורכז אנכית על הסמנים. */
	top: calc((var(--dwc-step-size) - var(--dwc-track-height)) / 2);
	height: var(--dwc-track-height);
	border-radius: 999px;
	background: var(--dwc-border);
	overflow: hidden;
}

/*
 * המילוי הוא בלוק בתוך מסמך RTL, ולכן הוא מתחיל מהקצה הימני מעצמו.
 * ה-JS קובע רק את הרוחב באחוזים.
 */
.dwc-progress-fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 999px;
	background: var(--dwc-accent);
	transition: width 0.35s ease;
}

.dwc-steps-bar {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dwc-step-pill {
	position: absolute;
	top: 0;
	inset-inline-start: var(--dwc-step-at, 0%);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.dwc-step-num,
.dwc-step-finish {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--dwc-step-size);
	height: var(--dwc-step-size);
	border: 2px solid var(--dwc-border);
	border-radius: 50%;
	/* רקע אטום, אחרת המסילה נראית מבעד לסמן. */
	background: var(--dwc-surface);
	color: var(--dwc-muted);
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.dwc-step-label {
	white-space: nowrap;
	font-size: 0.86rem;
	color: var(--dwc-muted);
	transition: color 0.2s ease;
}

.dwc-step-pill.is-active .dwc-step-num {
	border-color: var(--dwc-accent);
	color: var(--dwc-accent);
}

.dwc-step-pill.is-active .dwc-step-label {
	color: var(--dwc-accent);
	font-weight: 600;
}

.dwc-step-pill.is-done .dwc-step-num {
	border-color: var(--dwc-accent);
	background: var(--dwc-accent);
	color: #fff;
}

.dwc-step-pill.is-done .dwc-step-label {
	color: var(--dwc-text);
}

/* סמן הסיום בקצה המסילה. */
.dwc-step-finish {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
}

.dwc-configurator .dwc-step-finish svg {
	width: 60%;
	height: 60%;
	fill: none;
	stroke: currentColor;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.dwc-step-finish.is-done {
	border-color: var(--dwc-accent);
	background: var(--dwc-accent);
	color: #fff;
}

.dwc-progress-value {
	/* שורה משלו מעל המסילה, כדי שהמסילה תתפוס את מלוא רוחב העמודה. */
	display: block;
	margin-bottom: 6px;
	text-align: end;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--dwc-accent);
	font-variant-numeric: tabular-nums;
}

/* במסך צר השמות מתקצרים, ומתחת לזה נשארים רק הסמנים על המסילה. */
@media (max-width: 720px) {
	.dwc-step-label {
		font-size: 0.76rem;
	}
}

@media (max-width: 520px) {
	.dwc-step-label {
		display: none;
	}

	.dwc-steps-rail {
		min-height: var(--dwc-step-size);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dwc-progress-fill,
	.dwc-step-num,
	.dwc-step-finish,
	.dwc-step-label {
		transition: none;
	}
}
/* ---------- פריסה ---------- */

/*
 * רוחב עמודת הסיכום והרווח בין העמודות מוגדרים כמשתנים, כי מסילת
 * ההתקדמות שמעל הטופס נגזרת מהם – כך היא נשארת בדיוק באורך העמודה
 * הימנית שמתחתיה בלי לשכפל את המספרים בשני מקומות.
 */
.dwc-configurator {
	--dwc-side-width: 300px;
	--dwc-layout-gap: 24px;
}

.dwc-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--dwc-side-width);
	gap: var(--dwc-layout-gap);
	align-items: start;
}

@media (max-width: 880px) {
	.dwc-layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

.dwc-pane {
	display: none;
}

.dwc-pane.is-active {
	display: block;
	animation: dwc-fade 0.25s ease;
}

@keyframes dwc-fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.dwc-pane.is-active { animation: none; }
}

.dwc-pane-title {
	margin: 0 0 14px;
	font-size: 1.15rem;
}

/* ---------- כרטיסי פלטות ---------- */

.dwc-panel-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

@media (min-width: 720px) {
	.dwc-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dwc-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.dwc-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.dwc-panel-card {
	display: flex;
	flex-direction: column;
	height: 100%; /* כל הכרטיסים בשורה מסתיימים באותו גובה, גם כשהתיאורים באורך שונה */
	background: var(--dwc-surface);
	border: 2px solid var(--dwc-border);
	border-radius: var(--dwc-radius);
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.dwc-panel-card:hover {
	border-color: var(--dwc-accent);
	transform: translateY(-2px);
}

.dwc-panel-card:focus-within {
	outline: 2px solid var(--dwc-accent);
	outline-offset: 2px;
}

.dwc-panel-card.is-selected {
	border-color: var(--dwc-accent);
	box-shadow: 0 6px 18px rgba(138, 90, 43, 0.18);
}

.dwc-panel-media {
	display: block;
	height: var(--dwc-media-height, 180px);
	background: var(--dwc-bg);
	overflow: hidden;
}

/*
 * ה-!important נדרש כדי לגבור על ערכות נושא שכופות img{height:auto}
 * (בין היתר Hello Elementor) – בלעדיו התמונות חוזרות לגבהים לא אחידים.
 */
.dwc-configurator .dwc-panel-media img,
.dwc-configurator .dwc-swatch {
	display: block;
	width: 100%;
	max-width: none;
	height: 100% !important;
	object-fit: var(--dwc-media-fit, cover);
	/* שני צירים נפרדים, כדי שכל אחד מהם ניתן לשינוי בפני עצמו בווידג'ט. */
	object-position: var(--dwc-media-pos-x, 50%) var(--dwc-media-pos-y, 50%);
}

/*
 * בנייד התמונה נצמדת לתחתית המסגרת במקום להתמרכז בה.
 * כשמקטינים את גובה המסגרת, החיתוך הממורכז אוכל את שני הקצוות –
 * וקצה הפלטה, שהוא בדיוק מה שמעניין לראות, נעלם ראשון.
 * ניתן לשינוי במחווני "מוקד החיתוך" שבווידג'ט, בנפרד לכל מכשיר.
 */
@media (max-width: 767px) {
	.dwc-configurator .dwc-panel-media {
		--dwc-media-pos-y: 100%;
	}
}

.dwc-panel-pick {
	display: block;
	cursor: pointer;
}

.dwc-panel-media {
	position: relative;
}

/* סימן וי על פלטה שנבחרה – חיווי ברור שאפשר לבחור יותר מאחת. */
.dwc-panel-check {
	position: absolute;
	inset-inline-end: 8px;
	top: 8px;
	width: 26px;
	height: 26px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	transition: background 0.15s ease;
}

.dwc-panel-check::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 7px;
	height: 12px;
	border: solid transparent;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg) translate(-1px, -1px);
}

.dwc-panel-card.is-selected .dwc-panel-check {
	background: var(--dwc-accent);
}

.dwc-panel-card.is-selected .dwc-panel-check::after {
	border-color: #fff;
}

/* ---------- פריט: פלטה שנבחרה, עם המידות שלה ---------- */

.dwc-item {
	margin-bottom: 18px;
	padding: 16px;
	background: var(--dwc-surface);
	border: 1px solid var(--dwc-border);
	border-radius: var(--dwc-radius);
}

.dwc-item-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--dwc-border);
}

.dwc-item-thumb {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	object-fit: cover;
	display: block;
}

.dwc-item-headings {
	flex: 1;
	min-width: 0;
}

.dwc-item-title {
	margin: 0;
	font-size: 1.05rem;
}

/* סיכום המידות, מוצג רק כשהכרטיס נעול. */
.dwc-item-summary {
	display: none;
	margin: 3px 0 0;
	color: var(--dwc-muted);
	font-size: 0.85rem;
	line-height: 1.5;
}

.dwc-item.is-locked .dwc-item-summary {
	display: block;
}

/* אייקוני הכרטיס: X להסרה, עיפרון לעריכה, וי לאישור. */
.dwc-configurator .dwc-item-head svg,
.dwc-configurator .dwc-item-confirm svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}

.dwc-configurator .dwc-item-remove {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--dwc-border);
	border-radius: 50%;
	background: none;
	color: var(--dwc-muted);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.dwc-configurator .dwc-item-remove:hover {
	border-color: var(--dwc-error);
	color: var(--dwc-error);
}

.dwc-configurator .dwc-item-edit {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	border: 1px solid var(--dwc-accent);
	border-radius: 999px;
	background: none;
	color: var(--dwc-accent);
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
}

.dwc-configurator .dwc-item-edit:hover {
	background: var(--dwc-accent);
	color: #fff;
}

/* ---------- אישור ונעילה ---------- */

/*
 * התצוגה המקדימה בצד ההתחלה והכפתור בצד הסיום (בעברית: שמאל).
 * flex-end מיישר את הכפתור לקו התחתון של התצוגה המקדימה, כך שהוא
 * יושב בפינה התחתונה של הכרטיס ולא מרחף באמצע.
 */
.dwc-item-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	margin-top: 16px;
}

/* במסכים צרים הכפתור יורד מתחת לתצוגה המקדימה ונשאר צמוד לצד הסיום. */
@media (max-width: 520px) {
	.dwc-item-foot {
		justify-content: flex-end;
	}
}

.dwc-configurator .dwc-item-confirm {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 22px;
	border: 2px solid var(--dwc-accent);
	border-radius: 999px;
	background: var(--dwc-accent);
	color: #fff;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

.dwc-configurator .dwc-item-confirm:hover {
	opacity: 0.9;
}

/* הכרטיס הנעול: נשארת רק שורת הכותרת והסיכום. */
.dwc-item.is-locked {
	background: var(--dwc-bg);
	border-color: var(--dwc-accent);
}

.dwc-item.is-locked .dwc-item-head {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.dwc-item.is-locked .dwc-fields,
.dwc-item.is-locked .dwc-item-foot {
	display: none;
}

.dwc-pane-note,
.dwc-empty-note {
	margin: -6px 0 14px;
	color: var(--dwc-muted);
	font-size: 0.9rem;
}

.dwc-panel-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 0 12px 12px;
	flex: 1; /* הגוף תופס את הגובה שנשאר, כדי שהמחיר יוכל להיצמד לתחתית */
}

.dwc-panel-name {
	display: block;
	padding: 12px 12px 4px;
	font-weight: 700;
}

.dwc-panel-desc {
	margin: 0;
	font-size: 0.85rem;
	color: var(--dwc-muted);
	line-height: 1.5;

	/* קיצוץ למספר השורות שנקבע בווידג'ט; ברירת מחדל שורה אחת. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--dwc-desc-lines, 1);
	line-clamp: var(--dwc-desc-lines, 1);
	overflow: hidden;
}

.dwc-panel-desc.is-expanded {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
	overflow: visible;
}

/*
 * סלקטור ארוך בכוונה: ערכות נושא מעצבות כל button בכללים ספציפיים
 * (למשל .elementor-widget-container button), ואיפוס קצר מפסיד להם.
 * מאופסים כאן גם outline וגם box-shadow – שניהם נראים על המסך כמו מסגרת.
 */
.dwc-configurator .dwc-panel-body .dwc-readmore,
.dwc-configurator button.dwc-readmore {
	width: auto;
	padding: 2px 0;
	border: 0 solid transparent;
	border-radius: 0;
	outline: 0;
	background: none;
	box-shadow: none;
	color: var(--dwc-accent);
	text-decoration: underline;
	cursor: pointer;
}

/*
 * הפונט מופרד לכלל בעדיפות נמוכה מזה שמעליו, כדי שפקד הטיפוגרפיה
 * של "למידע נוסף" בווידג'ט יגבר עליו תמיד – הכלל שמעל חייב להיות
 * ספציפי כדי לאפס כפתורים של ערכות נושא, וזה היה מנצח גם את אלמנטור.
 */
.dwc-readmore {
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
}

/* מוחזר רק בניווט מקלדת, כדי לא לפגוע בנגישות. */
.dwc-configurator .dwc-readmore:focus-visible {
	outline: 2px solid var(--dwc-accent);
	outline-offset: 2px;
}

.dwc-configurator .dwc-readmore:hover {
	opacity: 0.75;
}

.dwc-panel-price {
	margin-top: auto; /* נצמד לתחתית הכרטיס, כך שכל המחירים בשורה מיושרים */
	padding-top: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--dwc-accent);
}

/* ---------- שדות ---------- */

.dwc-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
}

.dwc-field-wide {
	grid-column: 1 / -1;
}

.dwc-field label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 0.92rem;
}

/*
 * ברירת המחדל של הפונט בשדות יושבת בכלל נפרד בעל עדיפות נמוכה בכוונה.
 * הכלל שמתחתיו משתמש ב-[type=...] כדי לגבור על ערכות נושא, וזה מעלה את
 * העדיפות שלו עד כדי תיקו עם מה שאלמנטור מייצר לפקד הטיפוגרפיה – ואז
 * המנצח נקבע לפי סדר טעינת קבצי הסגנון, שמשתנה בין התקנות. הפרדה כאן
 * מבטיחה שפקד הטיפוגרפיה בווידג'ט תמיד גובר.
 */
.dwc-field input,
.dwc-field select,
.dwc-field textarea {
	font: inherit;
	font-size: 1rem;
}

.dwc-configurator .dwc-field input[type="text"],
.dwc-configurator .dwc-field input[type="tel"],
.dwc-configurator .dwc-field input[type="email"],
.dwc-configurator .dwc-field input[type="number"],
.dwc-configurator .dwc-field select,
.dwc-configurator .dwc-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--dwc-border);
	border-radius: 8px;
	background-color: var(--dwc-surface);
	color: var(--dwc-text);
	box-shadow: none;
}

/*
 * ערכות נושא רבות מחליפות רקע וצבע טקסט בפוקוס, ולפעמים לצבע כהה מאוד.
 * מקבעים כאן את שניהם כדי שהשדה יישאר זהה בזמן ההקלדה.
 */
.dwc-configurator .dwc-field input:focus,
.dwc-configurator .dwc-field select:focus,
.dwc-configurator .dwc-field textarea:focus {
	outline: 2px solid var(--dwc-accent);
	outline-offset: 1px;
	border-color: var(--dwc-accent);
	background-color: var(--dwc-surface);
	color: var(--dwc-text);
}

/* המילוי האוטומטי של הדפדפן צובע רקע משלו; ה-inset shadow הוא הדרך לעקוף אותו. */
.dwc-configurator .dwc-field input:-webkit-autofill,
.dwc-configurator .dwc-field input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--dwc-text);
	box-shadow: 0 0 0 1000px var(--dwc-surface) inset;
}

.dwc-field input.has-error,
.dwc-field select.has-error {
	border-color: var(--dwc-error);
}

.dwc-hint {
	display: block;
	margin-top: 4px;
	font-size: 0.8rem;
	color: var(--dwc-muted);
}

.dwc-error {
	display: none;
	margin-top: 4px;
	font-size: 0.82rem;
	color: var(--dwc-error);
}

.dwc-error.is-visible {
	display: block;
}

/* ---------- תצוגה מקדימה של המידות ---------- */

.dwc-preview {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 22px;
	padding: 18px;
	background: var(--dwc-surface);
	border: 1px solid var(--dwc-border);
	border-radius: var(--dwc-radius);
}

/*
 * הפלטה מוצגת שכובה, כך שנראים גם הרוחב והאורך וגם העובי.
 * הגוף בנוי משלוש פאות ב-CSS 3D: פני הפלטה ושתי דפנות.
 * המידות מגיעות מה-JS דרך שלושת המשתנים, והצבעים מ-PHP לפי הפלטה.
 * המאפיינים כאן פיזיים (left/top) ולא לוגיים בכוונה – הגיאומטריה
 * של הסיבובים חייבת להישאר זהה גם במסמך RTL.
 */
.dwc-preview-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 150px;
	perspective: 900px;
}

.dwc-preview-slab {
	--dwc-slab-w: 55px;
	--dwc-slab-h: 110px;
	--dwc-slab-t: 7px;
	--dwc-slab-top: #c8a97e;
	--dwc-slab-front: #94795a;
	--dwc-slab-side: #705a43;

	position: relative;
	width: var(--dwc-slab-w);
	height: var(--dwc-slab-h);
	transform-style: preserve-3d;
	transform: rotateX(58deg) rotateZ(38deg) translateZ(calc(var(--dwc-slab-t) / -2));
	transition: width 0.25s ease, height 0.25s ease;
}

.dwc-slab-face {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
}

.dwc-slab-face--top {
	width: var(--dwc-slab-w);
	height: var(--dwc-slab-h);
	background: var(--dwc-slab-top);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
	transform: translateZ(var(--dwc-slab-t));
}

/* הדופן הקדמית: רצועה בגובה העובי, מורמת מקצה האורך. */
.dwc-slab-face--front {
	width: var(--dwc-slab-w);
	height: var(--dwc-slab-t);
	background: var(--dwc-slab-front);
	transform-origin: top;
	transform: translateY(var(--dwc-slab-h)) rotateX(90deg);
}

/* הדופן הצדדית: רצועה ברוחב העובי, מורמת מקצה הרוחב. */
.dwc-slab-face--side {
	width: var(--dwc-slab-t);
	height: var(--dwc-slab-h);
	background: var(--dwc-slab-side);
	transform-origin: left;
	transform: translateX(var(--dwc-slab-w)) rotateY(-90deg);
}

/* בהעדפת תנועה מופחתת נשארת התוצאה הסופית, בלי המעבר בין המידות. */
@media (prefers-reduced-motion: reduce) {
	.dwc-preview-slab {
		transition: none;
	}
}

.dwc-preview-caption {
	font-size: 0.85rem;
	color: var(--dwc-muted);
}

/* ---------- חיתוכים ---------- */

.dwc-cuts {
	display: grid;
	gap: 12px;
}

.dwc-cut {
	background: var(--dwc-surface);
	border: 2px solid var(--dwc-border);
	border-radius: var(--dwc-radius);
	transition: border-color 0.2s ease;
}

.dwc-cut.is-selected {
	border-color: var(--dwc-accent);
}

.dwc-cut-main {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px;
	cursor: pointer;
}

.dwc-cut-main input[type="checkbox"] {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	accent-color: var(--dwc-accent);
	flex: none;
}

.dwc-cut-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
}

.dwc-cut-name {
	font-weight: 600;
}

.dwc-cut-desc {
	font-size: 0.85rem;
	color: var(--dwc-muted);
	line-height: 1.5;
}

.dwc-cut-price {
	font-weight: 600;
	color: var(--dwc-accent);
	white-space: nowrap;
}

.dwc-cut-qty {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 14px 14px;
}

.dwc-cut-qty label {
	font-size: 0.88rem;
	font-weight: 600;
}

.dwc-cut-qty input {
	width: 90px;
	padding: 8px 10px;
	border: 1px solid var(--dwc-border);
	border-radius: 8px;
	font: inherit;
}

/* ---------- סיכום ---------- */

/*
 * העטיפה של הסיכום והניווט. ההידבקות יושבת עליה ולא על הסיכום עצמו,
 * כך שהכפתורים נשארים גלויים יחד איתו.
 */
.dwc-side {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	/* מגביל את הגובה כך שגם כשרשימת הפלטות ארוכה, הניווט נשאר נראה. */
	max-height: calc(100vh - 48px);
	overflow-y: auto;
}

.dwc-summary {
	padding: 18px;
	background: var(--dwc-surface);
	border: 1px solid var(--dwc-border);
	border-radius: var(--dwc-radius);
}

@media (max-width: 880px) {
	.dwc-side {
		position: static;
		max-height: none;
		overflow-y: visible;
	}
}

.dwc-summary-title {
	margin: 0 0 12px;
	font-size: 1.05rem;
}

.dwc-summary-list {
	margin: 0;
	display: grid;
	gap: 8px;
	font-size: 0.9rem;
}

.dwc-summary-item {
	padding-bottom: 10px;
	border-bottom: 1px dashed var(--dwc-border);
}

.dwc-summary-item-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
}

/* ריבוע קטן עם תמונת הפלטה, או בצבע התצוגה שלה כשאין תמונה. */
.dwc-configurator .dwc-summary-item-thumb {
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 5px;
	border: 1px solid var(--dwc-border);
	background-color: var(--dwc-bg);
	background-size: cover;
	object-fit: cover;
}

.dwc-summary-item-name {
	min-width: 0;
}

.dwc-summary-item-meta {
	margin-top: 2px;
	color: var(--dwc-muted);
	font-size: 0.82rem;
	line-height: 1.6;
}

.dwc-summary-item-price {
	margin-top: 4px;
	font-weight: 600;
	color: var(--dwc-accent);
}

.dwc-summary-empty {
	color: var(--dwc-muted);
	font-size: 0.9rem;
	margin: 0;
}

.dwc-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 2px solid var(--dwc-border);
}

.dwc-total-label {
	font-weight: 600;
}

.dwc-total-value {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--dwc-accent);
}

.dwc-price-note {
	margin: 10px 0 0;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--dwc-muted);
}

/* ---------- אישור ופעולות ---------- */

.dwc-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 16px;
	font-size: 0.9rem;
	line-height: 1.5;
	cursor: pointer;
}

.dwc-consent input {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	accent-color: var(--dwc-accent);
	flex: none;
}

/*
 * הניווט נדבק יחד עם הסיכום, ולכן הוא נערם לעמודה
 * וכפתוריו נמתחים לרוחב העמודה במקום להסתדר בשורה.
 */
.dwc-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}


.dwc-configurator .dwc-actions .dwc-btn {
	width: 100%;
	text-align: center;
}

/* המסך הצר מפרק את הגריד, והסיכום כבר אינו דביק – הכפתורים חוזרים לשורה. */
@media (max-width: 880px) {
	.dwc-actions {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.dwc-configurator .dwc-actions .dwc-btn {
		width: auto;
		flex: 1 1 160px;
	}
}

.dwc-btn {
	padding: 12px 26px;
	border: 2px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.2s ease, background 0.2s ease;
}

.dwc-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.dwc-btn-primary {
	background: var(--dwc-accent);
	color: #fff;
}

.dwc-btn-primary:hover:not(:disabled) {
	opacity: 0.9;
}

.dwc-btn-ghost {
	background: transparent;
	border-color: var(--dwc-border);
	color: var(--dwc-text);
}

.dwc-btn-ghost:hover:not(:disabled) {
	border-color: var(--dwc-accent);
	color: var(--dwc-accent);
}

/* ---------- הודעות ---------- */

.dwc-form-message {
	margin: 16px 0 0;
	padding: 0;
	font-weight: 600;
}

.dwc-form-message.is-error {
	color: var(--dwc-error);
}

.dwc-form-message.is-success {
	padding: 14px 16px;
	border-radius: var(--dwc-radius);
	background: #edf7ee;
	color: #1e6b2a;
}

/*
 * אחרי שליחה מוצלחת נשארת רק הודעת ההצלחה. מסתירים את חלקי הטופס אחד-אחד
 * ולא את .dwc-layout כולו, כי ההודעה יושבת בתוכו – הסתרת המעטפת הייתה
 * מעלימה גם אותה, והגולש היה לוחץ "שליחה" ולא רואה שום אישור.
 */
.dwc-form.is-sent .dwc-panes,
.dwc-form.is-sent .dwc-summary,
.dwc-form.is-sent .dwc-actions {
	display: none;
}

.dwc-form.is-sent .dwc-side {
	grid-column: 1 / -1;
}

.dwc-side .dwc-form-message {
	margin: 0;
}

/*
 * הקוד מסתיר את כפתורי הניווט עם התכונה hidden, אבל ערכות נושא ואלמנטור
 * מגדירים display לכפתורים בסלקטור חזק יותר מברירת המחדל של הדפדפן –
 * ואז כפתור מוסתר ממשיך להופיע. הכלל הזה מבטיח שהסתרה תמיד תנצח.
 */
.dwc-configurator [hidden] {
	display: none !important;
}

.dwc-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- שלב 2: כרטיס המידות ---------- */

/*
 * בדסקטופ שתי כרטיסיות מידות בשורה. הגריד עוטף רק את פריטי שלב 2,
 * כך שכרטיסי החיתוכים בשלב 3 נשארים אחד מתחת לשני.
 */
.dwc-items-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	align-items: start;
}

@media (max-width: 880px) {
	.dwc-items-grid {
		grid-template-columns: 1fr;
	}
}

/* בתוך הגריד הכרטיס תופס את מלוא רוחב העמודה. */
.dwc-item--dims {
	margin-bottom: 0;
}

/* רוחב ואורך בשורה אחת, 50% כל אחד; עובי וכמות בשורה שמתחתיהם. */
/*
 * שתי עמודות בכל רוחב מסך: רוחב ואורך בשורה הראשונה, עובי וכמות
 * מתחתיהם. אין כאן קיפול למסך צר – השדות מכילים ערך קצר בלבד
 * ("1.20 מטר" או מספר), והם נכנסים בנוחות גם בחצי מסך של טלפון קטן.
 */
.dwc-fields--dims {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*
 * ההדמיה והכפתור באותה שורה: ההדמיה בצד ההתחלה (ימין) והכפתור בצד
 * הסיום (שמאל). space-between דוחף אותם לשני הקצוות.
 */
.dwc-item--dims .dwc-item-foot {
	flex-direction: row;
	/* הכפתור נצמד לתחתית השורה, בקו אחד עם בסיס ההדמיה. */
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.dwc-item--dims .dwc-preview {
	/* לא גדל ולא מתכווץ – ההדמיה שומרת על גודלה גם כשהכרטיס צר. */
	flex: 0 0 auto;
	margin-top: 0;
}

/* בשורה אחת אין צורך במלוא הרוחב; מספיק מקום להדמיה ולכיתוב שמתחתיה. */
.dwc-item--dims .dwc-preview-stage {
	width: 170px;
	height: 130px;
}

.dwc-configurator .dwc-item--dims .dwc-item-confirm {
	flex: 0 0 auto;
}

/*
 * שדות העובי והכמות: נמוכים וצרים יותר מברירת המחדל. הם מכילים מספר
 * קצר בלבד, ובמלוא רוחב העמודה הם נראו כבדים מדי לצד ערכי המידות
 * שלצדם, שהם טקסט בלבד.
 */
.dwc-fields--dims .dwc-field select {
	max-width: 150px;
	padding-block: 7px;
}

/*
 * בנייד ההדמיה והכפתור מפסיקים לחלוק שורה: ההדמיה נפרסת על מלוא רוחב
 * הכרטיס, והכפתור יורד מתחתיה בחצי רוחב. הכלל אינו תלוי בשדות שמעליו,
 * ולכן הוא זהה גם בפלטה שאין לה שדה עובי.
 */
@media (max-width: 767px) {
	.dwc-item--dims .dwc-item-foot {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	.dwc-item--dims .dwc-preview {
		width: 100%;
	}

	.dwc-item--dims .dwc-preview-stage {
		width: 100%;
	}

	.dwc-configurator .dwc-item--dims .dwc-item-confirm {
		width: 100%;
		align-self: stretch;
	}
}

/*
 * רוחב ואורך אינם ניתנים לעריכה: הם מוצגים כטקסט, והערך במ"מ יושב
 * בשדה נסתר לצורך החישוב והשליחה.
 */
.dwc-field-label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 0.92rem;
}

.dwc-static-value {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--dwc-text);
}

/* ---------- תג על תמונת הפלטה ---------- */

/*
 * התג יושב על התמונה בשלב בחירת הפלטה. כל המידות והצבעים ניתנים
 * לשינוי מהווידג'ט באלמנטור; כאן רק ברירות המחדל והמיקום.
 * pointer-events: none – כדי שלחיצה על התג תמשיך לבחור את הפלטה.
 */
.dwc-configurator .dwc-panel-badge {
	--dwc-badge-offset: 10px;

	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-width: calc(100% - (var(--dwc-badge-offset) * 2));
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--dwc-accent);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

.dwc-panel-badge--start-top {
	top: var(--dwc-badge-offset);
	inset-inline-start: var(--dwc-badge-offset);
}

.dwc-panel-badge--end-top {
	top: var(--dwc-badge-offset);
	inset-inline-end: var(--dwc-badge-offset);
}

.dwc-panel-badge--start-bottom {
	bottom: var(--dwc-badge-offset);
	inset-inline-start: var(--dwc-badge-offset);
}

.dwc-panel-badge--end-bottom {
	bottom: var(--dwc-badge-offset);
	inset-inline-end: var(--dwc-badge-offset);
}

/* סימן הווי של הבחירה יושב בפינה העליונה בסוף – התג מתרחק ממנו. */
.dwc-panel-badge--end-top {
	inset-inline-end: calc(var(--dwc-badge-offset) + 34px);
}

/* ---------- שלב הפרטים ---------- */

/*
 * שם, טלפון ואימייל שליש רוחב כל אחד באותה השורה; שדות רחבים על כולה.
 * auto-fit ולא שלוש עמודות קבועות, כי בשלב האחרון הטופס יושב על חצי
 * מסך – שלושה שדות צרים מדי היו נדחסים שם. כשיש מקום זה בדיוק שליש.
 */
.dwc-fields--contact {
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

/*
 * שדה הקובץ תופס את השורה כולה בגריד, אבל תיבת הבחירה עצמה מוגבלת לחצי
 * ממנה. כך התיבה בגודל שביקשנו, ושורת הפורמטים שמתחתיה מקבלת את מלוא
 * הרוחב ונשארת בשורה אחת – ב-50% היא נשברה לשתיים.
 */
.dwc-fields--contact .dwc-field--file {
	grid-column: 1 / -1;
}

.dwc-fields--contact .dwc-field--file .dwc-file {
	max-width: 50%;
}

@media (max-width: 700px) {
	.dwc-fields--contact .dwc-field--file .dwc-file {
		max-width: 100%;
	}
}

/*
 * בנייד הגריד מתכווץ לשתי עמודות: שם וטלפון מתחלקים בשורה הראשונה,
 * והאימייל – שהוא השדה הארוך מביניהם – מקבל שורה שלמה לעצמו.
 */
@media (max-width: 767px) {
	.dwc-fields--contact .dwc-field--email {
		grid-column: 1 / -1;
	}
}

/* טקסט הרמז בשדה ההערות – חצי שקוף, ונעלם ברגע שמקלידים. */
.dwc-configurator .dwc-field textarea::placeholder,
.dwc-configurator .dwc-field input::placeholder {
	color: var(--dwc-text);
	opacity: 0.45;
}

/*
 * שדה הקובץ: שדה הדפדפן עצמו מוסתר (ראו ההערה בסימון), והמעטפת הזו
 * מציגה כפתור וכיתוב בעברית, בסדר הנכון למסמך RTL.
 */
.dwc-file {
	display: flex;
	align-items: center;
	/* בשלב האחרון השדה יושב על שליש מחצי מסך – שם שם הקובץ יורד לשורה נפרדת. */
	flex-wrap: wrap;
	gap: 8px 12px;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid var(--dwc-border);
	border-radius: var(--dwc-radius);
	background: #fff;
}

.dwc-configurator .dwc-file-pick {
	flex: none;
	padding: 7px 18px;
	border: 1px solid var(--dwc-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--dwc-accent);
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}

.dwc-configurator .dwc-file-pick:hover {
	background: var(--dwc-accent);
	color: #fff;
}

.dwc-file-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--dwc-muted);
	font-size: 0.88rem;
}

/* השדה מוסתר, ולכן חיווי הפוקוס מוצג על המעטפת. */
.dwc-file:focus-within {
	border-color: var(--dwc-accent);
}

/* תיבת אישור שנייה נצמדת לראשונה במרווח קטן יותר. */
.dwc-consent + .dwc-error + .dwc-consent {
	margin-top: 10px;
}

.dwc-consent a {
	color: var(--dwc-accent);
}
/* ---------- השלב האחרון: הסיכום יורד מתחת לטופס ---------- */

/*
 * בשלב הפרטים אין צורך בסיכום צמוד לצד – הטופס מקבל את כל הרוחב,
 * הניווט עובר לשורה אחת מעליו (שליחה בקצה אחד, חזרה בשני),
 * והסיכום יורד מתחתיהם.
 */
.dwc-configurator.dwc-is-last .dwc-layout {
	grid-template-columns: minmax(0, 1fr);
}

/*
 * בשלב האחרון הפריסה נחלקת לשניים שווים: הטופס והכפתורים בעמודה אחת
 * (בימין, כי המסמך RTL), וסיכום הבחירה בשנייה.
 *
 * display: contents על העטיפה מפרק אותה, כך שהסיכום, הכפתורים והודעת
 * הטופס הופכים לתאים עצמאיים בגריד ואפשר למקם כל אחד בעמודה שלו –
 * בלי לשכפל אותם בסימון או להזיז אותם ב-JS.
 */
.dwc-configurator.dwc-is-last .dwc-layout {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
}

/*
 * ה-:not(.is-sent) חשוב: אחרי השליחה העטיפות חוזרות להיות אלמנטים רגילים,
 * כדי שכלל ההסתרה שלמעלה יתפוס עליהן.
 */
.dwc-configurator.dwc-is-last .dwc-form:not(.is-sent) .dwc-side,
.dwc-configurator.dwc-is-last .dwc-form:not(.is-sent) .dwc-actions {
	display: contents;
}

.dwc-configurator.dwc-is-last .dwc-panes {
	grid-column: 1;
	grid-row: 1;
}

.dwc-configurator.dwc-is-last .dwc-summary {
	grid-column: 2;
	grid-row: 1;
	/* נשאר בשדה הראייה גם כשהטופס ארוך ממנו. */
	position: sticky;
	top: 24px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
}

/* שליחה בתא הימני צמודה לימין, וחזרה בתא השמאלי צמודה לשמאל. */
.dwc-configurator.dwc-is-last .dwc-submit {
	grid-column: 1;
	grid-row: 2;
	justify-self: start;
	margin-top: 8px;
}

.dwc-configurator.dwc-is-last .dwc-prev {
	grid-column: 2;
	grid-row: 2;
	justify-self: end;
	margin-top: 8px;
}

.dwc-configurator.dwc-is-last .dwc-form-message {
	grid-column: 1 / -1;
	grid-row: 3;
}

/* הכפתורים אינם נמתחים כאן, בניגוד לעמודת הסיכום שבשלבים הקודמים. */
.dwc-configurator.dwc-is-last .dwc-submit,
.dwc-configurator.dwc-is-last .dwc-prev {
	width: auto;
}

/* בנייד הכול יורד לעמודה אחת, והסיכום מופיע לפני כפתורי הפעולה. */
@media (max-width: 767px) {
	.dwc-configurator.dwc-is-last .dwc-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.dwc-configurator.dwc-is-last .dwc-summary {
		grid-column: 1;
		grid-row: 2;
		position: static;
		max-height: none;
		overflow-y: visible;
	}

	.dwc-configurator.dwc-is-last .dwc-submit {
		grid-column: 1;
		grid-row: 3;
	}

	.dwc-configurator.dwc-is-last .dwc-prev {
		grid-column: 1;
		grid-row: 4;
		justify-self: start;
	}

	.dwc-configurator.dwc-is-last .dwc-form-message {
		grid-row: 5;
	}
}




/* כפתור השליחה הוא הפעולה המרכזית של השלב, ולכן הוא גדול יותר. */
.dwc-configurator.dwc-is-last .dwc-submit {
	padding: 15px 42px;
	font-size: 1.02rem;
}


/* הקישור בתוך תיבת האישור – קו תחתון וצבע קישור. */
.dwc-configurator .dwc-consent-link {
	color: var(--dwc-accent);
	text-decoration: underline;
}

.dwc-configurator .dwc-consent-link:hover {
	text-decoration: none;
}
/* ---------- נגישות וליטוש של הטופס ---------- */

/*
 * חיווי פוקוס ברור לניווט במקלדת. :focus-visible ולא :focus, כדי
 * שהטבעת לא תקפוץ גם בלחיצת עכבר.
 */
.dwc-configurator :focus-visible {
	outline: 2px solid var(--dwc-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

.dwc-configurator .dwc-field input:focus-visible,
.dwc-configurator .dwc-field select:focus-visible,
.dwc-configurator .dwc-field textarea:focus-visible {
	outline-offset: 0;
}

/* השדה הפעיל מסומן גם בטבעת רכה, שמקלה לאתר איפה נמצאים בטופס ארוך. */
.dwc-configurator .dwc-field input:focus,
.dwc-configurator .dwc-field select:focus,
.dwc-configurator .dwc-field textarea:focus {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dwc-accent) 18%, transparent);
}

/* שדה שגוי: מסגרת אדומה ורקע עדין – לא רק צבע, גם הודעת הטקסט שמתחת. */
.dwc-configurator .dwc-field input.has-error,
.dwc-configurator .dwc-field select.has-error,
.dwc-configurator .dwc-field textarea.has-error {
	border-color: var(--dwc-error);
	background-color: color-mix(in srgb, var(--dwc-error) 5%, #fff);
}

/* סימן קריאה לצד הודעת השגיאה, כדי שהיא תזוהה גם בלי הסתמכות על צבע. */
.dwc-error.is-visible::before {
	content: "!";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	margin-inline-end: 6px;
	vertical-align: -3px;
	border-radius: 50%;
	background: var(--dwc-error);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

/* תיבות הסימון: שטח לחיצה נדיב יותר ומצב פוקוס ברור. */
.dwc-consent {
	cursor: pointer;
	padding: 4px 0;
}

.dwc-configurator .dwc-consent input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 1px;
	accent-color: var(--dwc-accent);
	flex: none;
	cursor: pointer;
}

/* המרווח בין שני האישורים, גם כשהראשון אינו מציג שגיאה. */
.dwc-consent + .dwc-consent {
	margin-top: 6px;
}

/* כפתור מושבת בזמן שליחה – ברור שהפעולה בעיצומה. */
.dwc-configurator .dwc-btn:disabled {
	opacity: 0.6;
	cursor: progress;
}

/* אזור הודעת הטופס: מובחן מהטקסט הרגיל, ולא רק בצבע. */
.dwc-form-message.is-error,
.dwc-form-message.is-success {
	padding: 10px 14px;
	border-inline-start: 3px solid currentColor;
	border-radius: 6px;
	font-weight: 600;
}

.dwc-form-message.is-error {
	background: color-mix(in srgb, var(--dwc-error) 8%, transparent);
}

.dwc-form-message.is-success {
	background: color-mix(in srgb, var(--dwc-accent) 10%, transparent);
}
/* בשלב האחרון העמודות שוות, ולכן הסרגל מגיע עד אמצע הרוחב. */
.dwc-configurator.dwc-is-last .dwc-steps {
	max-width: calc(50% - var(--dwc-layout-gap) / 2);
}

/*
 * ברירות המחדל הרספונסיביות. מתחת ל-880 פיקסל הפריסה יורדת לעמודה אחת,
 * ואז גם הסרגל נפרס על כל הרוחב. הפקדים בווידג'ט גוברים על הכללים האלה.
 */
@media (max-width: 1024px) {
	.dwc-subheading {
		max-width: 80%;
	}
}

@media (max-width: 880px) {
	.dwc-steps,
	.dwc-configurator.dwc-is-last .dwc-steps {
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	.dwc-subheading {
		max-width: 100%;
	}
}

/* ---------- מובייל: סרגל פעולות צמוד לתחתית המסך ---------- */

/*
 * ה-JS מעביר את הסרגל לסוף הטופס בנייד ומוסיף לו is-docked. ההסבר
 * המלא למה sticky ולמה דווקא שם נמצא ב-syncDock שב-dwc-frontend.js.
 *
 * הסלקטור הראשון מבטל את display: contents שהשלב האחרון מחיל על
 * העטיפה; בלעדיו לא היה מה להצמיד.
 */
.dwc-configurator.dwc-is-last .dwc-form:not(.is-sent) .dwc-actions.is-docked,
.dwc-actions.is-docked {
	display: flex;
	position: sticky;
	bottom: 0;
	z-index: 40;
	/*
	 * row-reverse ולא row: סדר האלמנטים בסימון הוא המשך, שליחה ואז חזרה,
	 * ובמסמך RTL הראשון יושב מימין. ההיפוך מביא את פעולת ההמשך לשמאל
	 * ואת החזרה לימין, כמקובל בסרגל תחתון.
	 */
	flex-direction: row-reverse;
	/* nowrap במפורש: הכלל הרספונסיבי של הכפתורים נותן להם בסיס של 160
	 * פיקסלים, ובטלפון צר שניהם יחד חורגים מהשורה ונשברים לשתיים. */
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	/* env() מוסיף מרווח מעל סרגל המחוות באייפון. */
	padding: 15px 15px calc(15px + env(safe-area-inset-bottom, 0px));
	background: var(--dwc-surface);
	border-top: 1px solid var(--dwc-border);
	box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.1);
}

/*
 * הסלקטור מפורט בכוונה: הכלל שמתחת ל-880 פיקסלים מגדיר לכפתורים
 * flex: 1 1 160px בסלקטור בעל שלוש מחלקות, ובלי עדיפות גבוהה ממנו
 * הבסיס הזה גובר וגורם לשבירת השורה.
 */
.dwc-configurator .dwc-actions.is-docked .dwc-btn {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	margin: 0;
	/*
	 * ריפוד אחיד וגבולות בחישוב הרוחב, אחרת כפתור השליחה – שמקבל ריפוד
	 * רחב יותר בשלב האחרון – יוצא רחב מכפתור החזרה שלצדו.
	 */
	box-sizing: border-box;
	padding-inline: 12px;
}

/*
 * הכיתוב המלא בדסקטופ, המקוצר בנייד. שניהם מרונדרים, וההחלפה היא
 * ב-CSS בלבד – כדי שהכפתור לא יהבהב בטעינה ושלא יידרש חישוב ב-JS.
 */
.dwc-submit-short {
	display: none;
}

@media (max-width: 767px) {
	.dwc-submit-full:not(:only-child) {
		display: none;
	}

	.dwc-submit-short {
		display: inline;
	}
}

@media (max-width: 767px) {
	/* הכפתורים אינם עוד תאים בגריד של השלב האחרון. */
	.dwc-configurator.dwc-is-last .dwc-submit,
	.dwc-configurator.dwc-is-last .dwc-prev {
		grid-column: auto;
		grid-row: auto;
		justify-self: auto;
	}
}
/* ---------- מרכוז הטקסט בכל הכפתורים ---------- */

/*
 * כפתורי הכרטיס בנויים כ-flex (אייקון + כיתוב), ובלי justify-content
 * התוכן נדבק לקצה ההתחלתי. כל עוד הכפתור בגודל התוכן זה לא ניכר,
 * אבל ברגע שהוא נמתח לרוחב מלא – כמו בנייד – הכיתוב נראה מוסט.
 * הכלל כאן ממרכז את כולם, גם כשהם רחבים מהתוכן שבתוכם.
 */
.dwc-configurator .dwc-item-confirm,
.dwc-configurator .dwc-item-edit,
.dwc-configurator .dwc-item-remove,
.dwc-configurator .dwc-file-pick,
.dwc-configurator .dwc-readmore {
	justify-content: center;
	text-align: center;
}

/* גם כפתורי הניווט, ולא רק כשהם יושבים בתוך סרגל הפעולות. */
.dwc-configurator .dwc-btn {
	justify-content: center;
	text-align: center;
}

/* ==========================================================================
   שלב הפרטים: שורות חיזוק, שדות מקופלים והסכמות קומפקטיות
   ========================================================================== */

/*
 * שלוש שורות שעונות על "מה אני מקבל בתמורה לפרטים שלי". הן יושבות בשורה
 * אחת במסך רחב ונשברות לעצמן בנייד, ובכוונה קרובות לשדות – כדי שייקראו
 * כחלק מאותה הצעה ולא כקישוט נפרד.
 */
.dwc-reassure {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
}

.dwc-reassure-item {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 0.9rem;
	line-height: 1.45;
	/* צבעי הריחוף נקבעים בפקדי אלמנטור; כאן רק המעבר ביניהם. */
	transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.dwc-reassure-icon {
	width: 17px;
	height: 17px;
	flex: none;
	color: var(--dwc-accent);
}

/* "(לא חובה)" לצד תווית האימייל – נוכח, אך לא מתחרה בשם השדה. */
.dwc-optional {
	font-weight: 400;
	font-size: 0.85em;
	color: var(--dwc-muted);
}

/*
 * ההערות וקובץ ה-CNC מקופלים. שניהם רלוונטיים למיעוט מהגולשים, ובפריסה
 * פתוחה הם מאריכים את הטופס ונראים כשדות חובה נוספים בדיוק בנקודה שבה
 * הגולש שוקל אם להשלים אותו.
 */
.dwc-disclosure {
	margin-top: 14px;
}

.dwc-disclosure-summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	font-size: 0.92rem;
	line-height: 1.4;
	color: var(--dwc-accent);
	cursor: pointer;
	/* ברירת המחדל של הדפדפן היא משולש; הסימן שלנו מוגדר למטה. */
	list-style: none;
	transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.dwc-disclosure-summary::-webkit-details-marker {
	display: none;
}

.dwc-disclosure-summary:focus-visible {
	outline: 2px solid var(--dwc-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/*
 * סימן חיבור שהופך למינוס בפתיחה. שני פסים זהים שאחד מהם מסובב, ולכן
 * הסימן נראה זהה ב-RTL וב-LTR ואינו תלוי בכיוון המסמך.
 */
.dwc-disclosure-sign {
	position: relative;
	width: 16px;
	height: 16px;
	flex: none;
}

.dwc-disclosure-sign::before,
.dwc-disclosure-sign::after {
	content: "";
	position: absolute;
	left: 2px;
	top: 7px;
	width: 12px;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.dwc-disclosure-sign::after {
	transform: rotate(90deg);
}

.dwc-disclosure[open] .dwc-disclosure-sign::after {
	transform: rotate(0deg);
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.dwc-disclosure-sign::before,
	.dwc-disclosure-sign::after {
		transition: none;
	}
}

/*
 * ‎box-sizing בתוסף מוגדר כ-inherit ומשורשר מהשורש כלפי מטה. דפדפנים
 * חדשים מוסיפים פסאודו-אלמנט ::details-content בין ה-details לתוכנו,
 * והוא אינו נתפס על ידי הסלקטור הכללי – כך שההורשה נקטעת שם וחוזרת
 * ל-content-box. התוצאה הייתה שדה שמקבל רוחב מלא ועוד ריפוד, וגולש
 * 26 פיקסלים מחוץ למסך בנייד. הקביעה המפורשת מחזירה את השרשרת, והכלל
 * שאחריה מתקן את המקור עצמו בדפדפנים שמכירים אותו (בשאר הוא נבלע).
 */
.dwc-configurator .dwc-disclosure-body {
	box-sizing: border-box;
	padding-top: 10px;
}

.dwc-configurator .dwc-disclosure::details-content {
	box-sizing: inherit;
}

/* בתוך פותחן אין גריד של שדות, ולכן השדה מקבל את מלוא הרוחב. */
.dwc-disclosure-body .dwc-field--file .dwc-file {
	max-width: 50%;
}

@media (max-width: 700px) {
	.dwc-disclosure-body .dwc-field--file .dwc-file {
		max-width: 100%;
	}
}

/*
 * שתי ההסכמות בגוש אחד מופרד בקו. הן נשארות קריאות ונגישות, אבל קטנות
 * מספיק כדי לא להתחרות בכפתור – שהוא הפעולה שאנחנו מבקשים מהגולש.
 */
.dwc-consents {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--dwc-border);
}

.dwc-consents .dwc-consent {
	margin-top: 0;
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--dwc-muted);
}

.dwc-consents .dwc-consent + .dwc-consent,
.dwc-consents .dwc-consent + .dwc-error + .dwc-consent {
	margin-top: 4px;
}

.dwc-configurator .dwc-consents .dwc-consent input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin-top: 2px;
}

/*
 * "ללא התחייבות" מתחת לכפתור, במסך רחב בלבד. בנייד הכפתור יושב בסרגל
 * צמוד לתחתית ואין בו מקום לשורה נוספת – ושם אותה הבטחה כבר מופיעה
 * בשורות החיזוק שמעל השדות.
 */
.dwc-submit-note {
	display: none;
	margin: 6px 0 0;
	font-size: 0.82rem;
	color: var(--dwc-muted);
}

.dwc-configurator.dwc-is-last .dwc-submit-note {
	display: block;
	grid-column: 1;
	grid-row: 3;
	justify-self: start;
}

/* הודעת הטופס יורדת שורה, כדי לפנות מקום להערה. */
.dwc-configurator.dwc-is-last .dwc-form-message {
	grid-row: 4;
}

@media (max-width: 767px) {
	/*
	 * שם וטלפון זה מתחת לזה. בשתי עמודות כל שדה יוצא צר מדי למספר טלפון
	 * מלא, והמסך כאן ארוך ממילא – עמודה אחת קריאה יותר מלמלא אותו.
	 */
	.dwc-fields--contact {
		grid-template-columns: minmax(0, 1fr);
	}

	.dwc-configurator.dwc-is-last .dwc-submit-note {
		display: none;
	}

	/* שחזור סדר השורות של הנייד, שנקבע לפני ההערה. */
	.dwc-configurator.dwc-is-last .dwc-form-message {
		grid-row: 5;
	}
}

/* ==========================================================================
   שלב 1: כפתור בחירת הפלטה
   ========================================================================== */

/*
 * שורת הפעולות של הכרטיס. הבחירה ראשונה בסימון כי היא הפעולה המרכזית,
 * ו-space-between דוחף את "קרא עוד" לקצה הנגדי – בלי תלות בכיוון המסמך.
 */
.dwc-panel-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	margin-top: 10px;
}

/*
 * סלקטור ארוך בכוונה, מאותה סיבה שבכפתור "קרא עוד": ערכות נושא מעצבות
 * כל button בכללים ספציפיים, ואיפוס קצר מפסיד להם.
 */
.dwc-configurator .dwc-panel-body .dwc-panel-select,
.dwc-configurator button.dwc-panel-select {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/*
	 * בלי gap: הרווח יושב על האייקון עצמו. gap חל גם כשהאייקון ברוחב
	 * אפס – לפני הבחירה – ודוחף את הכיתוב שלושה פיקסלים מהמרכז.
	 */
	width: auto;
	padding: 9px 16px;
	border: 1px solid var(--dwc-accent);
	border-radius: 999px;
	outline: 0;
	background: none;
	box-shadow: none;
	color: var(--dwc-accent);
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

/*
 * הפונט בכלל נפרד בעל עדיפות נמוכה, כדי שפקד הטיפוגרפיה באלמנטור יגבר
 * עליו תמיד. הכלל שמעליו חייב להיות ספציפי כדי לאפס כפתורים של ערכות
 * נושא, וזה היה מנצח גם את אלמנטור.
 */
.dwc-panel-select {
	font: inherit;
	font-size: 0.88rem;
	font-weight: 600;
}

.dwc-configurator .dwc-panel-select:hover {
	background-color: var(--dwc-accent);
	color: #fff;
}

.dwc-configurator .dwc-panel-select:focus-visible {
	outline: 2px solid var(--dwc-accent);
	outline-offset: 2px;
}

/*
 * הווי קיים תמיד ותופס מקום רק אחרי הבחירה, כדי שהכפתור לא יקפץ.
 * גם הרווח שלצדו מתאפס, אחרת הכיתוב אינו ממורכז לפני הבחירה.
 */
.dwc-panel-select-check {
	width: 0;
	height: 16px;
	margin-inline-end: 0;
	flex: none;
	opacity: 0;
	transition: width 0.16s ease, opacity 0.16s ease, margin-inline-end 0.16s ease;
}

.dwc-panel-card.is-selected .dwc-panel-select-check {
	width: 16px;
	margin-inline-end: 6px;
	opacity: 1;
}

.dwc-configurator .dwc-panel-card.is-selected .dwc-panel-select {
	background-color: var(--dwc-accent);
	border-color: var(--dwc-accent);
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.dwc-configurator .dwc-panel-select,
	.dwc-panel-select-check {
		transition: none;
	}
}

/*
 * כפתור ההמשך כשעדיין לא נבחרה פלטה: מעומעם כדי לרמוז שחסר משהו, אבל
 * לא disabled – לחיצה עליו מציגה את ההודעה שמסבירה מה חסר, וזה עדיף
 * על כפתור שלא מגיב ושאין ממנו דרך להבין למה.
 */
.dwc-configurator .dwc-next.is-waiting {
	opacity: 0.55;
}

/* ==========================================================================
   שלב 2: פלטה אחת בכל פעם
   ========================================================================== */

/*
 * הכרטיסים נערמים בעמודה אחת. בשתי עמודות הכרטיס הפתוח היה יושב לצד
 * כרטיסים מוקטנים בגבהים שונים, והתוצאה נראתה שבורה יותר מאשר צפופה.
 */
.dwc-items-grid {
	grid-template-columns: minmax(0, 1fr);
	max-width: 560px;
}

.dwc-items-counter {
	margin: 0 0 12px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--dwc-muted);
}

/* הווי ומילת "הושלם" מופיעים רק אחרי אישור המידות. */
.dwc-item-done-check,
.dwc-item-done-label {
	display: none;
}

.dwc-item-title {
	display: flex;
	align-items: center;
	gap: 6px;
}

.dwc-item.is-locked .dwc-item-done-check {
	display: block;
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--dwc-accent);
}

.dwc-item.is-locked .dwc-item-done-label {
	display: inline;
	font-weight: 400;
	font-size: 0.9rem;
	color: var(--dwc-muted);
}

@media (prefers-reduced-motion: reduce) {
	.dwc-reassure-item,
	.dwc-disclosure-summary {
		transition: none;
	}
}

/* ==========================================================================
   הסרגל הצף בשלב הבחירה
   ========================================================================== */

.dwc-configurator {
	/* מרחק העלייה של הסרגל; ניתן לשינוי מפקד באלמנטור. */
	--dwc-rise: 24px;
}

@keyframes dwc-rise-in {
	from {
		opacity: 0;
		transform: translateY(var(--dwc-rise, 24px));
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/*
 * הסרגל עולה מתחתית המסך ברגע שנבחרה הפלטה הראשונה. ה-JS מוסיף את
 * המחלקה רק במעבר בפועל למצב הצף, ולכן האנימציה רצה פעם אחת בכל הופעה
 * ולא בכל רינדור מחדש.
 */
.dwc-actions.is-docked.is-rising {
	animation: dwc-rise-in 0.32s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

/* בסרגל של שלב הבחירה יש כפתור יחיד, והוא ממלא את הרוחב כברירת מחדל. */
.dwc-actions.is-docked.is-solo {
	justify-content: stretch;
}

.dwc-configurator .dwc-actions.is-docked.is-solo .dwc-next {
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.dwc-actions.is-docked.is-rising {
		animation: none;
	}
}

/* ==========================================================================
   חלון המידע על הפלטה
   ========================================================================== */

/*
 * ‎<dialog> ולא div: showModal מרנדר את החלון בשכבה העליונה של הדפדפן,
 * ולכן הוא אינו נלכד על ידי אב עם transform – המלכודת שהופכת
 * position: fixed לממוקם ביחס לאב במקום ביחס למסך.
 */
.dwc-modal {
	padding: 0;
	border: 0;
	max-width: min(920px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	overflow: visible;
	background: transparent;
	color: var(--dwc-text);
}

.dwc-modal::backdrop {
	background: rgba(24, 16, 8, 0.62);
}

.dwc-modal-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	border-radius: var(--dwc-radius);
	background: var(--dwc-surface);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
	text-align: start;
}

.dwc-modal[open] .dwc-modal-panel {
	animation: dwc-modal-in 0.2s ease both;
}

@keyframes dwc-modal-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.dwc-modal[open] .dwc-modal-panel {
		animation: none;
	}
}

/* כפתור הסגירה צף על התמונה, ולכן הוא מקבל רקע משלו. */
.dwc-configurator .dwc-modal-close,
.dwc-modal-panel button.dwc-modal-close {
	position: absolute;
	top: 12px;
	inset-inline-end: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--dwc-text);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	cursor: pointer;
}

.dwc-modal-close svg {
	width: 18px;
	height: 18px;
}

.dwc-configurator .dwc-modal-close:focus-visible {
	outline: 2px solid var(--dwc-accent);
	outline-offset: 2px;
}

.dwc-modal-media {
	flex: none;
	height: 260px;
	overflow: hidden;
	background: var(--dwc-bg);
}

.dwc-modal-image,
.dwc-modal-swatch {
	display: block;
	width: 100%;
	height: 100%;
}

.dwc-modal-image {
	object-fit: cover;
	/*
	 * ברירת המחדל היא מרכז. פקד הרשימה דורס את ההצהרה כולה, ופקד
	 * המיקום המדויק משנה רק את המשתנים – כך שני המצבים חיים זה לצד
	 * זה בלי שאחד יבטל את השני.
	 */
	object-position: var(--dwc-modal-pos-x, 50%) var(--dwc-modal-pos-y, 50%);
}

.dwc-modal-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px 22px 22px;
}

.dwc-modal-title {
	margin: 0;
	font-size: 1.32rem;
	line-height: 1.3;
}

.dwc-modal-desc {
	margin: 0;
	line-height: 1.65;
	color: var(--dwc-muted);
}

.dwc-modal-section {
	margin: 0;
}

.dwc-modal-label {
	margin: 0 0 6px;
	font-size: 0.95rem;
	font-weight: 700;
}

.dwc-modal-list {
	margin: 0;
	padding-inline-start: 1.15em;
	line-height: 1.75;
}

.dwc-modal-thickness-value {
	margin: 0;
	line-height: 1.6;
}

/*
 * סלקטור ארוך בכוונה, כמו בשאר כפתורי התוסף: ערכות נושא מעצבות כל
 * button בכללים ספציפיים, ואיפוס קצר מפסיד להם.
 */
.dwc-configurator .dwc-modal-body .dwc-modal-select,
.dwc-modal-panel button.dwc-modal-select {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 4px;
	padding: 13px 22px;
	border: 0;
	border-radius: 999px;
	outline: 0;
	background-color: var(--dwc-accent);
	color: #fff;
	box-shadow: none;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.16s ease, color 0.16s ease;
}

/* הפונט בכלל נפרד בעל עדיפות נמוכה, כדי שפקד הטיפוגרפיה יגבר עליו. */
.dwc-modal-select {
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
}

.dwc-configurator .dwc-modal-select:hover {
	background-color: var(--dwc-text);
}

.dwc-configurator .dwc-modal-select:focus-visible {
	outline: 2px solid var(--dwc-accent);
	outline-offset: 3px;
}

.dwc-modal-select-check {
	width: 18px;
	height: 18px;
	flex: none;
}

@media (max-width: 600px) {
	.dwc-modal-media {
		height: 190px;
	}

	.dwc-modal-body {
		padding: 16px 16px 18px;
	}
}

/*
 * נסיגה לדפדפנים שאינם מכירים <dialog>. שם אין שכבה עליונה ואין
 * ::backdrop, ולכן החלון ממוקם ונצבע כאן ידנית.
 */
.dwc-modal:not([open]) {
	display: none;
}

.dwc-modal.is-open {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 9999;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 16px;
	overflow-y: auto;
	background: rgba(24, 16, 8, 0.62);
}

.dwc-modal.is-open .dwc-modal-panel {
	max-width: 920px;
	margin: auto;
}

/* ==========================================================================
   רוחב "סיכום הבחירה" בשלב הפרטים
   ========================================================================== */

.dwc-configurator {
	/* ברירת מחדל לדסקטופ; נדרס מהפקד באלמנטור, בנפרד לכל מכשיר. */
	--dwc-summary-width: 30%;
}

/*
 * בשלב האחרון הטופס מקבל את רוב הרוחב והסיכום מצטמצם לעמודה צדדית.
 * minmax עם גבול תחתון 0 חוסם גלישה כשהתוכן בסיכום רחב מהערך שנבחר.
 */
.dwc-configurator.dwc-is-last .dwc-layout {
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--dwc-summary-width));
}

@media (max-width: 767px) {
	/*
	 * בנייד הפריסה עמודה אחת, ולכן הערך מגביל את רוחב התיבה עצמה.
	 * ברירת המחדל כאן היא רוחב מלא – 30% של הדסקטופ היו מועכים את
	 * הסיכום לעמודה צרה שבה כל שורה נשברת. פקד אלמנטור גובר על זה.
	 */
	.dwc-configurator {
		--dwc-summary-width: 100%;
	}

	.dwc-configurator.dwc-is-last .dwc-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.dwc-configurator.dwc-is-last .dwc-summary {
		max-width: var(--dwc-summary-width);
	}
}

/* ==========================================================================
   כיתוב כפתור ההמשך: מלא במסך רחב, קצר בנייד
   ========================================================================== */

/*
 * אותה שיטה שבכפתור השליחה: שני הכיתובים מרונדרים וה-CSS בוחר ביניהם,
 * כדי שהכפתור לא יהבהב בטעינה ושלא יידרש חישוב ב-JS.
 */
/*
 * inline-block ולא inline: text-overflow: ellipsis אינו חל על אלמנט
 * inline, ובלעדיו רשת הביטחון שמתחת הייתה חסרת תועלת.
 */
.dwc-next-full {
	display: inline-block;
}

.dwc-next-short {
	display: none;
}

@media (max-width: 767px) {
	.dwc-next-full {
		display: none;
	}

	.dwc-next-short {
		display: inline-block;
		/*
		 * בנייד הכיתוב נשבר לשתי שורות במקום להיחתך. שבירה עדיפה על
		 * שלוש נקודות כאן, כי היא לא מסתירה מהגולש חלק מהמשפט – ומכיוון
		 * שאין חיתוך אופקי, גם אין דרך לגלוש מגבולות המסך.
		 */
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		line-height: 1.3;
	}
}

/*
 * רשת ביטחון לכיתוב ארוך מדי: גם אם מישהו יזין טקסט שאינו נכנס לרוחב
 * הכפתור, הוא ייחתך בשלוש נקודות ולא באמצע אות – ובשום מצב לא יגלוש
 * מגבולות הכפתור אל מחוץ למסך.
 */
.dwc-configurator .dwc-next {
	min-width: 0;
}

.dwc-next-full,
.dwc-next-short {
	max-width: 100%;
	vertical-align: middle;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ==========================================================================
   שלב הפרטים בנייד: שליחה מעל חזרה, שניהם לרוחב מלא
   ========================================================================== */

@media (max-width: 767px) {
	/*
	 * הסלקטור חוזר על התחילית המלאה בכוונה: הכלל שקובע row-reverse
	 * לסרגל הצף משתמש באותה תחילית, ובלי עדיפות זהה או גבוהה ממנו
	 * הוא היה ממשיך לגבור. הסדר בסימון הוא שליחה ואז חזרה, ולכן
	 * column בלבד – בלי היפוך – מעמיד את השליחה למעלה.
	 */
	/*
	 * שני הסלקטורים נחוצים: הראשון שווה בעדיפותו לכלל שקובע row-reverse
	 * לשלב האחרון, והשני מכסה את שאר השלבים שבהם הכלל חלש יותר.
	 */
	.dwc-configurator.dwc-is-last .dwc-form:not(.is-sent) .dwc-actions.is-docked,
	.dwc-configurator .dwc-form:not(.is-sent) .dwc-actions.is-docked {
		flex-direction: column;
		align-items: stretch;
	}

	.dwc-configurator.dwc-is-last .dwc-form:not(.is-sent) .dwc-actions.is-docked .dwc-btn,
	.dwc-configurator .dwc-form:not(.is-sent) .dwc-actions.is-docked .dwc-btn {
		flex: none;
		width: 100%;
	}
}

/* ==========================================================================
   תיבת הטקסט החופשית שמתחת לכותרת
   ========================================================================== */

/*
 * ברירת מחדל צנועה ועקבית עם שאר הרכיבים, כדי שהתיבה תיראה סבירה
 * מהרגע שמזינים בה טקסט. כל ערך כאן נדרס מפקדי אלמנטור, שהסלקטורים
 * שלהם ספציפיים יותר.
 */
.dwc-notice-box {
	margin: 0 0 18px;
	padding: 14px 16px;
	border: 1px solid var(--dwc-border);
	border-radius: var(--dwc-radius);
	background: var(--dwc-surface);
	color: var(--dwc-text);
	line-height: 1.6;
}

.dwc-notice-line {
	margin: 0;
}

/* פסקה שנייה ואילך נצמדת לקודמתה במרווח קריא. */
.dwc-notice-line + .dwc-notice-line {
	margin-top: 8px;
}

/* ==========================================================================
   שדות הקשר: עמודה אחת, ברוחב שנקבע לכל מכשיר
   ========================================================================== */

.dwc-configurator {
	/* נדרס מהפקד באלמנטור, בנפרד לדסקטופ, טאבלט ונייד. */
	--dwc-contact-width: 50%;
}

/*
 * שם, טלפון ואימייל זה מתחת לזה. בשורה אחת כל שדה יוצא צר, ומספר טלפון
 * או כתובת אימייל ארוכה נחתכים בתוכו; עמודה אחת קריאה יותר, והרוחב
 * נקבע במפורש במקום להיגזר ממספר השדות.
 */
.dwc-fields--contact {
	grid-template-columns: minmax(0, var(--dwc-contact-width, 100%));
}

@media (max-width: 1024px) {
	.dwc-configurator {
		--dwc-contact-width: 70%;
	}
}

@media (max-width: 767px) {
	.dwc-configurator {
		--dwc-contact-width: 100%;
	}

	/* כבר עמודה אחת; הכלל הישן שנתן לאימייל שורה שלמה מיותר. */
	.dwc-fields--contact {
		grid-template-columns: minmax(0, var(--dwc-contact-width, 100%));
	}
}