/*
================================================================
PRODUCT PAGE, LOWER SECTIONS: personalization editor + purchase,
picker dialogs, "כל מה שצריך לדעת".
Figma 3NPoCFTKy8AnB4vWaHLQRM: 21:2 (desktop 1440), 26:178 (1920),
26:90 (tablet), 26:2 (mobile), 28:22/28:47/29:4, 38:14/41:2 pickers,
43:2/43:40 mobile pickers.
Mobile First. Every selector is scoped under .ppl / .ppl-info so
nothing leaks into the upper section, header, footer or other pages.
Loaded after product-page.css on single product pages only.
================================================================
*/
.ppl,
.ppl-info {
	--ppl-bg: #fbf6ef;
	--ppl-surface: #ffffff;
	--ppl-soft: #f3ebdc;
	--ppl-border: #e4d9cb;
	--ppl-ink: #171717;
	--ppl-muted: #6b655d;
	--ppl-gold: #a77635;
	--ppl-gold-soft: #dcc09a;
	--ppl-error: #b3261e;
	--ppl-ok: #2e7d32;
	--ppl-radius: 20px;
	font-family: var(--nios-font, 'Heebo', sans-serif);
	color: var(--ppl-ink);
}
.ppl *,
.ppl-info * { box-sizing: border-box; }
.ppl [hidden],
.ppl-info [hidden] { display: none !important; }

.ppl { background: var(--ppl-bg); padding-block: 40px 24px; }
.ppl__wrap { width: 100%; max-width: 1232px; margin-inline: auto; padding-inline: 16px; }
.ppl :focus-visible,
.ppl-info :focus-visible { outline: 2px solid var(--ppl-gold); outline-offset: 2px; }

/* ---------- heading ---------- */
.ppl__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; text-align: right; }
.ppl__eyebrow { margin: 0; color: var(--ppl-gold); font: 500 14px/22px var(--nios-font); }
.ppl__heading { margin: 0; color: var(--ppl-ink); font: 700 28px/40px var(--nios-font); }
.ppl__desc { margin: 0; color: var(--ppl-muted); font: 400 16px/26px var(--nios-font); }

/* ---------- two columns (RTL: first track = right) ---------- */
.ppl__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: stretch; }
.ppl-card { background: var(--ppl-surface); border: 1px solid var(--ppl-border); border-radius: var(--ppl-radius); }
.ppl-card__title { margin: 0 0 12px; color: var(--ppl-ink); font: 700 16px/24px var(--nios-font); text-align: right; }

/* ---------- preview ---------- */
.ppl-preview { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.ppl-preview .ppl-card__title { margin: 0; }
.ppl-preview:focus { outline: none; }
.ppl-stage {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	background: var(--ppl-soft);
	user-select: none;
	-webkit-user-select: none;
	/* the pan drag is handled in script, never scrolls the page, only while zoomed */
}
.ppl.is-zoomed .ppl-stage { touch-action: none; cursor: grab; }
.ppl-stage.is-panning { cursor: grabbing; }
/* The stage keeps the base image's own landscape ratio: the whole product is
   visible at 100%, never stretched, and % coordinates map 1:1 to the photo. */
.ppl .ppl-stage__zoom {
	position: relative;
	width: 100%;
	max-width: none;
	aspect-ratio: var(--pp-w, 3) / var(--pp-h, 2);
	margin: 0;
	border-radius: 0;
	background: transparent;
	will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
	.ppl:not(.is-zoomed) .ppl-stage__zoom { transition: transform 0.25s ease; }
	.ppl-stage.is-panning .ppl-stage__zoom { transition: none; }
}
.ppl .pp-canvas__base { object-fit: contain; }
/* The saved snapshot draws text without tracking: keep the live preview identical so the two match. */
.ppl .pp-layer__text { letter-spacing: 0; }
/* Line breaks the customer typed are engraved as lines (2026-10-08); a line never wraps on its own. */
.ppl .pp-layer__text { white-space: pre; }
.ppl .pp-layer__handle { min-width: 44px; min-height: 44px; width: 44px; height: 44px; transform: translate(-50%, -50%) scale(calc(1 / var(--pp-zoom, 1))); }
.ppl .pp-layer__handle span { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
.ppl .pp-layer__handle { background: transparent; border: 0; box-shadow: none; }
.ppl .pp-area { inset: 0; left: 0; top: 0; width: 100%; height: 100%; border: 0; border-radius: 0; }

.ppl-toolbar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ppl-iconbtn,
.ppl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--ppl-border);
	border-radius: 10px;
	background: var(--ppl-surface);
	color: var(--ppl-ink);
	font: 500 15px/24px var(--nios-font);
	cursor: pointer;
}
.ppl-iconbtn { min-width: 44px; padding: 0; }
.ppl-iconbtn--wide { min-width: 88px; }
.ppl-iconbtn:hover:not(:disabled),
.ppl-btn:hover:not(:disabled) { border-color: var(--ppl-gold); }
.ppl-iconbtn:disabled,
.ppl-btn:disabled { color: #b7afa5; cursor: default; }

.ppl-preview__note { margin: 0; color: var(--ppl-muted); font: 400 14px/22px var(--nios-font); text-align: right; }
.ppl-tip { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 12px; background: var(--ppl-ink); text-align: right; }
.ppl-tip__title { margin: 0; color: var(--ppl-gold-soft); font: 700 14px/22px var(--nios-font); }
.ppl-tip__text { margin: 0; color: #fff; font: 400 14px/22px var(--nios-font); }

/* ---------- controls ---------- */
.ppl-controls { display: flex; flex-direction: column; gap: 24px; padding: 16px; }
.ppl-tools { display: flex; flex-direction: column; gap: 12px; }
.ppl-trigger {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 64px;
	padding: 8px 16px;
	border: 1px solid var(--ppl-border);
	border-radius: 10px;
	background: var(--ppl-bg);
	color: var(--ppl-ink);
	font: 500 15px/24px var(--nios-font);
	text-align: right;
	cursor: pointer;
}
.ppl-trigger:hover { border-color: var(--ppl-gold); }
.ppl-trigger__label { flex: 1 1 auto; }
.ppl-trigger__value { color: var(--ppl-gold); font-size: 14px; }
.ppl-trigger__arrow { color: var(--ppl-muted); font-size: 18px; }
.ppl-tool__extra { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; padding: 16px; border: 1px solid var(--ppl-border); border-radius: 12px; background: var(--ppl-surface); }

.ppl-acc { border: 1px solid var(--ppl-border); border-radius: 12px; background: var(--ppl-surface); }
.ppl-acc.is-open { background: var(--ppl-bg); }
.ppl-acc__h { margin: 0; }
.ppl-acc__btn {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 56px;
	padding: 8px 16px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--ppl-ink);
	font: 500 15px/24px var(--nios-font);
	text-align: right;
	cursor: pointer;
}
.ppl-acc.is-open .ppl-acc__btn { font-weight: 700; font-size: 16px; }
.ppl-acc__title { flex: 1 1 auto; }
.ppl-acc__state { max-width: 45%; overflow: hidden; color: var(--ppl-gold); font: 400 13px/20px var(--nios-font); text-overflow: ellipsis; white-space: nowrap; }
.ppl-acc__chev { color: var(--ppl-muted); font-size: 18px; transition: transform 0.15s ease; }
.ppl-acc.is-open .ppl-acc__chev { transform: rotate(180deg); }
.ppl-acc__panel { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; }

.ppl-field { display: flex; flex-direction: column; gap: 6px; }
.ppl-field__label { color: var(--ppl-muted); font: 500 13px/20px var(--nios-font); }
.ppl-field__error { margin: 0; color: var(--ppl-error); font: 500 13px/20px var(--nios-font); }
.ppl-field__error:empty { display: none; }
.ppl-inputwrap { position: relative; display: block; }
.ppl-input {
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--ppl-border);
	border-radius: 10px;
	background: var(--ppl-surface);
	color: var(--ppl-ink);
	font: 500 15px/24px var(--nios-font);
}
.ppl-inputwrap .ppl-input { padding-inline-end: 56px; }
.ppl-input[aria-invalid="true"] { border-color: var(--ppl-error); }
.ppl-counter { position: absolute; inset-block-start: 50%; inset-inline-end: 12px; transform: translateY(-50%); color: var(--ppl-muted); font: 400 12px/1 var(--nios-font); pointer-events: none; }
.ppl-counter.is-limit { color: var(--ppl-error); }
/* Multi-line engraving text (2026-10-08): Enter starts a new line, the box grows (JS). */
.ppl-input--multi { display: block; padding-block: 11px; resize: none; overflow: hidden; white-space: pre-wrap; }
.ppl-inputwrap--multi .ppl-counter { inset-block-start: auto; inset-block-end: 14px; transform: none; }
.ppl-field__hint { margin: 0; color: var(--ppl-muted); font: 400 12px/18px var(--nios-font); }
.ppl-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ppl-row .ppl-btn { flex: 1 1 130px; }
.ppl-btn--font { border-color: var(--ppl-gold); background: var(--ppl-bg); }
.ppl-geo { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: 10px; background: var(--ppl-surface); border: 1px dashed var(--ppl-border); }
.ppl-range { width: 100%; min-height: 44px; accent-color: var(--ppl-gold); }
.ppl-nudge { display: flex; gap: 8px; justify-content: center; }
.ppl-seg { display: flex; gap: 8px; }
.ppl-seg button { flex: 1 1 0; min-height: 44px; border: 1px solid var(--ppl-border); border-radius: 10px; background: var(--ppl-surface); color: var(--ppl-ink); font: 500 14px/20px var(--nios-font); cursor: pointer; }
.ppl-seg button[aria-checked="true"] { background: var(--ppl-ink); border-color: var(--ppl-ink); color: #fff; }
.ppl-link { min-height: 44px; padding: 0; border: 0; background: none; color: var(--ppl-gold); font: 500 14px/20px var(--nios-font); text-align: right; text-decoration: underline; cursor: pointer; }
.ppl-upload { display: flex; align-items: center; gap: 12px; }
.ppl-upload__thumb { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--ppl-border); background: center / cover no-repeat; }
.ppl-help { margin: 0; color: var(--ppl-muted); font: 400 13px/20px var(--nios-font); }
.ppl-help[data-state="error"] { color: var(--ppl-error); }
.ppl-help[data-state="ready"] { color: var(--ppl-ok); }
.ppl-btn--jump { width: 100%; border-color: var(--ppl-border); background: var(--ppl-bg); }

/* ---------- purchase summary ---------- */
.ppl-purchase { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.ppl-purchase:focus { outline: none; }
.ppl-purchase__rows { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.ppl-purchase__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; color: var(--ppl-muted); font: 400 14px/24px var(--nios-font); }
.ppl-purchase__row dt,
.ppl-purchase__row dd { margin: 0; }
.ppl-purchase__row dd { text-align: left; }
.ppl-purchase__row--total { align-items: center; color: var(--ppl-ink); font-weight: 700; }
.ppl-purchase__row--total dt { font-size: 16px; }
.ppl-purchase__row--total dd { font-size: 28px; line-height: 40px; }
.ppl-purchase__row del { color: var(--ppl-muted); font-size: 0.75em; }
.ppl-purchase__row ins { text-decoration: none; }
.ppl-add {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 0 20px;
	border: 1px solid var(--ppl-ink);
	border-radius: 10px;
	background: var(--ppl-ink);
	color: #fff;
	font: 500 15px/24px var(--nios-font);
	cursor: pointer;
}
.ppl-add:hover:not(:disabled) { background: #2b2722; }
.ppl-add:disabled { background: #8d867d; border-color: #8d867d; cursor: default; }
.ppl-purchase__note { margin: 0; color: var(--ppl-muted); font: 400 12px/20px var(--nios-font); text-align: center; }
.ppl-purchase__status { margin: 0; min-height: 0; color: var(--ppl-muted); font: 500 13px/20px var(--nios-font); text-align: center; }
.ppl-purchase__status:empty { display: none; }
.ppl-purchase__status[data-state="error"] { color: var(--ppl-error); }
.ppl-purchase__status[data-state="success"] { color: var(--ppl-ok); }
.ppl-purchase__out { margin: 0; color: var(--ppl-muted); font: 500 14px/22px var(--nios-font); }
.ppl-purchase__out a { color: var(--ppl-gold); }
.ppl.is-busy .ppl-controls { cursor: progress; }

/* products without the editor */
.ppl--plain { padding-block: 24px; }
.ppl-plain { max-width: 520px; margin-inline: auto; padding: 24px; }
.ppl-plain__text { margin: 0 0 16px; color: var(--ppl-muted); font: 400 15px/24px var(--nios-font); }
.ppl-plain__text a { color: var(--ppl-gold); }
.ppl-plain .ppl-purchase { margin-top: 0; }

/* ---------- spinner (reduced motion: slow, still shown) ---------- */
.ppl-spinner { display: inline-block; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--ppl-border); border-top-color: var(--ppl-gold); animation: ppl-spin 0.8s linear infinite; }
.ppl-spinner--lg { width: 48px; height: 48px; border-width: 5px; }
@keyframes ppl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.ppl-spinner { animation-duration: 2.4s; }
}

/* ---------- dialogs (shared) ---------- */
.ppl-dialog {
	padding: 0;
	border: 1px solid var(--ppl-border);
	border-radius: 24px;
	background: var(--ppl-surface);
	color: var(--ppl-ink);
	font-family: var(--nios-font, 'Heebo', sans-serif);
	max-width: none;
	max-height: none;
	overscroll-behavior: contain;
}
.ppl-dialog::backdrop { background: rgba(23, 23, 23, 0.55); }
.ppl-picker {
	width: min(720px, calc(100vw - 32px));
	max-height: calc(100dvh - 32px);
	margin: auto;
	overflow: hidden;
}
.ppl-picker[open] { display: flex; }
.ppl-picker__box { display: flex; flex-direction: column; gap: 16px; width: 100%; min-height: 0; padding: 24px 16px 0; }
.ppl-picker__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } /* RTL: title on the right, close on the left */
.ppl-picker__head .ppl-iconbtn { flex: none; }
.ppl-picker__title { margin: 0; font: 700 24px/36px var(--nios-font); text-align: right; }
.ppl-picker__desc { margin: -8px 0 0; color: var(--ppl-muted); font: 400 15px/24px var(--nios-font); text-align: right; }
.ppl-picker__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.ppl-chip { min-height: 44px; padding: 0 20px; border: 1px solid var(--ppl-border); border-radius: 10px; background: var(--ppl-surface); color: var(--ppl-ink); font: 500 15px/24px var(--nios-font); cursor: pointer; }
.ppl-chip.is-active { background: var(--ppl-ink); border-color: var(--ppl-ink); color: #fff; }
/* only this area scrolls: the page behind is locked while a dialog is open */
.ppl-picker__results { flex: 1 1 auto; min-height: 160px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; margin: -2px; }
.ppl-picker__results:focus { outline: none; }
.ppl-picker__grid { display: grid; gap: 12px; }
.ppl-picker__grid--fonts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ppl-picker__grid--icons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ppl-picker__state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 16px; color: var(--ppl-muted); font: 500 15px/24px var(--nios-font); text-align: center; }
.ppl-picker__state p { margin: 0; }
.ppl-picker__more { display: flex; margin: 16px auto 0; }
.ppl-picker__foot {
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: sticky;
	inset-block-end: 0;
	padding: 12px 0 max(16px, env(safe-area-inset-bottom));
	background: var(--ppl-surface);
	border-top: 1px solid transparent;
}
.ppl-picker__chosen { margin: 0; color: var(--ppl-muted); font: 500 15px/26px var(--nios-font); }
.ppl-picker__confirm { width: 100%; }

.ppl-fontcard,
.ppl-iconcard {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	padding: 16px;
	border: 1px solid var(--ppl-border);
	border-radius: 14px;
	background: var(--ppl-surface);
	color: var(--ppl-ink);
	text-align: right;
	cursor: pointer;
}
.ppl-iconcard { align-items: center; padding: 12px; border-radius: 12px; text-align: center; }
.ppl-fontcard:hover,
.ppl-iconcard:hover { border-color: var(--ppl-gold); }
.ppl-fontcard.is-selected,
.ppl-iconcard.is-selected { border-color: var(--ppl-gold); background: var(--ppl-bg); box-shadow: inset 0 0 0 1px var(--ppl-gold); }
.ppl-fontcard.is-unusable { opacity: 0.75; }
.ppl-fontcard__name { color: var(--ppl-muted); font: 500 14px/22px var(--nios-font); }
.ppl-fontcard.is-selected .ppl-fontcard__name,
.ppl-iconcard.is-selected .ppl-iconcard__name { color: var(--ppl-gold); }
.ppl-fontcard__sample { min-height: 42px; color: var(--ppl-ink); font-size: 26px; line-height: 42px; overflow-wrap: anywhere; }
.ppl-fontcard__sample.is-loading { color: transparent; border-radius: 6px; background: linear-gradient(90deg, #f3ebdc, #fbf6ef, #f3ebdc); }
.ppl-fontcard__sample.is-failed { color: var(--ppl-error); font: 500 14px/22px var(--nios-font); }
.ppl-fontcard__langs { color: var(--ppl-muted); font: 400 12px/20px var(--nios-font); }
.ppl-fontcard__warn { color: var(--ppl-error); font: 500 12px/18px var(--nios-font); }
.ppl-iconcard__frame { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; color: var(--ppl-muted); font: 400 12px/16px var(--nios-font); }
.ppl-iconcard__frame img { max-width: 36px; max-height: 36px; width: auto; height: auto; object-fit: contain; }
.ppl-iconcard__name { color: var(--ppl-muted); font: 500 14px/24px var(--nios-font); }

/* image processing / error dialog (Figma 28:47, 29:4) */
.ppl-modal { width: min(424px, calc(100vw - 32px)); margin: auto; }
.ppl-modal__box { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 24px 24px; text-align: center; }
.ppl-modal__alert { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 5px solid var(--ppl-error); border-radius: 50%; color: var(--ppl-error); font: 700 28px/1 var(--nios-font); }
.ppl-modal__title { margin: 8px 0 0; font: 700 24px/34px var(--nios-font); }
.ppl-modal__title:focus { outline: none; }
.ppl-modal__text { margin: 0; color: var(--ppl-muted); font: 400 15px/24px var(--nios-font); }
.ppl-modal__note { margin: 0; color: var(--ppl-gold); font: 500 14px/22px var(--nios-font); }
.ppl-modal__actions { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 8px; }
.ppl-modal__actions .ppl-btn { width: 100%; }
.ppl-modal__actions .ppl-link { text-align: center; }

/* ---------- "כל מה שצריך לדעת" ---------- */
.ppl-info { background: var(--ppl-bg); padding-block: 24px 48px; }
.ppl-info__heading { margin: 0 0 24px; font: 700 24px/36px var(--nios-font); text-align: right; }
.ppl-info__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.ppl-spec { display: flex; flex-direction: column; gap: 16px; padding: 24px 16px; border-radius: var(--ppl-radius); background: var(--ppl-soft); text-align: right; }
.ppl-spec__heading,
.ppl-faq__heading { margin: 0; font: 700 22px/32px var(--nios-font); }
.ppl-spec__sub { margin: 0; font: 700 20px/30px var(--nios-font); }
.ppl-spec__body { color: var(--ppl-muted); font: 400 16px/28px var(--nios-font); overflow-wrap: anywhere; }
.ppl-spec__body p { margin: 0 0 1em; }
.ppl-spec__body > :last-child { margin-bottom: 0; }
.ppl-spec__body ul,
.ppl-spec__body ol { margin: 0 0 1em; padding-inline-start: 1.4em; }
.ppl-spec__body li { margin-bottom: 0.35em; }
.ppl-spec__body a { color: var(--ppl-gold); }
.ppl-spec__body strong,
.ppl-spec__body b { color: var(--ppl-ink); }
.ppl-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; margin: 0; }
.ppl-fact { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; padding: 16px; border-radius: 12px; background: var(--ppl-surface); }
.ppl-fact__value { order: -1; margin: 0; color: var(--ppl-ink); font: 700 18px/28px var(--nios-font); overflow-wrap: anywhere; }
.ppl-fact__label { margin: 0; color: var(--ppl-muted); font: 400 13px/22px var(--nios-font); overflow-wrap: anywhere; }
.ppl-spec__sku { margin: 0; color: var(--ppl-muted); font: 400 13px/20px var(--nios-font); }

.ppl-faq { display: flex; flex-direction: column; gap: 16px; padding: 24px 16px; text-align: right; }
.ppl-faq__list { display: flex; flex-direction: column; }
.ppl-faq__item { border-radius: 12px; }
.ppl-faq__item.is-open { background: var(--ppl-bg); }
.ppl-faq__q { margin: 0; }
.ppl-faq__btn {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	padding: 12px 14px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--ppl-ink);
	font: 500 15px/28px var(--nios-font);
	text-align: right;
	cursor: pointer;
}
.ppl-faq__item.is-open .ppl-faq__btn { font-weight: 700; font-size: 16px; padding-block-end: 4px; }
.ppl-faq__btn > span:first-child { flex: 1 1 auto; }
.ppl-faq__sign { flex: none; width: 24px; height: 28px; position: relative; color: var(--ppl-muted); }
.ppl-faq__sign::before,
.ppl-faq__sign::after { content: ''; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: currentColor; }
.ppl-faq__sign::after { transform: rotate(90deg); transition: transform 0.15s ease; }
.ppl-faq__item.is-open .ppl-faq__sign::after { transform: rotate(0); }
.ppl-faq__a { padding: 0 14px 14px; color: var(--ppl-muted); font: 400 14px/24px var(--nios-font); overflow-wrap: anywhere; }
.ppl-faq__a p { margin: 0 0 0.8em; }
.ppl-faq__a > :last-child { margin-bottom: 0; }
.ppl-faq__a a { color: var(--ppl-gold); }
.ppl-faq__a ul,
.ppl-faq__a ol { margin: 0 0 0.8em; padding-inline-start: 1.4em; }

/* ---------- tablet 768 ---------- */
@media (min-width: 768px) {
	.ppl { padding-block: 56px 32px; }
	.ppl__wrap { padding-inline: 32px; }
	.ppl__heading { font-size: 36px; line-height: 48px; }
	.ppl-preview { padding: 16px; }
	.ppl-controls { padding: 24px; }
	.ppl-spec,
	.ppl-faq { padding: 24px; }
	.ppl-info__heading { font-size: 28px; line-height: 40px; }
	.ppl-picker { width: min(720px, calc(100vw - 64px)); }
	.ppl-picker__box { padding: 32px 32px 0; }
	.ppl-picker__title { font-size: 28px; line-height: 44px; }
	.ppl-picker__grid--fonts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ppl-picker__grid--icons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ppl-picker__foot { flex-direction: row; align-items: center; justify-content: space-between; }
	.ppl-picker__confirm { width: 220px; }
}

/* ---------- desktop: 400 controls (left) + 768 preview (right), 32 gap ---------- */
@media (min-width: 1232px) {
	.ppl__wrap { padding-inline: 16px; }
	.ppl__cols { grid-template-columns: minmax(0, 768px) minmax(0, 400px); gap: 32px; justify-content: center; }
	.ppl-info__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
	.ppl-info__cols--single { grid-template-columns: minmax(0, 1fr); }
	.ppl-btn--jump { display: none; } /* the preview is beside the controls: nothing to jump to */
}

/* ---------- narrow phones: keep every target at least 44px, allow wrapping ---------- */
@media (max-width: 400px) {
	.ppl__wrap { padding-inline: 12px; }
	.ppl-picker__grid--fonts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ppl-fontcard { padding: 14px 12px; }
	.ppl-fontcard__sample { font-size: 24px; }
}
@media (max-width: 767px) {
	.ppl-picker { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
	.ppl-picker__grid--icons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* A family whose colors cost different amounts shows the range ("X עד Y")
	   in the purchase summary before a color is chosen. Too wide for the
	   28px total row or the 14px price row at phone width; shrink both. The
	   total row's dd matches both rules (its wrapper carries both classes),
	   so the plain row rule excludes it to avoid a specificity tie. */
	.ppl-purchase__row:not(.ppl-purchase__row--total) dd[data-pc-price-range] { font-size: 12px; }
	.ppl-purchase__row--total dd[data-pc-price-range] { font-size: 18px; line-height: 26px; }
}