/* ============================================================
 * כריכה מקורית — מדפי חנות (frontend) v2
 * עטוף ב-#kmf-root + !important ממוקד כדי לנצח את Elementor/ערכת הנושא.
 * ============================================================ */

#kmf-root.kmf-shelves {
	background: var(--kmf-area-bg, #261109) !important;
	background-repeat: no-repeat;
	padding: var(--kmf-area-pad, 64px) 0 !important;
	overflow: hidden;
}

#kmf-root .kmf-shelf-section {
	margin-bottom: clamp(40px, 7vw, 90px);
	scroll-margin-top: 100px;
}

/* ---------- כותרת ---------- */
#kmf-root .kmf-shelf-head {
	display: flex;
	flex-direction: var(--head-dir, row);
	align-items: var(--head-aitems, baseline);
	justify-content: var(--head-align, center);
	gap: var(--head-gap, 14px);
	flex-wrap: wrap;
	margin-bottom: clamp(20px, 3vw, 40px);
	text-align: center;
}
#kmf-root .kmf-shelf-head .kmf-cat-title { flex-basis: var(--head-tbasis, auto); }
/* פריסת הכותרת נשלטת דרך CSS variables (--head-dir / --head-tbasis / --head-aitems) */

#kmf-root .kmf-cat-title {
	font-family: var(--title-font, mugrabi, serif) !important;
	font-weight: var(--title-weight, 100) !important;
	font-size: var(--title-size, 50px) !important;
	color: var(--title-color, #ae6c44) !important;
	margin: 0 !important;
	line-height: var(--title-lh, 110%);
	text-align: var(--title-align, center);
	transform: translate(var(--title-x, 0px), var(--title-y, 0px));
}

#kmf-root .kmf-divider {
	width: var(--divider-w, 1px);
	align-self: center;
	height: var(--divider-h, 40px);
	background: var(--divider-color, #ae6c44);
	opacity: 0.6;
}

#kmf-root .kmf-cat-count {
	font-family: var(--count-font, Paamon, serif) !important;
	font-weight: var(--count-weight, 200) !important;
	font-size: var(--count-size, 44px) !important;
	color: var(--count-color, #ffdac1) !important;
	line-height: var(--count-lh, 100%);
	text-align: var(--count-align, center);
	transform: translate(var(--count-x, 0px), var(--count-y, 0px));
}

#kmf-root .kmf-cat-desc {
	font-family: var(--desc-font, inherit) !important;
	font-size: var(--desc-size, 18px) !important;
	font-weight: var(--desc-weight, 400) !important;
	color: var(--desc-color, #d8b9a3) !important;
	margin: 0 !important;
	line-height: var(--desc-lh, 160%);
	text-align: var(--desc-align, center);
	letter-spacing: 0.02em;
	white-space: pre-line; /* מאפשר שבירת שורה ידנית בטקסט */
	transform: translate(var(--desc-x, 0px), var(--desc-y, 0px));
}

/* ---------- אזור הסליידר + מדף ---------- */
#kmf-root .kmf-slider-wrap {
	--slot-w: var(--book-w, 150px);
	--slot-pv: var(--book-pv, 4);
	--slot-gap: var(--book-gap, 24px);
	position: relative;
	/* רוחב האזור = בדיוק "כמה במדף" ספרים בגודל שהוגדר (מוגבל ב-slider-max) */
	max-width: min(var(--slider-max, 1280px), calc(var(--slot-pv) * (var(--slot-w) + var(--slot-gap)) - var(--slot-gap) + 2 * var(--slider-pad-x, 80px)));
	margin: 0 auto;
	padding: 0 var(--slider-pad-x, calc(var(--arrow-size, 56px) + 24px)) var(--shelf-h, 90px);
}
#kmf-root .kmf-slider-wrap.kmf-has-set {
	--slot-w: var(--set-w, 240px);
	--slot-pv: var(--set-pv, 3);
	--slot-gap: var(--set-gap, var(--book-gap, 24px));
}

#kmf-root .kmf-swiper {
	overflow: hidden; /* חותך אופקית את הספרים שמעבר למספר שהוגדר */
	padding: 80px 0 60px; /* מרווח אנכי: הובר/צל/סטים לא נחתכים */
	margin: -80px 0 -60px; /* קיזוז — המיקום החזותי לא משתנה */
	position: relative;
	z-index: 2;
}

#kmf-root .kmf-swiper .swiper-wrapper {
	align-items: flex-end;
}

/* ה-SLIDE קובע את הרוחב (Swiper מחשב לפי slidesPerView). התמונה מתאימה לתוכו. */
#kmf-root .kmf-slide {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	height: auto;
	box-sizing: border-box;
}

/* ---------- הספר ---------- */
#kmf-root .kmf-book {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: auto;
	text-decoration: none !important;
	transform: translateY(var(--book-sit, 0px));
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
	will-change: transform;
	filter: drop-shadow(0 12px 14px rgba(0, 0, 0, var(--book-shadow, 0.5)));
}

/* התמונה: גובה כתקרה, רוחב לא עובר את רוחב ה-slide.
   זה מה שמונע ספרים ענקיים כשיש מעט פריטים. */
#kmf-root .kmf-book img {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

#kmf-root .kmf-book:hover,
#kmf-root .kmf-book:focus-visible {
	transform: translateY(calc(var(--book-sit, 0px) - var(--book-lift, 14px))) scale(1.04);
	filter: drop-shadow(0 26px 22px rgba(0, 0, 0, calc(var(--book-shadow, 0.5) + 0.1)));
}
#kmf-root .kmf-book:focus-visible {
	outline: 2px solid var(--count-color, #ffdac1);
	outline-offset: 6px;
	border-radius: 4px;
}

/* תאימות Imagify/WebP: תמונות נעטפות ב-<picture> — שימלאו את רוחב ה-slide */
#kmf-root .kmf-book picture {
	display: block;
	width: 100%;
	line-height: 0;
}

/* ---------- המדף ---------- */
#kmf-root .kmf-shelf-board {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: var(--shelf-offset, 0px);
	width: var(--shelf-width, 100%);
	height: auto;
	z-index: 1;
	pointer-events: none;
}
/* כשהמדף נעטף ב-<picture> (Imagify) — שהתמונה הפנימית תמלא */
#kmf-root .kmf-shelf-board img {
	width: 100%;
	height: auto;
	display: block;
}

/* ---------- חצים ---------- */
#kmf-root .kmf-arrow {
	position: absolute;
	top: calc(50% - var(--shelf-h, 90px) / 2 + var(--arrow-offset-y, 0px));
	transform: translateY(-50%);
	z-index: 5;
	width: var(--arrow-size, 56px) !important;
	height: var(--arrow-size, 56px) !important;
	min-width: 0 !important;
	border-radius: var(--arrow-radius, 50%) !important;
	border: 1px solid var(--arrow-border, #ae6c44) !important;
	background: var(--arrow-bg, rgba(38, 17, 9, 0.4)) !important;
	color: var(--arrow-color, #ffdac1) !important;
	cursor: pointer;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 0.25s ease, border-color 0.25s ease;
	backdrop-filter: blur(2px);
	padding: 0 !important;
	box-shadow: none !important;
}
#kmf-root .kmf-arrow:hover {
	background: var(--arrow-bg-hover, #c8763e) !important;
	border-color: var(--count-color, #ffdac1) !important;
}
#kmf-root .kmf-arrow:focus-visible {
	outline: 2px solid var(--arrow-color, #ffdac1);
	outline-offset: 3px;
}
#kmf-root .kmf-arrow svg {
	width: 42% !important;
	height: 42% !important;
}
/* RTL: prev מימין, next משמאל. offset-x מזיז פנימה/החוצה. */
#kmf-root .kmf-prev { right: var(--arrow-offset-x, 0px); }
#kmf-root .kmf-next { left: var(--arrow-offset-x, 0px); }
#kmf-root .kmf-arrow.swiper-button-disabled { opacity: 0.3; cursor: default; }

/* ============================================================
 * תפריט עוגנים
 * ============================================================ */
#kmf-nav.kmf-nav {
	position: relative;
	background: var(--kmf-nav-bg, #261109) !important;
	background-repeat: no-repeat;
	border-bottom: 1px solid rgba(174, 108, 68, 0.3);
	overflow: hidden;
	min-height: var(--kmf-nav-height, auto);
}
#kmf-nav.kmf-nav.is-sticky {
	position: sticky;
	top: 0;
	z-index: 50;
}

/* וידאו רקע לתפריט */
#kmf-nav .kmf-nav-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
}
#kmf-nav .kmf-nav-overlay {
	position: absolute;
	inset: 0;
	background: var(--kmf-nav-overlay, transparent);
	z-index: 1;
	pointer-events: none;
}

#kmf-nav .kmf-nav-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 2px;
	position: relative;
	z-index: 2;
	min-height: var(--kmf-nav-height, auto);
}

#kmf-nav .kmf-nav-item { margin: 0 !important; }
#kmf-nav .kmf-nav-item a {
	display: block;
	padding: var(--kmf-nav-pad-y, 14px) var(--kmf-nav-pad-x, 22px) !important;
	color: var(--kmf-nav-text, #ffdac1) !important;
	font-family: var(--kmf-nav-font, mugrabi, serif) !important;
	font-size: var(--kmf-nav-size, 19px) !important;
	text-decoration: none !important;
	transition: background 0.25s ease, color 0.25s ease;
	white-space: nowrap;
	border-radius: 0 !important;
}
#kmf-nav .kmf-nav-item a:hover,
#kmf-nav .kmf-nav-item a.is-active {
	background: var(--kmf-nav-active-bg, #c8763e) !important;
	color: var(--kmf-nav-active-text, #fff) !important;
}
#kmf-nav .kmf-nav-item a:focus-visible {
	outline: 2px solid var(--kmf-nav-text, #ffdac1);
	outline-offset: -2px;
}

@media (max-width: 639px) {
	#kmf-nav .kmf-nav-list {
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

@media (prefers-reduced-motion: reduce) {
	#kmf-root .kmf-book,
	#kmf-root .kmf-arrow,
	#kmf-nav .kmf-nav-item a { transition: none; }
	#kmf-root .kmf-book:hover,
	#kmf-root .kmf-book:focus-visible {
		transform: translateY(var(--book-sit, 0px));
	}
}

#kmf-root .kmf-empty {
	color: var(--count-color, #ffdac1);
	text-align: center;
	padding: 2em;
}

/* כשיש מעט ספרים — מיישרים לימין (RTL) ולא מותחים */
#kmf-root .kmf-swiper.kmf-few .swiper-wrapper {
	justify-content: flex-start;
}