/* ==========================================================================
   PrintBox Skin v1 (2026-10-01) — personalizatorul pe tokenii Storefront: alb curat,
   butoane solide, colțuri rotunde, „Continuă · preț” vizibil și pe telefon.

   Se încarcă DOAR când comutatorul `fpd_skin` (FPD Settings → PrintBox → Skin & Flow)
   e pornit ȘI produsul e pe un layout UI Composer al cărui id începe cu `uiprintbox`.
   Oprit = FPD-ul de dinainte, neatins. Doar CSS: nimic injectat în componentele FPD,
   starea se citește de pe container (lecțiile din UPLOAD-SHEET-README.md).
   Documentație: SKIN-README.md
   ========================================================================== */

:root {
	/* tokenii PrintBox ai personalizatorului (comuni skin-ului și foilor) */
	--pbx-ink: #1f2d3d;
	--pbx-text: var(--pbsf-text, #3F3F46);
	--pbx-muted: #71717a;
	--pbx-line: #ECEAE5;
	--pbx-bg: #F6F7F8;
	--pbx-red: var(--pbsf-red, #E8392E);
	--pbx-red-dark: var(--pbsf-red-dark, #C92E24);
	--pbx-green: #11875A;
	/* culoarea butoanelor de acțiune din personalizator: verde peste tot (user, 2 oct 2026: „toate butoanele care au
	   rămas roșii în personalizator să aibă aceeași culoare, verde”). Roșul rămâne doar la avertismente. */
	--pbx-cta: var(--pbx-green);
	--pbx-cta-dark: #0D6E49;
	--pbx-radius: 12px;
	--pbx-bar-h: 56px;

	/* tokenii FPD rescriși (bundle-ul îi folosește în ~790 de reguli) */
	--fpd-btn-primary-color: var(--pbx-cta);
	--fpd-btn-primary-text-color: #fff;
	--fpd-text-color: var(--pbx-text);
	--fpd-light-bg-color: var(--pbx-bg);
	--fpd-light-grey-color: var(--pbx-line);
	--fpd-border-color: var(--pbx-line);
	--fpd-border-radius: var(--pbx-radius);
	--fpd-actions-bar-bg-color: #fff;
	--fpd-actions-bar-height: var(--pbx-bar-h);
	--fpd-tooltip-bg-color: var(--pbx-ink);
	--fpd-snackbar-bg-color: var(--pbx-ink);
}

/* ---------- Bara de sus: albă, cu linie fină; iconițe navy ---------- */
.fpd-container fpd-actions-bar {
	background: #fff;
	border-bottom: 1px solid var(--pbx-line);
	color: var(--pbx-ink);
	padding: 0 10px;
	box-sizing: border-box;
}
.fpd-container fpd-actions-bar .fpd-btn,
.fpd-container fpd-actions-bar .fpd-dropdown-btn {
	color: var(--pbx-ink);
}
.fpd-container fpd-actions-bar .fpd-btn:not(.fpd-done):hover {
	background: var(--pbx-bg);
	border-radius: 10px;
}

/* Butonul de finalizare: pastilă plină (verde, culoarea de acțiune), cu eticheta vizibilă și pe telefon */
.fpd-container fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-btn-fill.fpd-done {
	background: var(--pbx-cta);
	color: #fff;
	border-radius: 999px;
	height: 40px;
	padding: 0 16px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}
.fpd-container fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-btn-fill.fpd-done:hover {
	background: var(--pbx-cta-dark);
}
.fpd-container fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-icon-done {
	display: none;
}
/* eticheta: textul original e ascuns, cel nou vine din variabilă (ca la foi) */
.fpd-container.fpd-wrapper fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-label,
.fpd-container.fpd-wrapper.fpd-layout-small fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-label {
	display: inline;
	font-size: 0;
	line-height: 0;
}
.fpd-container.fpd-wrapper fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-label::after {
	content: var(--pbx-done-label, 'Continuă');
	font-size: 14px;
	line-height: 1;
	font-weight: 800;
}
.fpd-container fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-total-price {
	color: #fff;
	font-weight: 800;
	font-size: 14px;
	line-height: 1;
}
.fpd-container fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-total-price::before {
	content: '·';
	margin-right: 6px;
	opacity: .85;
}

/* X-ul: cerc gri, ușor de nimerit */
.fpd-container.fpd-wrapper fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-close:last-child {
	width: 40px;
	height: 40px;
	padding: 0;
	margin-left: 8px;
	border-radius: 50%;
	background: var(--pbx-bg);
	color: var(--pbx-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
}

/* ---------- Zona de lucru ---------- */
.fpd-container fpd-main-wrapper {
	background: var(--pbx-bg);
}

/* ---------- Butoane în panouri: pline, fără majuscule forțate ---------- */
.fpd-container fpd-main-bar .fpd-btn {
	border-radius: 999px;
	text-transform: none;
	font-weight: 700;
	letter-spacing: 0;
}
.fpd-container fpd-main-bar textarea,
.fpd-container fpd-main-bar input[type=text] {
	border-radius: var(--pbx-radius);
	border-color: var(--pbx-line);
	color: var(--pbx-ink);
}

/* Navigația de jos / laterală (când layoutul are un modul): text navy */
.fpd-container fpd-main-bar > .fpd-navigation > .fpd-nav-item {
	color: var(--pbx-ink);
}

/* ---------- Foaia de poze (Upload Sheet): butonul pe culoarea de acțiune ---------- */
.fpd-container .fpd-upload-zone-panel.fpd-active .fpd-upload-image .fpd-btn {
	background: var(--pbx-cta) !important;
	border-radius: 999px;
}
.fpd-container .fpd-upload-zone-panel.fpd-active .fpd-upload-image .fpd-btn:hover {
	background: var(--pbx-cta-dark) !important;
}
.fpd-container .fpd-upload-zone-panel.fpd-active .fpd-upload-image::before {
	color: var(--pbx-ink);
}

/* ---------- Bara de unelte a elementului ---------- */
/* aceleași unelte ascunse ca în layoutul „UI Perne” (paritate de comportament), cu sintaxă corectă */
fpd-element-toolbar .fpd-tool-text-bold,
fpd-element-toolbar .fpd-tool-text-italic,
fpd-element-toolbar .fpd-tool-text-underline,
fpd-element-toolbar .fpd-tool-text-transform,
fpd-element-toolbar .fpd-tool-text-letter-spacing,
fpd-element-toolbar .fpd-tool-text-line-spacing,
fpd-element-toolbar .fpd-tool-position {
	display: none !important;
}
.fpd-module-tabs > [data-context="qr-code"] {
	display: none !important;
}
fpd-element-toolbar {
	color: var(--pbx-ink);
}
/* pe telefon bara e fixată jos (mutată în body de FPD): foaie albă cu colțuri sus */
fpd-element-toolbar.fpd-smart.fpd-layout-small {
	background: #fff;
	border-top: 1px solid var(--pbx-line);
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -6px 24px rgba(31, 45, 61, .12);
}
/* pe desktop: card cu umbră */
fpd-element-toolbar.fpd-smart:not(.fpd-layout-small) {
	border: 1px solid var(--pbx-line);
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(31, 45, 61, .14);
}

/* ---------- v1.1: bara de sus pe telefon — grupurile nu se mai calcă ---------- */
/* În bundle fiecare grup (stânga / centru / dreapta / modal) primește flex:1, deci pe 390 px
   butonul de finalizare ajunge peste iconițe. Aici: grupurile goale dispar, centrul stă la stânga,
   iar butonul de finalizare ia loc cât îi trebuie, lipit de dreapta. */
.fpd-container.fpd-wrapper.fpd-layout-small fpd-actions-bar > [data-pos=left].fpd-visible-hidden,
.fpd-container.fpd-wrapper.fpd-layout-small fpd-actions-bar > [data-pos=right].fpd-visible-hidden {
	display: none;
}
/* grupul din centru are continutul centrat pe o latime calculata de bundle (iese zero cand nu mai e flex:1),
   asa ca ii dam latimea a 4 actiuni (27 px fiecare) si aliniem butoanele la stanga */
.fpd-container.fpd-wrapper.fpd-layout-small fpd-actions-bar > [data-pos=center] {
	flex: 0 0 auto;
	min-width: 108px;
	text-align: left;
}
.fpd-container.fpd-wrapper.fpd-layout-small fpd-actions-bar > [data-pos=center] .fpd-uncollapsed-menu {
	justify-content: flex-start;
}
.fpd-container.fpd-wrapper.fpd-layout-small fpd-actions-bar > [data-pos=modal] {
	flex: 1 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.fpd-container.fpd-wrapper.fpd-layout-small fpd-actions-bar [data-pos=center] .fpd-btn {
	padding: 7px 5px;
	margin-left: 0;
	font-size: 17px;
}
.fpd-container.fpd-wrapper.fpd-layout-small fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-label::after,
.fpd-container.fpd-wrapper.fpd-layout-small fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-total-price {
	font-size: 13px;
}
.fpd-container.fpd-wrapper.fpd-layout-small fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-btn-fill.fpd-done {
	height: 38px;
	padding: 0 11px;
	margin-left: 0;
}
.fpd-container.fpd-wrapper.fpd-layout-small fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-close:last-child {
	width: 38px;
	height: 38px;
	margin-left: 6px;
}
.fpd-container.fpd-wrapper.fpd-layout-small fpd-actions-bar {
	padding: 0 8px 0 4px;
}

/* ---------- v1.1: verificarea dinaintea coșului (Pre-Cart) pe culorile site-ului ---------- */
body .fpd-precart-card {
	border-radius: 16px;
}
body .fpd-precart-title {
	color: var(--pbx-ink);
}
body .fpd-precart-ok {
	background: var(--pbx-cta);
	border-radius: 999px;
	font-weight: 800;
}
body .fpd-precart-ok:hover {
	background: var(--pbx-cta-dark);
}
body .fpd-precart-back {
	border-radius: 999px;
	border-color: var(--pbx-line);
	color: var(--pbx-ink);
}

/* ==========================================================================
   v1.2 (2026-10-01, după verdictul userului pe pilot)
   - butonul de finalizare e VERDE, cu coș și „Adaugă în coș · preț”: produsul intră direct în coș
   - „Done Gate” (fpd-done-gate.js): cât timp produsul NU poate intra în coș, butonul e alb și spune ce lipsește
   - iconițele din stânga, mai aerisite (se strâng singure pe telefoanele înguste)
   ========================================================================== */
:root {
	--pbx-green-dark: #0d6f4a;
	--pbx-ico-pad: clamp(5px, 1.7vw, 10px);
}

/* gata de coș (și starea implicită, dacă scriptul de stare nu rulează) */
.fpd-container fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-btn-fill.fpd-done {
	background: var(--pbx-green);
}
.fpd-container fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-btn-fill.fpd-done:hover {
	background: var(--pbx-green-dark);
}
.fpd-container fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-icon-done {
	display: inline-flex;
	align-items: center;
}
.fpd-container fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-icon-done::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zM7.16 14l.84-2h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49a.996.996 0 00-.88-1.48H5.21L4.27 2H1v2h2l3.6 7.59-1.35 2.44C4.52 14.37 5.48 16 7 16h12v-2H7.16z'/%3E%3C/svg%3E") center / contain no-repeat;
	vertical-align: middle;
}
.fpd-container.fpd-wrapper fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-label::after {
	content: var(--pbx-done-label, 'Adaugă în coș');
}

/* încă nu poate intra în coș: buton alb cu contur, fără coș și fără preț, cu ce lipsește */
.fpd-container.pbx-done-wait fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-btn-fill.fpd-done,
.fpd-container.pbx-done-wait fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-btn-fill.fpd-done:hover {
	background: #fff;
	color: var(--pbx-ink);
	box-shadow: inset 0 0 0 1.5px var(--pbx-ink);
}
.fpd-container.pbx-done-wait fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-icon-done,
.fpd-container.pbx-done-wait fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-total-price {
	display: none !important;
}
.fpd-container.fpd-wrapper.pbx-done-wait fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-label::after {
	color: var(--pbx-ink);
}
.fpd-container.fpd-wrapper.pbx-done-wait.pbx-need-photo fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-label::after {
	content: var(--pbx-wait-photo, 'Încarcă poza');
}
.fpd-container.fpd-wrapper.pbx-done-wait.pbx-need-photos fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-label::after {
	content: var(--pbx-wait-photos, 'Încarcă pozele') var(--pbx-zone-count, '');
}
.fpd-container.fpd-wrapper.pbx-done-wait.pbx-need-edit fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-label::after {
	content: var(--pbx-wait-edit, 'Personalizează');
}
.fpd-container.fpd-wrapper.pbx-done-wait.pbx-need-load fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-label::after {
	content: var(--pbx-wait-load, 'Se încarcă…');
}

/* iconițele din stânga: mai mult aer între ele; pe ecrane înguste se strâng singure */
.fpd-container.fpd-wrapper.fpd-layout-small fpd-actions-bar [data-pos=center] .fpd-btn {
	padding: 9px var(--pbx-ico-pad);
	font-size: 18px;
}
.fpd-container.fpd-wrapper.fpd-layout-small fpd-actions-bar > [data-pos=center] {
	min-width: calc(3 * (18px + 2 * var(--pbx-ico-pad)));
}
.fpd-container.fpd-wrapper:not(.fpd-layout-small) fpd-actions-bar [data-pos=center] .fpd-btn {
	padding: 9px 12px;
	margin-left: 4px;
}

/* telefoane obișnuite (până la 419 px, adică iPhone 12–15 la 390 / 393 și Android la 412): totul rămâne, dar puțin mai strâns,
   altfel „coș + Adaugă în coș · preț” împinge X-ul în afara ecranului */
@media (max-width: 419px) {
	.fpd-container.fpd-wrapper.fpd-layout-small fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-btn-fill.fpd-done {
		padding: 0 9px;
		gap: 5px;
	}
	.fpd-container.fpd-wrapper.fpd-layout-small fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-label::after,
	.fpd-container.fpd-wrapper.fpd-layout-small fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-total-price {
		font-size: 12.5px;
	}
	.fpd-container fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-icon-done::before {
		width: 16px;
		height: 16px;
	}
	.fpd-container.fpd-wrapper.fpd-layout-small fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-close:last-child {
		width: 36px;
		height: 36px;
		margin-left: 5px;
	}
}

/* telefoane foarte înguste: fără iconița de coș, literă mai mică, ca să încapă „Adaugă în coș · preț” */
@media (max-width: 379px) {
	.fpd-container fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-icon-done {
		display: none;
	}
	.fpd-container.fpd-wrapper.fpd-layout-small fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-label::after,
	.fpd-container.fpd-wrapper.fpd-layout-small fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-total-price {
		font-size: 12px;
	}
	.fpd-container.fpd-wrapper.fpd-layout-small fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-btn-fill.fpd-done {
		padding: 0 9px;
	}
}

/* bundle-ul pune `text-transform: capitalize` pe butoanele din bară („Adaugă În Coș”): textul rămâne cum e scris */
.fpd-container fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done,
.fpd-container fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-label::after {
	text-transform: none;
}

/* cât e deschis personalizatorul, lansatorul de chat nu are ce căuta peste unelte */
body:has(.fpd-modal-product-designer.fpd-show) #pbcg-launcher {
	display: none !important;
}

/* ---------- v1.3 (recenzia din 1 oct 2026) ---------- */
/* bundle-ul pune margin-left:5px pe span-urile din butoane: textul nu mai era centrat în pastilă */
.fpd-container fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-label,
.fpd-container fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-total-price {
	margin-left: 0;
}
/* tabletă și desktop îngust (768–935 px): grupul din dreapta primea doar 33 % din bară și X-ul se turtea */
.fpd-container.fpd-wrapper:not(.fpd-layout-small) fpd-actions-bar > [data-pos=modal] {
	flex: 0 0 auto;
	max-width: none;
}
.fpd-container.fpd-wrapper fpd-actions-bar [data-pos=modal] > .fpd-btn {
	flex-shrink: 0;
}
/* „Se încarcă…”: bundle-ul pune opacity .2 pe .fpd-disabled, ilizibil pe butonul alb */
.fpd-container.pbx-done-wait fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done.fpd-disabled {
	opacity: .55 !important;
}
/* X-ul foilor (poze / text): cerc adevărat (bundle-ul îi lasă padding 0 15px) și zonă de atingere mai mare */
.fpd-container.fpd-layout-small fpd-main-bar > .fpd-close {
	padding: 0 !important;
}
.fpd-container.fpd-layout-small fpd-main-bar > .fpd-close::after {
	content: '';
	position: absolute;
	inset: -8px;
}
/* trepte de lățime: aerul dintre iconițe are prioritate față de iconița de coș */
@media (max-width: 419px) {
	:root {
		--pbx-ico-pad: 7px;
	}
}
@media (max-width: 379px) {
	:root {
		--pbx-ico-pad: 6px;
	}
}
@media (max-width: 349px) {
	.fpd-container.fpd-wrapper fpd-actions-bar [data-pos=modal] > .fpd-btn.fpd-done .fpd-total-price {
		display: none !important;
	}
	/* colaj pe telefoane foarte înguste: „Poze · 2 din 9”, ca X-ul să nu atingă marginea */
	.fpd-container.fpd-wrapper.pbx-need-photos {
		--pbx-wait-photos: 'Poze';
	}
}

/* verificarea dinaintea coșului: confirmarea e tot „în coș”, deci verde */
body .fpd-precart-ok {
	background: var(--pbx-green);
}
body .fpd-precart-ok:hover {
	background: var(--pbx-green-dark);
}

/* ---------- v1.5: caseta de text cu contor (fpd-text-box.js) ---------- */
/* Contorul și mesajul nu sunt elemente noi în componenta FPD: sunt ::after / ::before pe panoul de editare, cu
   textul venit din variabile CSS puse de script pe bara de unelte (atributele data-pbx-* supraviețuiesc
   rescrierii claselor de către FPD). Fără script (comutator oprit) rămâne doar caseta restilizată. */
fpd-element-toolbar.fpd-smart .fpd-sub-panel > .fpd-panel-edit-text.fpd-active {
	padding: 14px 14px 12px;
	height: auto;
}
fpd-element-toolbar .fpd-panel-edit-text textarea[data-control="text"] {
	box-sizing: border-box;
	width: 100%;
	height: calc(var(--pbx-text-rows, 3) * 24px + 25px);
	min-height: 0;
	margin: 0 !important;
	padding: 11px 14px;
	font-size: 16px; /* sub 16 px iOS mărește pagina la focus */
	line-height: 24px;
	color: var(--pbx-ink);
	background: #fff;
	border: 1.5px solid var(--pbx-line);
	border-radius: var(--pbx-radius);
	box-shadow: none;
	resize: none;
	-webkit-appearance: none;
	appearance: none;
}
fpd-element-toolbar .fpd-panel-edit-text textarea[data-control="text"]:focus {
	border-color: var(--pbx-ink);
	outline: none;
}
/* text pe un singur rând în design: și în casetă stă pe un rând, cu derulare pe orizontală */
fpd-element-toolbar[data-pbx-text-lines="1"] .fpd-panel-edit-text textarea[data-control="text"] {
	white-space: pre;
	overflow-wrap: normal;
	overflow-x: auto;
	overflow-y: hidden;
}
fpd-element-toolbar[data-pbx-text] .fpd-panel-edit-text.fpd-active::after {
	content: var(--pbx-text-count, '');
	align-self: flex-end;
	margin-top: 6px;
	font-size: 12px;
	line-height: 16px;
	color: #6b7280;
	font-variant-numeric: tabular-nums;
}
fpd-element-toolbar[data-pbx-text="limit"] .fpd-panel-edit-text.fpd-active::after {
	color: var(--pbx-red);
	font-weight: 700;
}
fpd-element-toolbar[data-pbx-text="limit"] .fpd-panel-edit-text textarea[data-control="text"] {
	border-color: var(--pbx-red);
}
fpd-element-toolbar[data-pbx-text-msg] .fpd-panel-edit-text.fpd-active::before {
	content: var(--pbx-text-msg, '');
	order: 3;
	margin-top: 2px;
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
	color: var(--pbx-red);
}
/* tastatura telefonului: caseta urcă deasupra ei (înălțimea vine din visualViewport, prin script) */
fpd-element-toolbar.fpd-smart.fpd-layout-small[data-pbx-kb] {
	bottom: var(--pbx-kb, 0px) !important;
	padding-bottom: 0;
}
/* ...iar tabloul se ridică atât cât textul editat să rămână la vedere deasupra casetei */
.fpd-container.fpd-wrapper.fpd-layout-small > fpd-main-wrapper .fpd-product-stage {
	transition: transform .18s ease;
}
.fpd-container.fpd-wrapper.fpd-layout-small[data-pbx-lift] > fpd-main-wrapper .fpd-product-stage {
	transform: translateY(calc(-1 * var(--pbx-lift, 0px)));
}

/* ---------- v1.6: lista de fonturi ---------- */
/* FPD scrie deja fiecare font cu fontul lui și are căutare; aici doar o facem folosibilă pe telefon: rânduri
   înalte, de atins cu degetul, fontul curent bifat, lista derulabilă (în bundle avea 100 px, cu restul tăiat),
   căutarea ascunsă cât timp fonturile încap pe un ecran. Lista de fonturi a fiecărui produs rămâne cea din FPD. */
fpd-element-toolbar.fpd-smart .fpd-sub-panel > .fpd-panel-font-family.fpd-active {
	padding: 14px 14px 10px;
	height: auto;
}
fpd-element-toolbar .fpd-panel-font-family > input[type="text"] {
	box-sizing: border-box;
	width: 100%;
	height: 46px;
	margin: 0 0 8px !important;
	padding: 0 14px;
	font-size: 16px;
	color: var(--pbx-ink);
	background: #fff;
	border: 1.5px solid var(--pbx-line);
	border-radius: var(--pbx-radius);
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
fpd-element-toolbar .fpd-panel-font-family > input[type="text"]:focus {
	border-color: var(--pbx-ink);
	outline: none;
}
/* până la 8 fonturi se văd toate dintr-o privire: căutarea ar fi doar zgomot */
fpd-element-toolbar .fpd-panel-font-family:not(:has(.fpd-fonts-list > .fpd-item:nth-child(9))) > input[type="text"] {
	display: none;
}
fpd-element-toolbar.fpd-smart .fpd-sub-panel > .fpd-panel-font-family > .fpd-scroll-area {
	height: auto;
	max-height: min(40vh, 312px);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	margin: 0;
}
fpd-element-toolbar.fpd-smart.fpd-panel-visible > .fpd-sub-panel .fpd-panel-font-family .fpd-fonts-list {
	max-height: none;
	height: auto;
	gap: 0;
}
fpd-element-toolbar .fpd-sub-panel .fpd-panel-font-family .fpd-fonts-list > .fpd-item {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 4px 44px 4px 12px;
	font-size: 23px;
	line-height: 1.15;
	color: var(--pbx-ink);
	border-bottom: 1px solid var(--pbx-line);
	transition: background-color .15s ease;
	overflow: hidden;
	white-space: nowrap;
}
fpd-element-toolbar .fpd-sub-panel .fpd-panel-font-family .fpd-fonts-list > .fpd-item:last-child {
	border-bottom: 0;
}
fpd-element-toolbar .fpd-sub-panel .fpd-panel-font-family .fpd-fonts-list > .fpd-item:hover {
	padding-left: 12px; /* bundle-ul îl împingea cu 5 px la hover */
}
fpd-element-toolbar .fpd-sub-panel .fpd-panel-font-family .fpd-fonts-list > .fpd-item.fpd-active {
	color: var(--pbx-ink);
	background: var(--pbx-bg);
	border-bottom-color: transparent;
	border-radius: 10px;
}
/* bifa fontului curent: desenată, ca să nu depindă de fontul rândului */
fpd-element-toolbar .fpd-sub-panel .fpd-panel-font-family .fpd-fonts-list > .fpd-item.fpd-active::after {
	content: '';
	position: absolute;
	right: 16px;
	top: 50%;
	width: 7px;
	height: 13px;
	margin-top: -9px;
	border: solid var(--pbx-green);
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}
/* din caseta de text, tabul de sus duce direct la fonturi (dacă designul permite schimbarea fontului):
   eticheta „Înapoi” devine „Schimbă fontul”; clickul îl mută fpd-text-box.js pe lista de fonturi */
fpd-element-toolbar[data-pbx-font-tab] > .fpd-close-sub-panel > .fpd-icon-back {
	display: none;
}
fpd-element-toolbar[data-pbx-font-tab] > .fpd-close-sub-panel > .fpd-label {
	font-size: 0;
}
fpd-element-toolbar[data-pbx-font-tab] > .fpd-close-sub-panel > .fpd-label::after {
	content: var(--pbx-font-tab, 'Schimbă fontul');
	font-size: 13px;
	font-weight: 600;
	color: var(--pbx-ink);
}
fpd-element-toolbar[data-pbx-font-tab] > .fpd-close-sub-panel > .fpd-label::before {
	content: 'Aa';
	margin-right: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--pbx-red);
}

/* ---------- v1.7: potrivirea literei la schimbarea fontului ---------- */
/* mesajul scriptului se vede și în lista de fonturi (deasupra ei); „info” = anunț, nu eroare */
fpd-element-toolbar[data-pbx-text-msg] .fpd-panel-font-family.fpd-active::before {
	content: var(--pbx-text-msg, '');
	margin: 0 2px 10px;
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
	color: var(--pbx-red);
}
fpd-element-toolbar[data-pbx-text-msg="info"] .fpd-panel-font-family.fpd-active::before,
fpd-element-toolbar[data-pbx-text-msg="info"] .fpd-panel-edit-text.fpd-active::before {
	color: var(--pbx-ink);
	font-weight: 500;
}

/* ---------- v1.8: mesajul de la închiderea editorului (fpd-close-note.js) ---------- */
/* element al nostru, în body: apare pe pagina produsului după ce editorul s-a închis, deasupra barei lipicioase */
.pbx-toast {
	position: fixed;
	left: 50%;
	bottom: calc(92px + env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%);
	z-index: 2147483000;
	box-sizing: border-box;
	width: max-content;
	max-width: min(92vw, 420px);
	padding: 12px 44px 12px 16px; /* loc pentru X-ul din dreapta */
	border-radius: 14px;
	background: var(--pbx-ink, #1f2d3d);
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 500;
	text-align: left;
	box-shadow: 0 10px 30px rgba(31, 45, 61, .28);
	cursor: pointer;
	animation: pbx-toast-in .22s ease-out;
}
/* X-ul mesajului (user, 2 oct 2026: „mi-ar plăcea să le pot închide și de la un X sau de la o atingere”). Mesajul întreg
   se închide la atingere (fiecare script îi pune `click`); X-ul arată că se poate. Se închide și singur, ca înainte. */
.pbx-toast::after {
	content: "\2715";
	position: absolute;
	top: 50%;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
}
@keyframes pbx-toast-in {
	from { opacity: 0; transform: translate(-50%, 10px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- v1.9: foaia „Adaugă text” (textul plătit), adusă la nivelul casetei de text ---------- */
.fpd-container.fpd-wrapper fpd-module-text .fpd-add-text {
	display: flex;
	flex-direction: column;
	padding: 4px 2px 0;
}
.fpd-container.fpd-wrapper fpd-module-text .fpd-add-text textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 104px;
	margin: 0;
	padding: 11px 14px;
	font-size: 16px; /* sub 16 px iOS mărește pagina la focus */
	line-height: 24px;
	color: var(--pbx-ink);
	background: #fff;
	border: 1.5px solid var(--pbx-line);
	border-radius: var(--pbx-radius);
	box-shadow: none;
	resize: none;
	-webkit-appearance: none;
	appearance: none;
}
.fpd-container.fpd-wrapper fpd-module-text .fpd-add-text textarea:focus {
	border-color: var(--pbx-ink);
	outline: none;
}
.fpd-container.fpd-wrapper fpd-module-text .fpd-add-text textarea::placeholder {
	font-size: 13.5px;
	line-height: 20px;
	color: #8a94a0;
}
/* mesajul scriptului (emoticoane), între casetă și buton */
.fpd-container.fpd-wrapper[data-pbx-add-msg] fpd-module-text .fpd-add-text::after {
	content: var(--pbx-add-msg, '');
	order: 1;
	margin-top: 6px;
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
	color: var(--pbx-red);
}
.fpd-container.fpd-wrapper fpd-module-text .fpd-add-text .fpd-btn {
	order: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	min-height: 50px;
	margin: 12px 0 8px;
	padding: 0 16px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
}
/* Prețul textului plătit: FPD scrie „ - 10lei” lipit de etichetă. Cât scriptul casetei de text a citit prețul (atributul
   data-pbx-text-price pe container), îl afișăm ca „(+10 lei)”, din variabila CSS pusă de el. */
.fpd-container.fpd-wrapper[data-pbx-text-price] fpd-module-text .fpd-add-text .fpd-btn .fpd-price {
	display: inline-flex;
	align-items: center;
	font-size: 0;
	line-height: 1;
}
.fpd-container.fpd-wrapper[data-pbx-text-price] fpd-module-text .fpd-add-text .fpd-btn .fpd-price::after {
	content: var(--pbx-text-price);
	margin-left: 6px;
	line-height: 1.2;
	font-size: 16px;
	font-weight: 600;
	opacity: .92;
}
.fpd-container.fpd-wrapper fpd-module-text .fpd-add-text .fpd-btn .woocommerce-Price-currencySymbol {
	margin-left: .25em;
}

/* ---------- v2.1: Photo Touch (fpd-photo-touch.js): panoul pozei, pe ecranele cu atingere ---------- */
/* Element al nostru, în body. Două forme (atributul data-variant, pus de script):
   „a” = un rând de butoane lipit DEASUPRA barei de unelte FPD, care rămâne la locul ei, fără colțuri;
   „b” = o singură bară, în locul celei FPD (aceea rămâne în pagină, transparentă: butoanele noastre îi apasă uneltele). */
.pbx-photo-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2147483647;
	box-sizing: border-box;
	padding: 10px 12px 10px;
	background: #fff;
	border-top: 1px solid #e3e7ec;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -6px 24px rgba(31, 45, 61, .12);
	color: #1f2d3d;
	-webkit-user-select: none;
	user-select: none;
}
.pbx-photo-bar[hidden],
.pbx-photo-bar [hidden] {
	display: none !important;
}
.pbx-photo-bar[data-variant="b"] {
	padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px));
}
.pbx-photo-bar button {
	margin: 0;
	border: 0;
	font-family: inherit;
	color: inherit;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
/* X-ul panoului (deselectează poza), în locul X-ului barei FPD */
.pbx-photo-x {
	position: absolute;
	right: 0;
	top: -26px;
	width: 36px;
	height: 30px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 10px 0 0 0;
	box-shadow: -2px -4px 8px rgba(31, 45, 61, .07);
}
.pbx-photo-x svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}
/* avertismentul: în panou, cu X; se închide și singur */
/* plutește DEASUPRA panoului (nu îi schimbă înălțimea, deci tabloul nu se mai strânge o dată la apariția lui);
   lasă loc în dreapta pentru X-ul panoului */
.pbx-photo-msg {
	position: absolute;
	left: 10px;
	right: 44px;
	bottom: calc(100% + 8px);
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	box-shadow: 0 6px 18px rgba(31, 45, 61, .14);
	padding: 7px 8px 7px 12px;
	border-radius: 10px;
	background: #fff4f2;
	border: 1px solid #f3c6c0;
	color: #b3261e;
	font-size: 12.5px;
	line-height: 1.3;
	font-weight: 600;
}
.pbx-photo-msg > span {
	flex: 1;
}
.pbx-photo-msg-x {
	flex: none;
	width: 28px;
	height: 28px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #f3c6c0 !important;
}
.pbx-photo-msg-x svg {
	width: 14px;
	height: 14px;
	fill: #b3261e;
}
.pbx-photo-row {
	display: flex;
	align-items: stretch;
	gap: 6px;
}
.pbx-photo-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 10px;
	background: #f1f3f6;
	border-radius: 12px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}
.pbx-photo-btn svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
	flex: none;
}
.pbx-photo-btn:active {
	background: #e3e7ec;
}
/* forma „a”: patru butoane mari pe un rând; uneltele FPD rămân în bara lor, dedesubt */
.pbx-photo-bar[data-variant="a"] {
	padding: 10px 12px 0;
}
.pbx-photo-bar[data-variant="a"] .pbx-photo-btn {
	height: 38px;
	flex: 1 1 0;
	border-radius: 11px;
	font-size: 13px;
}
.pbx-photo-bar[data-variant="a"] .pbx-photo-btn svg {
	width: 18px;
	height: 18px;
}
.pbx-photo-bar[data-variant="a"] .pbx-photo-minus,
.pbx-photo-bar[data-variant="a"] .pbx-photo-plus {
	flex: 0 0 48px;
	padding: 0;
}
.pbx-photo-bar[data-variant="a"] .pbx-photo-minus > span,
.pbx-photo-bar[data-variant="a"] .pbx-photo-plus > span,
.pbx-photo-bar[data-variant="a"] .pbx-photo-sep,
.pbx-photo-bar[data-variant="a"] .pbx-photo-proxies {
	display: none;
}
/* forma „b”: toate uneltele pe un rând, iconiță + etichetă mică */
.pbx-photo-bar[data-variant="b"] .pbx-photo-row {
	gap: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.pbx-photo-bar[data-variant="b"] .pbx-photo-proxies {
	display: contents;
}
.pbx-photo-bar[data-variant="b"] .pbx-photo-btn {
	flex: 1 0 auto;
	flex-direction: column;
	gap: 6px;
	min-width: 46px;
	padding: 8px 3px 7px;
	background: transparent;
	border-radius: 10px;
	font-size: 10.5px;
	font-weight: 500;
}
.pbx-photo-bar[data-variant="b"] .pbx-photo-btn:active {
	background: #eef1f5;
}
.pbx-photo-bar[data-variant="b"] .pbx-photo-btn svg {
	width: 22px;
	height: 22px;
}
.pbx-photo-bar[data-variant="b"] .pbx-photo-sep {
	flex: none;
	width: 1px;
	margin: 10px 2px;
	background: #e3e7ec;
}
.pbx-photo-glyph {
	display: block;
	height: 22px;
	font-family: FontFPD;
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	line-height: 22px;
}
/* bara de unelte FPD cât timp panoul nostru e pe ecran */
fpd-element-toolbar[data-pbx-photo] .fpd-tool-transform,
fpd-element-toolbar[data-pbx-photo] > .fpd-close {
	display: none !important; /* „Mărește” (cursoare) și X-ul barei: înlocuite de panoul nostru */
}
fpd-element-toolbar.fpd-smart.fpd-layout-small[data-pbx-photo="a"] {
	border-radius: 0;
	box-shadow: none;
}
fpd-element-toolbar[data-pbx-photo="b"] {
	opacity: 0 !important;
	pointer-events: none !important;
}
/* cât timp o poză e în lucru, browserul nu mărește pagina la ciupire în zona tabloului */
.fpd-container.fpd-wrapper[data-pbx-photo] fpd-main-wrapper {
	touch-action: none;
}
/* tabloul întreg la vedere deasupra panoului: scena e strânsă de script (ca la foaia de verificare) */
.fpd-container.fpd-wrapper.fpd-layout-small > fpd-main-wrapper .fpd-product-stage {
	transform-origin: 50% 0;
}
.fpd-container.fpd-wrapper[data-pbx-fit] > fpd-main-wrapper .fpd-product-stage {
	transform: translateY(var(--pbx-fit-y, 0px)) scale(var(--pbx-fit-s, 1));
}

/* ---------- v2.2: forma „a” = două rânduri de butoane la fel (ales de user din patru machete, 2 oct 2026) ---------- */
/* Rândul de sus e al nostru (minus, plus, Centrează, Rotește). Rândul de jos e bara de unelte FPD, neatinsă ca structură,
   doar îmbrăcată la fel cât timp panoul nostru e pe ecran: uneltele ei devin butoane gri, cu iconița lângă text.
   Împreună ocupă circa 104 px (înainte 150 px). */
/* FPD își ascunde bara de unelte la ORICE modificare a elementului (`elementChange`) și o readuce abia la următorul
   `mouseup` / `touchend` ajuns pe body. La mărirea din butoanele noastre sau din puncte, rândul de jos dispărea (văzut de
   user pe iPhone: sub rândul nostru apărea „Adaugă Text”). Cât panoul pozei e pe ecran, bara FPD rămâne la vedere. */
fpd-element-toolbar.fpd-smart.fpd-layout-small[data-pbx-photo="a"] {
	display: flex !important;
	height: auto !important;
	padding: 6px 12px calc(10px + env(safe-area-inset-bottom, 0px));
	border-top: 0;
}
fpd-element-toolbar.fpd-smart.fpd-layout-small[data-pbx-photo="a"] > .fpd-tools-nav {
	width: 100%;
	height: auto;
	overflow: visible;
}
fpd-element-toolbar.fpd-smart.fpd-layout-small[data-pbx-photo="a"] .fpd-primary-tools {
	display: none; /* gol la poze */
}
fpd-element-toolbar.fpd-smart.fpd-layout-small[data-pbx-photo="a"] .fpd-secondary-tools {
	flex: 1 1 auto;
	gap: 6px;
	height: auto;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
fpd-element-toolbar.fpd-smart.fpd-layout-small[data-pbx-photo="a"] .fpd-secondary-tools > [class*="fpd-tool-"] {
	flex: 1 1 0;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 38px;
	margin: 0;
	padding: 0 8px;
	background: #f1f3f6;
	border-radius: 11px;
}
fpd-element-toolbar.fpd-smart.fpd-layout-small[data-pbx-photo="a"] .fpd-secondary-tools > [class*="fpd-tool-"]:active {
	background: #e3e7ec;
}
fpd-element-toolbar.fpd-smart.fpd-layout-small[data-pbx-photo="a"] .fpd-secondary-tools > [class*="fpd-tool-"] > [class*="fpd-icon-"] {
	width: auto;
	height: auto;
	font-size: 17px;
	line-height: 1;
}
fpd-element-toolbar.fpd-smart.fpd-layout-small[data-pbx-photo="a"] .fpd-secondary-tools > [class*="fpd-tool-"] > .fpd-label {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}
/* numele celor două filtre de la „Alb-Negru”, în română (FPD le afișează din aria-label, pe care scriptul care limitează
   filtrele se bazează: atributul rămâne, schimbăm doar textul afișat) */
fpd-element-toolbar .fpd-sub-panel .fpd-tool-filters > .fpd-item[aria-label="None"]::after {
	content: "Color";
}
fpd-element-toolbar .fpd-sub-panel .fpd-tool-filters > .fpd-item[aria-label="Grayscale"]::after {
	content: "Alb-negru";
}

/* ---------- v2.3: „Resetează” devine „Potrivește” cât panoul pozei e pe ecran (user, 2 oct 2026) ---------- */
/* Numele și iconița vin de aici; clicul îl preia fpd-photo-touch.js (doar așezarea de la început, poza rămâne aleasă).
   Iconița: un cadru cu colțuri, nu a patra săgeată rotundă de pe ecran. */
fpd-element-toolbar[data-pbx-photo] .fpd-tool-reset > .fpd-label {
	font-size: 0 !important;
}
fpd-element-toolbar[data-pbx-photo] .fpd-tool-reset > .fpd-label::after {
	content: "Potrivește";
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
}
fpd-element-toolbar[data-pbx-photo] .fpd-tool-reset > .fpd-icon-reset::before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h7v2H5v5H3zm11 0h7v7h-2V5h-5zM3 14h2v5h5v2H3zm16 0h2v7h-7v-2h5zM8 8h8v8H8z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h7v2H5v5H3zm11 0h7v7h-2V5h-5zM3 14h2v5h5v2H3zm16 0h2v7h-7v-2h5zM8 8h8v8H8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* cât caseta e descoperită (atributul data-pbx-gap, pus de script), butonul e conturat cu albastru */
fpd-element-toolbar.fpd-smart.fpd-layout-small[data-pbx-photo="a"][data-pbx-gap] .fpd-secondary-tools > .fpd-tool-reset {
	background: #eaf0ff;
	color: #3b5bdb;
	box-shadow: inset 0 0 0 2px #3b5bdb;
}

/* ---------- v2.5: Home Bar (fpd-home-bar.js): bara de jos când nu e ales nimic, pe ecranele cu atingere ---------- */
/* Element al nostru, în body, peste bara principală FPD: un rând mic de sfat + un rând de butoane gri, ca la uneltele
   pozei (aleasă de user din trei machete, 2 oct 2026). */
.pbx-home-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2147483500;
	box-sizing: border-box;
	padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
	background: #fff;
	border-top: 1px solid #e3e7ec;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -6px 24px rgba(31, 45, 61, .12);
	color: #1f2d3d;
	-webkit-user-select: none;
	user-select: none;
}
.pbx-home-bar[hidden],
.pbx-home-bar [hidden] {
	display: none !important;
}
.pbx-home-tip {
	display: flex;
	align-items: center;
	gap: 7px;
	min-height: 18px;
	margin: 0 2px 7px;
	font-size: 12.5px;
	line-height: 1.3;
	color: #5b6775;
}
.pbx-home-tip > i {
	flex: none;
	display: flex;
}
.pbx-home-tip svg {
	width: 15px;
	height: 15px;
	fill: #3b5bdb;
}
.pbx-home-row {
	display: flex;
	gap: 6px;
}
.pbx-home-btn {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 40px;
	margin: 0;
	padding: 0 10px;
	border: 0;
	border-radius: 11px;
	background: #f1f3f6;
	color: inherit;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.pbx-home-btn svg {
	width: 19px;
	height: 19px;
	fill: currentColor;
	flex: none;
}
.pbx-home-btn:active {
	background: #e3e7ec;
}
.pbx-home-help {
	flex: 0 0 46px;
	padding: 0;
}
.pbx-home-help > span {
	display: none;
}
/* colaje fără modul de text: doar sfatul și „?”, pe un singur rând (butonul de poză nu mai există acolo) */
.pbx-home-bar.pbx-home-solo {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 10px;
}
.pbx-home-bar.pbx-home-solo .pbx-home-tip {
	flex: 1 1 auto;
	margin: 0 0 0 2px;
	font-size: 13.5px;
	color: #1f2d3d;
}
.pbx-home-bar.pbx-home-solo .pbx-home-tip svg {
	width: 17px;
	height: 17px;
}
.pbx-home-bar.pbx-home-solo .pbx-home-row {
	flex: none;
}
.pbx-home-bar.pbx-home-solo .pbx-home-help {
	flex: 0 0 44px;
	width: 44px;
}
/* prețul textului contra cost, pe buton */
.pbx-home-text[data-price]:not([data-price=""])::after {
	content: attr(data-price);
	font-size: 12px;
	font-weight: 600;
	color: #11875a;
}
/* bara principală FPD rămâne dedesubt; iconița ei nu trebuie să se vadă pe lângă a noastră */
.fpd-container.fpd-wrapper[data-pbx-home-on] fpd-main-bar > .fpd-navigation {
	visibility: hidden; /* și cât bara noastră e ascunsă o clipă (poza se încarcă, o foaie se închide) */
}
/* editorul încarcă ceva: bara rămâne pe ecran, stinsă și fără atingeri */
.pbx-home-bar.pbx-home-busy {
	pointer-events: none;
}
.pbx-home-bar.pbx-home-busy .pbx-home-tip,
.pbx-home-bar.pbx-home-busy .pbx-home-row {
	opacity: .45;
}
/* „Cum funcționează”: foaie mică, a noastră */
.pbx-help {
	position: fixed;
	inset: 0;
	z-index: 2147483646;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(31, 45, 61, .45);
}
.pbx-help-card {
	box-sizing: border-box;
	width: 100%;
	max-width: 520px;
	padding: 18px 18px calc(16px + env(safe-area-inset-bottom, 0px));
	background: #fff;
	border-radius: 18px 18px 0 0;
	color: #1f2d3d;
	animation: pbx-help-in .22s ease-out;
}
@keyframes pbx-help-in {
	from { transform: translateY(24px); opacity: 0; }
	to   { transform: none; opacity: 1; }
}
.pbx-help-title {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.2;
}
.pbx-help-card ul {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}
.pbx-help-card li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 7px 0;
	font-size: 14px;
	line-height: 1.35;
}
.pbx-help-card li > i {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #f1f3f6;
}
.pbx-help-card li svg {
	width: 19px;
	height: 19px;
	fill: #1f2d3d;
}
.pbx-help-ok {
	display: block;
	width: 100%;
	height: 48px;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: #11875a;
	color: #fff;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 700;
	cursor: pointer;
}
@media (min-width: 768px) {
	.pbx-help {
		align-items: center;
	}
	.pbx-help-card {
		border-radius: 18px;
	}
}

/* ---------- v2.7: Text Tools (fpd-text-tools.js): uneltele textului, în stilul uneltelor pozei ---------- */
/* v2.8 (2 oct 2026): alinierea în lista „Mai multe”, minus / plus pentru mărimea literei. */
/* Panoul e un element al nostru, în body. Vederi (atributul data-view, pus de script):
   „row”   = forma „a”: un rând de butoane lipit SUB bara FPD (care arată caseta de scris);
   „tools” = forma „b”: două rânduri de butoane, în locul barei FPD (aceea e transparentă);
   „done”  = forma „b”, cât se scrie: butonul „Gata”, lipit sub bara FPD. */
.pbx-text-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2147483647;
	box-sizing: border-box;
	padding: 2px 12px calc(10px + env(safe-area-inset-bottom, 0px));
	background: #fff;
	color: #1f2d3d;
	-webkit-user-select: none;
	user-select: none;
	/* „fusta” alba sub panou (v3.7): pe iPhone, intre panou si tastatura ramanea o fasie din pagina produsului; vezi
	   fpd-text-sheet.css. Sta sub tastatura sau in afara ecranului, deci nu se vede altfel. */
	box-shadow: 0 240px 0 0 #fff;
}
.pbx-text-bar[hidden],
.pbx-text-bar [hidden] {
	display: none !important;
}
.pbx-text-bar[data-view="tools"] {
	padding-top: 10px;
	border-top: 1px solid #e3e7ec;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -6px 24px rgba(31, 45, 61, .12);
}
.pbx-text-bar button {
	margin: 0;
	border: 0;
	font-family: inherit;
	color: inherit;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.pbx-text-rows {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pbx-text-row {
	display: flex;
	gap: 6px;
}
.pbx-text-proxies {
	display: flex;
	flex: 1 0 100%;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
}
.pbx-text-proxies:empty {
	display: none;
}
.pbx-text-proxies .pbx-text-btn {
	flex: 1 0 auto;
}
.pbx-text-btn {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 38px;
	padding: 0 10px;
	background: #f1f3f6;
	border-radius: 11px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}
.pbx-text-btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	flex: none;
}
.pbx-text-btn:active {
	background: #e3e7ec;
}
.pbx-text-glyph {
	font-family: FontFPD;
	font-style: normal;
	font-weight: 400;
	font-size: 17px;
	line-height: 1;
}
/* minus / plus: mărimea literei, ca la poză (doar unde designul o lasă schimbată) */
.pbx-text-size {
	flex: 0 0 46px;
	padding: 0;
}
.pbx-text-size.pbx-off {
	opacity: .35;
}
/* „Mai multe”: un buton care deschide o listă deasupra lui (deocamdată alinierea) */
.pbx-text-bar[data-size="1"] .pbx-text-morebtn {
	flex: 0 0 46px;
	padding: 0;
}
.pbx-text-bar[data-size="1"] .pbx-text-morebtn > span {
	display: none;
}
.pbx-text-morebtn.pbx-on {
	background: #e3e9fb;
	color: #3b5bdb;
}
.pbx-text-more {
	position: absolute;
	right: 12px;
	bottom: calc(100% + 6px);
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 214px;
	padding: 6px;
	background: #fff;
	border: 1px solid #e3e7ec;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(31, 45, 61, .22);
}
.pbx-text-more .pbx-text-btn {
	flex: none;
	justify-content: flex-start;
	gap: 10px;
	height: 42px;
	padding: 0 12px;
	background: transparent;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 500;
}
.pbx-text-more .pbx-text-btn:active {
	background: #f1f3f6;
}
.pbx-text-more .pbx-text-btn.pbx-on {
	color: #3b5bdb;
	font-weight: 600;
}
.pbx-text-more .pbx-text-btn.pbx-on::after {
	content: "\2713";
	margin-left: auto;
	font-size: 15px;
}
/* forma „a”: un singur rând (Font, minus, plus, Mai multe, La început), fără „Scrie textul”, fără „Gata”, fără X */
.pbx-text-bar[data-view="row"] .pbx-text-rows {
	flex-direction: row;
	flex-wrap: wrap;
}
.pbx-text-bar[data-view="row"] .pbx-text-row {
	display: contents;
}
.pbx-text-bar[data-view="row"] .pbx-text-write,
.pbx-text-bar[data-view="row"] .pbx-text-done,
.pbx-text-bar[data-view="row"] .pbx-text-x,
.pbx-text-bar[data-view="tools"] .pbx-text-done,
.pbx-text-bar[data-view="done"] .pbx-text-rows,
.pbx-text-bar[data-view="done"] .pbx-text-x {
	display: none !important;
}
/* forma „b”: „Scrie textul” e butonul principal al primului rând */
.pbx-text-bar[data-view="tools"] .pbx-text-write {
	flex: 1.4 1 0;
	background: #e3e9fb;
	color: #3b5bdb;
}
.pbx-text-done {
	width: 100%;
	background: #11875a;
	color: #fff;
}
.pbx-text-done:active {
	background: #0d6e49;
}
.pbx-text-x {
	position: absolute;
	right: 0;
	top: -26px;
	flex: none;
	width: 36px;
	height: 30px;
	padding: 0;
	background: #fff;
	border-radius: 10px 0 0 0;
	box-shadow: -2px -4px 8px rgba(31, 45, 61, .07);
}
.pbx-text-x svg {
	width: 20px;
	height: 20px;
}
/* bara FPD cât uneltele textului sunt active */
fpd-element-toolbar.fpd-smart.fpd-layout-small[data-pbx-ttools] {
	bottom: calc(var(--pbx-kb, 0px) + var(--pbx-text-row, 0px)) !important; /* deasupra rândului nostru */
	padding-bottom: 0 !important;
}
fpd-element-toolbar[data-pbx-ttools="b"][data-pbx-tstate="nav"] {
	opacity: 0 !important;
	pointer-events: none !important;
}
fpd-element-toolbar[data-pbx-ttools="b"][data-pbx-tstate="edit"] > .fpd-close-sub-panel {
	display: none !important; /* din caseta de scris se iese cu „Gata” */
}
/* forma „a”: tabul de sus al casetei de scris e un X (închide lucrul la text; clicul îl preia scriptul) */
fpd-element-toolbar[data-pbx-ttools="a"][data-pbx-tstate="edit"] > .fpd-close-sub-panel > .fpd-icon-back {
	display: none;
}
fpd-element-toolbar[data-pbx-ttools="a"][data-pbx-tstate="edit"] > .fpd-close-sub-panel > .fpd-label {
	font-size: 0;
}
fpd-element-toolbar[data-pbx-ttools="a"][data-pbx-tstate="edit"] > .fpd-close-sub-panel > .fpd-label::after {
	content: "\2715";
	font-size: 15px;
	font-weight: 600;
	color: var(--pbx-ink);
}

/* ---------- v3.0: Top Bar (fpd-top-bar.js): bara de sus curățată, pe telefon ---------- */
/* „Înapoi”, „Înainte” și „Ia de la capăt” sunt în meniul nostru cu trei puncte. Butoanele FPD rămân în bară, ascunse:
   meniul le apasă pe ele. */
.fpd-container[data-pbx-top] fpd-actions-bar [data-pos=center] [data-action="undo"],
.fpd-container[data-pbx-top] fpd-actions-bar [data-pos=center] [data-action="redo"],
.fpd-container[data-pbx-top] fpd-actions-bar [data-pos=center] [data-action="reset-product"] {
	display: none !important;
}
/* Bundle-ul centrează butoanele în grupul lor (rând absolut, mutat cu -50 %), pe o lățime ținută pentru patru butoane:
   „Înapoi”, rămas singur, ar sta la mijlocul ei. Aici rândul curge firesc, de la marginea stângă. */
.fpd-container.fpd-wrapper.fpd-layout-small[data-pbx-top] fpd-actions-bar > [data-pos=center] {
	min-width: 0;
}
.fpd-container.fpd-wrapper.fpd-layout-small[data-pbx-top] fpd-actions-bar > [data-pos=center] > fpd-actions-menu {
	justify-content: flex-start;
}
.fpd-container.fpd-wrapper.fpd-layout-small[data-pbx-top] fpd-actions-bar > [data-pos=center] .fpd-uncollapsed-menu {
	position: static;
	transform: none;
}
/* butonul cu trei puncte și eticheta cu mărimea: elemente ale noastre, în body, peste locul liber din bară */
.pbx-top-extra {
	position: fixed;
	left: 40px;
	top: 0;
	z-index: 10001; /* imediat peste editor (10000); foile și mesajele de deasupra îl acoperă firesc */
	display: flex;
	align-items: center;
	gap: 6px;
	height: 56px;
	color: #1f2d3d;
	-webkit-user-select: none;
	user-select: none;
}
.pbx-top-extra[hidden],
.pbx-top-extra [hidden],
.pbx-top-menu[hidden],
.pbx-top-menu [hidden] {
	display: none !important;
}
.pbx-top-more {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.pbx-top-more svg {
	width: 21px;
	height: 21px;
	fill: currentColor;
}
.pbx-top-more.pbx-on,
.pbx-top-more:active {
	background: #e3e9fb;
	color: #3b5bdb;
}
.pbx-top-size {
	display: flex;
	align-items: center;
	height: 28px;
	padding: 0 10px;
	border-radius: 14px;
	background: #f1f3f6;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none; /* doar de citit */
}
.pbx-top-menu {
	position: fixed;
	z-index: 2147483500;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 216px;
	padding: 6px;
	background: #fff;
	border: 1px solid #e3e7ec;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(31, 45, 61, .22);
	color: #1f2d3d;
}
.pbx-top-item {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.pbx-top-item svg {
	width: 19px;
	height: 19px;
	fill: currentColor;
	flex: none;
}
.pbx-top-item:active {
	background: #f1f3f6;
}
.pbx-top-item.pbx-off {
	opacity: .35;
}
.pbx-top-item[data-item="reset"] {
	margin-top: 5px;
	border-top: 1px solid #e3e7ec;
	border-radius: 0 0 9px 9px;
	padding-top: 5px;
	height: 49px;
}

/* ---------- v3.1: Size Switch (fpd-size-switch.js): mărimea se schimbă din editor ---------- */
/* Eticheta cu mărimea din bara de sus devine buton (clasa `pbx-can`, pusă de script când produsul are cel puțin două
   mărimi cu design); lista e un element al nostru, în body. */
.pbx-top-size.pbx-can {
	pointer-events: auto;
	padding-right: 8px;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.pbx-top-size.pbx-can::after {
	content: "";
	width: 6px;
	height: 6px;
	margin: -3px 2px 0 7px;
	border-right: 1.8px solid currentColor;
	border-bottom: 1.8px solid currentColor;
	transform: rotate(45deg);
}
.pbx-top-size.pbx-can.pbx-on,
.pbx-top-size.pbx-can:active {
	background: #e3e9fb;
	color: #3b5bdb;
}
.pbx-size-menu {
	position: fixed;
	z-index: 2147483500;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 232px;
	max-width: calc(100vw - 16px);
	padding: 6px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #e3e7ec;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(31, 45, 61, .22);
	color: #1f2d3d;
}
.pbx-size-menu[hidden] {
	display: none !important;
}
.pbx-size-title {
	padding: 6px 12px 4px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #5b6775;
}
.pbx-size-item {
	flex: none;
	display: flex;
	align-items: center;
	gap: 14px;
	height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.pbx-size-item:active {
	background: #f1f3f6;
}
.pbx-size-name {
	flex: 1 1 auto;
	white-space: nowrap;
}
.pbx-size-price {
	flex: none;
	font-size: 13.5px;
	color: #5b6775;
	white-space: nowrap;
}
.pbx-size-item.pbx-on {
	background: #f1f4fd;
	color: #3b5bdb;
	font-weight: 700;
}
.pbx-size-item.pbx-on .pbx-size-name::before {
	content: "\2713";
	margin-right: 7px;
}
.pbx-size-item.pbx-on .pbx-size-price {
	color: #3b5bdb;
}

/* ---------- v3.5: banda de sub bara de sus (fpd-home-bar.js) ---------- */
/* Containerul e un rând flex care se rupe: bara de sus, apoi zona de lucru, a cărei înălțime bundle-ul o dă ca
   100 % - bara de sus - 80 px (locul barei de module, chiar și unde ea nu există). Spațiul rămas se împarte între linii,
   de unde banda albă de 40 px de sub bara de sus. Cu `data-pbx-strip` liniile se lipesc sus, iar fondul rămas e cel al
   zonei de lucru, nu alb.
   „a” = fără bandă: zona de lucru începe sub bara de sus.
   „b” = banda sfatului (40 px, element al nostru, în body), apoi zona de lucru; unde există bara de module, zona de
         lucru e mai scundă cu 40 px, ca să nu intre sub ea. */
.fpd-modal-product-designer > .fpd-modal-inner > .fpd-wrapper.fpd-layout-small[data-pbx-strip] {
	align-content: flex-start;
	background: var(--pbx-bg);
}
.fpd-modal-product-designer > .fpd-modal-inner > .fpd-wrapper.fpd-layout-small[data-pbx-strip="b"] fpd-main-wrapper {
	margin-top: 40px;
}
.fpd-modal-product-designer > .fpd-modal-inner > .fpd-wrapper.fpd-layout-small[data-pbx-strip="b"][data-pbx-modbar] fpd-main-wrapper {
	height: calc(100% - var(--fpd-actions-bar-height) - var(--fpd-sidebar-nav-width) - 40px) !important;
}
.pbx-top-tip {
	position: fixed;
	left: 0;
	right: 0;
	top: 56px;
	z-index: 10001; /* imediat peste editor; meniurile barei de sus și foile vin deasupra */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 7px;
	height: 40px;
	padding: 0 14px;
	background: #fff;
	border-bottom: 1px solid #e3e7ec;
	color: #1f2d3d;
	font-size: 13px;
	line-height: 1.25;
	-webkit-user-select: none;
	user-select: none;
}
.pbx-top-tip[hidden] {
	display: none !important;
}
.pbx-top-tip > i {
	flex: none;
	display: flex;
}
.pbx-top-tip svg {
	width: 16px;
	height: 16px;
	fill: #3b5bdb;
}
.pbx-top-tip > span {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.pbx-top-tip.pbx-top-tip-empty > i {
	visibility: hidden;
}
/* bara de jos fără sfat (forma „b”): doar butoanele */
.pbx-home-bar.pbx-home-notip {
	padding-top: 10px;
}
.pbx-home-bar.pbx-home-notip .pbx-home-tip {
	display: none;
}

/* ---------- v3.6: „?” rotund în colț (fpd-home-bar.js, forma „b” fără niciun alt buton jos) ---------- */
/* Aleasă de user pe 3 oct 2026 dintre patru machete (studiu-ui/variante-bara-poza/jos-la-colaje.html): la produsele
   unde jos nu rămâne niciun buton (colajele fără text contra cost, orice produs înainte de prima poză), bara de jos
   devine un singur buton rotund care plutește în colțul din dreapta jos. Tot un strat peste zona de lucru. */
.pbx-home-bar.pbx-home-fab {
	left: auto;
	right: 14px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.pbx-home-bar.pbx-home-fab .pbx-home-tip {
	display: none;
}
.pbx-home-bar.pbx-home-fab .pbx-home-help {
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #e3e7ec;
	box-shadow: 0 4px 14px rgba(31, 45, 61, .22);
}
.pbx-home-bar.pbx-home-fab .pbx-home-help:active {
	background: #e3e7ec;
}

/* ---------- v3.8: ecranul de încărcare, galeria „Pozele tale” și poza care se urcă (3 oct 2026) ---------- */
/* Alegerile userului din machetele studiu-ui/variante-bara-poza/incarcare-galerie.html: încărcarea = cerc și mesaj,
   arătat imediat la apăsare (fpd-loading.js); galeria = trei pe rând, pătrate; urcarea = cerc cu procent pe miniatură. */

/* (1) ecranul nostru de încărcare, în body */
.pbx-loading {
	position: fixed;
	inset: 0;
	z-index: 2147483600;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 24px 8vh;
	background: #fff;
	color: #1f2d3d;
	font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	text-align: center;
	-webkit-user-select: none;
	user-select: none;
}
.pbx-loading.pbx-on {
	display: flex;
}
.pbx-loading-ring,
.fpd-container .fpd-loader > .fpd-loader-circle {
	width: 40px;
	height: 40px;
	border: 3.5px solid #e3e7ec;
	border-left-color: #e3e7ec;
	border-top-color: #1f2d3d;
	border-radius: 50%;
	animation: pbx-spin .9s linear infinite;
}
.pbx-loading-ring {
	display: block;
	margin: 0 0 14px;
}
.pbx-loading > b {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}
.pbx-loading > span {
	font-size: 13px;
	line-height: 1.4;
	color: #5b6775;
}
.pbx-loading-x {
	position: absolute;
	top: 9px;
	right: 10px;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f1f3f6;
	color: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.pbx-loading-x svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}
@keyframes pbx-spin {
	to {
		transform: rotate(360deg);
	}
}
/* cercul FPD (apare și la schimbarea mărimii): același cerc, cu mesajul nostru sub el */
.fpd-container .fpd-loader-wrapper {
	background: rgba(255, 255, 255, .94);
}
.fpd-container .fpd-loader > .fpd-loader-text:empty::after {
	content: var(--pbx-load-text, '');
	display: block;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: #1f2d3d;
}

/* (2) galeria: trei pe rând, pătrate, cu titlu de secțiune și numărul pozelor */
.fpd-upload-zone-panel.fpd-active fpd-module-uploads:has(.fpd-photo-grid > .fpd-item) .fpd-upload-image::before {
	display: none; /* titlul „Pozele tale” coboară deasupra grilei */
}
.fpd-upload-zone-panel.fpd-active fpd-module-uploads:has(.fpd-photo-grid > .fpd-item) .fpd-upload-image > span:not(.fpd-btn):not(.fpd-price) {
	display: none; /* „vor apărea mai jos”: au apărut */
}
.fpd-upload-zone-panel.fpd-active fpd-module-uploads .fpd-grid.fpd-photo-grid {
	position: relative;
	overflow: visible;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: auto;
	gap: 6px;
	counter-reset: pbxphotos;
}
.fpd-upload-zone-panel.fpd-active fpd-module-uploads .fpd-grid.fpd-photo-grid:has(> .fpd-item) {
	margin-top: 30px;
}
.fpd-upload-zone-panel.fpd-active fpd-module-uploads .fpd-grid.fpd-photo-grid:has(> .fpd-item)::before,
.fpd-upload-zone-panel.fpd-active fpd-module-uploads .fpd-grid.fpd-photo-grid:has(> .fpd-item)::after {
	position: absolute;
	top: -24px;
	font-size: 12.5px;
	line-height: 1.3;
	color: #1f2d3d;
}
.fpd-upload-zone-panel.fpd-active fpd-module-uploads .fpd-grid.fpd-photo-grid:has(> .fpd-item)::before {
	content: var(--pbx-sheet-gallery, 'Poze încărcate de tine');
	left: 2px;
	font-weight: 700;
}
.fpd-upload-zone-panel.fpd-active fpd-module-uploads .fpd-grid.fpd-photo-grid:has(> .fpd-item)::after {
	content: counter(pbxphotos);
	right: 2px;
	color: #5b6775;
}
.fpd-upload-zone-panel.fpd-active fpd-module-uploads .fpd-grid.fpd-photo-grid > .fpd-item {
	counter-increment: pbxphotos;
	aspect-ratio: 1;
	min-width: 0;
	border-radius: 10px;
	overflow: hidden;
}
.fpd-upload-zone-panel.fpd-active fpd-module-uploads .fpd-grid.fpd-photo-grid > .fpd-item > picture {
	width: 100%;
	height: 100%;
	border-radius: 10px;
	background-size: cover;
}
/* X-ul de ștergere: rotund, alb, clar */
.fpd-upload-zone-panel.fpd-active fpd-module-uploads .fpd-grid.fpd-photo-grid > .fpd-item > .fpd-delete {
	top: 4px;
	right: 4px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 1px 4px rgba(31, 45, 61, .25);
	color: #1f2d3d;
	font-size: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 11;
}
.fpd-upload-zone-panel.fpd-active fpd-module-uploads .fpd-grid.fpd-photo-grid > .fpd-item > .fpd-delete::before {
	line-height: 1;
}

/* (3) poza care se urcă: miniatura clară, întunecată puțin, cu un cerc care se umple și procentul în mijloc */
.fpd-container fpd-module-uploads .fpd-grid > .fpd-item.fpd-loading picture {
	filter: none;
}
.fpd-container fpd-module-uploads .fpd-grid > .fpd-item.fpd-loading::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(31, 45, 61, .45);
	z-index: 9;
}
.fpd-container fpd-module-uploads .fpd-grid > .fpd-item.fpd-loading > .fpd-delete {
	display: none !important; /* nu se șterge o poză care încă se urcă */
}
.fpd-container fpd-module-uploads .fpd-grid .fpd-item.fpd-loading > .fpd-loading-bar {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	/* fără procent (script oprit sau poza urcată, serverul o prelucrează): un cerc care se învârte */
	background: conic-gradient(#fff 28%, rgba(255, 255, 255, .3) 0);
	animation: pbx-spin-c .9s linear infinite;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fpd-container fpd-module-uploads .fpd-grid .fpd-item.fpd-loading > .fpd-loading-bar[data-pbx-p] {
	background: conic-gradient(#fff calc(var(--pbx-p, 0) * 1%), rgba(255, 255, 255, .3) 0);
	animation: none;
}
.fpd-container fpd-module-uploads .fpd-grid .fpd-item.fpd-loading > .fpd-loading-bar > .fpd-loading-progress {
	display: none;
}
.fpd-container fpd-module-uploads .fpd-grid .fpd-item.fpd-loading > .fpd-loading-bar::after {
	content: '';
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #33415a;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 36px;
	text-align: center;
}
.fpd-container fpd-module-uploads .fpd-grid .fpd-item.fpd-loading > .fpd-loading-bar[data-pbx-p]::after {
	content: attr(data-pbx-p) '%';
}
@keyframes pbx-spin-c {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}
/* cât se urcă o poză, butonul verde e stins: o poză pe rând */
.fpd-upload-zone-panel.fpd-active fpd-module-uploads:has(.fpd-item.fpd-loading) .fpd-upload-image {
	opacity: .45;
	pointer-events: none;
}

/* (4) în caseta de poză se pun doar poze: rândul de iconițe de la baza foii (poză / text / desene) e ascuns.
   E bara de jos a panoului casetei (`.fpd-bottom-nav`), arătată de FPD când fața designului are mai multe module
   pornite. Măsurat pe 3 oct 2026: modulele sunt pornite din oficiu (View Options → „Disable … Module” e o cheie care
   există doar când e bifată), deci 1.062 din 1.134 de fețe pe staging și 1.089 din 1.159 pe producție le au pe toate
   trei, inclusiv 205 din cele 209 mărimi ale tablourilor canvas. Rândul acoperea ultimul rând al galeriei și lăsa un
   client să pună text sau un desen într-o casetă de poză. Modulul de text al barei principale (textul contra cost) nu
   e atins. */
.fpd-container .fpd-upload-zone-panel > .fpd-bottom-nav {
	display: none !important;
}

/* ---------- v3.9: același ecran după „Adaugă în coș” (fpd-loading.js) ---------- */
/* Cât se așteaptă plecarea spre coș nu există X (nu e nimic de oprit); dacă nu a mers, cercul dispare și apar butonul
   „Încearcă din nou”, legătura „Închide” și X-ul. */
.pbx-loading-btn,
.pbx-loading-link {
	display: none;
	margin: 0;
	border: 0;
	font-family: inherit;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.pbx-loading.pbx-cart:not(.pbx-fail) .pbx-loading-x {
	display: none;
}
.pbx-loading.pbx-fail .pbx-loading-ring {
	display: none;
}
.pbx-loading.pbx-fail > span {
	max-width: 280px;
}
.pbx-loading.pbx-fail .pbx-loading-btn {
	display: block;
	margin-top: 18px;
	height: 46px;
	padding: 0 26px;
	border-radius: 23px;
	background: #11875a;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
}
.pbx-loading.pbx-fail .pbx-loading-btn:active {
	background: #0d6b47;
}
.pbx-loading.pbx-fail .pbx-loading-link {
	display: block;
	margin-top: 10px;
	padding: 8px 12px;
	background: none;
	color: #1f2d3d;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
}

/* ---------- v4.0: Desk Panel, interfața de telefon reașezată într-un panou, pe calculator (fpd-desk.js) ---------- */
/* Aleasă de user pe 3 oct 2026 dintre trei machete (studiu-ui/variante-bara-poza/calculator.html): „panou în dreapta”.
   `html[data-pbx-desk-on]` îl pune fpd-desk.js doar cât fereastra personalizatorului e deschisă pe un ecran de cel
   puțin 1100 px. Sub 1100 px rămâne varianta de telefon (tot alegerea lui). Aceleași elemente ca pe telefon: aici doar
   se mută din josul ecranului în coloana din dreapta; locul de sus al fiecărei bare îl dă scriptul, prin
   `--pbx-desk-top`. */
html[data-pbx-desk-on] {
	--pbx-desk-w: 380px;
}
/* zona de lucru: tot ce rămâne în stânga panoului, pe toată înălțimea de sub bara de sus */
html[data-pbx-desk-on] .fpd-modal-product-designer > .fpd-modal-inner > .fpd-wrapper.fpd-layout-small fpd-main-wrapper,
html[data-pbx-desk-on] .fpd-modal-product-designer > .fpd-modal-inner > .fpd-wrapper.fpd-layout-small[data-pbx-strip][data-pbx-modbar] fpd-main-wrapper {
	flex: 0 0 calc(100% - var(--pbx-desk-w)) !important;
	width: calc(100% - var(--pbx-desk-w)) !important;
	max-width: calc(100% - var(--pbx-desk-w));
	height: calc(100% - var(--fpd-actions-bar-height)) !important;
	margin-top: 0 !important;
}
/* fondul panoului */
html[data-pbx-desk-on] .fpd-modal-product-designer > .fpd-modal-inner > .fpd-wrapper.fpd-layout-small::after {
	content: '';
	position: fixed;
	right: 0;
	top: 56px;
	bottom: 0;
	width: var(--pbx-desk-w);
	box-sizing: border-box;
	background: #fff;
	border-left: 1px solid #e3e7ec;
	z-index: 3;
	pointer-events: none;
}
/* sfatul: primul lucru din panou, pe mai multe rânduri dacă e nevoie */
html[data-pbx-desk-on] .pbx-top-tip {
	left: auto;
	right: 0;
	width: var(--pbx-desk-w);
	height: auto;
	min-height: 56px;
	padding: 18px 20px 10px;
	align-items: flex-start;
	border-bottom: 0;
	border-left: 1px solid #e3e7ec;
	font-size: 14.5px;
	line-height: 1.4;
}
html[data-pbx-desk-on] .pbx-top-tip > i {
	margin-top: 2px;
}
html[data-pbx-desk-on] .pbx-top-tip > span {
	-webkit-line-clamp: 4;
}
/* barele: una sub alta, de sus, în coloana panoului */
html[data-pbx-desk-on] .pbx-home-bar:not(.pbx-home-fab),
html[data-pbx-desk-on] .pbx-photo-bar,
html[data-pbx-desk-on] .pbx-text-bar,
html[data-pbx-desk-on] fpd-element-toolbar.fpd-smart.fpd-layout-small {
	left: auto !important;
	right: 0 !important;
	top: var(--pbx-desk-top, 120px) !important;
	bottom: auto !important;
	width: var(--pbx-desk-w) !important;
	max-width: var(--pbx-desk-w);
	border-radius: 0 !important;
	border-top: 0 !important;
	border-left: 1px solid #e3e7ec;
	box-shadow: none !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
}
html[data-pbx-desk-on] .pbx-home-bar:not(.pbx-home-fab) {
	padding-top: 8px;
	padding-bottom: 8px;
}
/* în panou butoanele au nume întregi: e loc */
html[data-pbx-desk-on] .pbx-home-bar .pbx-home-row {
	flex-direction: column;
}
html[data-pbx-desk-on] .pbx-home-bar .pbx-home-btn {
	flex: none;
	width: 100%;
	height: 46px;
	font-size: 14.5px;
}
html[data-pbx-desk-on] .pbx-home-bar .pbx-home-help {
	background: none;
	height: 38px;
	font-weight: 600;
	color: #5b6775;
}
html[data-pbx-desk-on] .pbx-home-bar .pbx-home-help > span {
	display: inline;
}
/* „?” singur (unde nu e niciun alt buton): un rând liniștit, deasupra butonului verde */
html[data-pbx-desk-on] .pbx-home-bar.pbx-home-fab {
	left: auto;
	right: 20px;
	bottom: 82px;
	width: calc(var(--pbx-desk-w) - 40px);
}
html[data-pbx-desk-on] .pbx-home-bar.pbx-home-fab .pbx-home-help {
	width: 100%;
	height: 38px;
	border-radius: 11px;
	border: 0;
	box-shadow: none;
	background: none;
}
/* uneltele pozei: X-ul barei nu mai stă pe buză, ci în colțul panoului */
html[data-pbx-desk-on] .pbx-photo-bar {
	padding-top: 6px;
	padding-bottom: 6px;
}
/* butonul verde: mereu jos, în panou */
html[data-pbx-desk-on] fpd-actions-bar [data-pos="modal"] .fpd-done {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: calc(var(--pbx-desk-w) - 40px);
	height: 52px;
	margin: 0;
	justify-content: center;
	font-size: 16px;
	z-index: 10002;
}
/* foaia de poze și foaia „Adaugă text”: tot în panou, fără fondul întunecat */
html[data-pbx-desk-on] .fpd-upload-zone-panel.fpd-active,
html[data-pbx-desk-on] .fpd-container.fpd-wrapper.fpd-layout-small.fpd-module-visible fpd-main-bar > .fpd-module-content {
	position: fixed !important;
	left: auto !important;
	right: 0 !important;
	top: 56px !important;
	bottom: 0 !important;
	transform: none !important;
	width: var(--pbx-desk-w) !important;
	height: auto !important;
	max-height: none !important;
	border-radius: 0 !important;
	border-left: 1px solid #e3e7ec;
	box-shadow: none !important;
	background: #fff !important;
	padding: 56px 20px 20px !important;
	z-index: 10003;
}
html[data-pbx-desk-on] .fpd-container.fpd-secondary-visible:has(.fpd-upload-zone-panel.fpd-active) fpd-main-bar::before {
	display: none;
}
/* X-ul foii: în colțul panoului */
html[data-pbx-desk-on] .fpd-container.fpd-wrapper.fpd-layout-small fpd-main-bar > .fpd-close {
	position: fixed !important;
	left: auto !important;
	right: 16px !important;
	top: 68px !important;
	bottom: auto !important;
	transform: none !important;
	width: 34px !important;
	height: 34px !important;
	line-height: 34px !important;
	border-radius: 50% !important;
	background: #f1f3f6 !important;
	border: 0 !important;
	box-shadow: none !important;
	align-items: center;
	justify-content: center;
	z-index: 10004;
}
html[data-pbx-desk-on] .fpd-container.fpd-wrapper.fpd-layout-small fpd-main-bar > .fpd-close::before {
	display: none;
}
html[data-pbx-desk-on] .fpd-container.fpd-wrapper.fpd-layout-small fpd-main-bar > .fpd-close .fpd-icon-close {
	display: block;
	font-size: 12px;
}
/* mesajele scurte: pe mijlocul zonei de lucru, nu al ecranului */
html[data-pbx-desk-on] .pbx-toast {
	left: calc((100% - var(--pbx-desk-w)) / 2);
	bottom: 28px;
}
/* foaia de verificare: cardul stă în panou, tabloul rămâne întreg în stânga */
html[data-pbx-desk-on] .fpd-precart-overlay.fpd-precart-sheetmode {
	justify-content: flex-end;
	align-items: flex-end;
	padding: 0 20px 20px 0;
}
html[data-pbx-desk-on] .fpd-precart-overlay.fpd-precart-sheetmode .fpd-precart-sheet {
	width: calc(var(--pbx-desk-w) - 40px);
	max-width: calc(var(--pbx-desk-w) - 40px);
	margin: 0;
}
/* cu mouse-ul: mâna pe butoane, o umbră ușoară la trecere */
html[data-pbx-desk] .pbx-home-btn:hover,
html[data-pbx-desk] .pbx-photo-btn:hover,
html[data-pbx-desk] .pbx-text-btn:hover,
html[data-pbx-desk] .pbx-top-item:hover {
	background-color: #e7ebf0;
}
/* fișier tras din calculator: tabloul arată că primește */
html[data-pbx-drop] .fpd-container fpd-main-wrapper {
	outline: 3px dashed #3b5bdb;
	outline-offset: -10px;
}
/* bara principală FPD: în panou nu mai are ce căuta în josul ecranului (navigarea ei e deja ascunsă, dar își ținea
   locul de 80 px și acoperea butonul verde); foile ei (poze, „Adaugă text”) sunt așezate fix, mai sus */
html[data-pbx-desk-on] .fpd-container.fpd-wrapper.fpd-layout-small fpd-main-bar {
	height: 0 !important;
	min-height: 0 !important;
	background: none !important;
	border: 0 !important;
}
html[data-pbx-desk-on] .fpd-container.fpd-wrapper.fpd-layout-small fpd-main-bar > .fpd-navigation {
	display: none !important;
}

/* X-ul foii în panou: la vedere și când e deschisă foaia „Adaugă text”, nu doar foaia de poze */
html[data-pbx-desk-on] .fpd-container.fpd-wrapper.fpd-layout-small.fpd-module-visible fpd-main-bar > .fpd-close,
html[data-pbx-desk-on] .fpd-container.fpd-wrapper.fpd-layout-small.fpd-secondary-visible fpd-main-bar > .fpd-close {
	display: flex !important;
}

/* cât e deschisă o foaie în panou, banda sfatului e goală: ascunsă, altfel stă peste X-ul foii */
html[data-pbx-desk-on] .pbx-top-tip.pbx-top-tip-empty {
	display: none;
}

/* ---------- v4.1: lățimile de mijloc, 768 – 1099 px (Desk Panel pornit, panoul încă nu) ---------- */
/* Userul: „sub 1100 px rămâne varianta de telefon”. Barele rămân jos, pe toată lățimea, ca pe telefon. Foile nu pot
   rămâne foi de jos (regulile lor sunt scrise pentru sub 768 px): foaia de poze e deja un card pe mijloc, iar foaia
   „Adaugă text” acoperea tot ecranul. Aici devine și ea un card, cu același fond întunecat, iar X-ul celor două
   carduri stă în colțul lor, nu rătăcit în capul ecranului. */
@media (min-width: 768px) {
	html[data-pbx-desk]:not([data-pbx-desk-on]) .fpd-container.fpd-wrapper.fpd-layout-small.fpd-module-visible fpd-main-bar {
		background: transparent !important;
	}
	html[data-pbx-desk]:not([data-pbx-desk-on]) .fpd-container.fpd-wrapper.fpd-layout-small.fpd-module-visible fpd-main-bar::before {
		content: '';
		position: fixed;
		inset: 0;
		background: rgba(24, 24, 27, .38);
	}
	html[data-pbx-desk]:not([data-pbx-desk-on]) .fpd-container.fpd-wrapper.fpd-layout-small.fpd-module-visible fpd-main-bar > .fpd-module-content {
		position: fixed !important;
		left: 50% !important;
		top: 22vh !important;
		bottom: auto !important;
		transform: translateX(-50%);
		width: 420px !important;
		height: auto !important;
		max-height: 56vh;
		border-radius: 14px;
		box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
		background: #fff !important;
		padding: 50px 18px 18px !important;
		z-index: 10;
	}
	html[data-pbx-desk]:not([data-pbx-desk-on]) .fpd-container.fpd-wrapper.fpd-layout-small fpd-main-bar > .fpd-close {
		position: fixed !important;
		left: calc(50% + 166px) !important;
		right: auto !important;
		top: calc(22vh + 10px) !important;
		bottom: auto !important;
		transform: none !important;
		width: 32px !important;
		height: 32px !important;
		line-height: 32px !important;
		border-radius: 50% !important;
		background: #f1f3f6 !important;
		border: 0 !important;
		box-shadow: none !important;
		align-items: center;
		justify-content: center;
		z-index: 12;
	}
	html[data-pbx-desk]:not([data-pbx-desk-on]) .fpd-container.fpd-wrapper.fpd-layout-small fpd-main-bar > .fpd-close::before {
		display: none;
	}
	html[data-pbx-desk]:not([data-pbx-desk-on]) .fpd-container.fpd-wrapper.fpd-layout-small fpd-main-bar > .fpd-close .fpd-icon-close {
		display: block;
		font-size: 12px;
	}
	html[data-pbx-desk]:not([data-pbx-desk-on]) .fpd-container.fpd-wrapper.fpd-layout-small.fpd-module-visible fpd-main-bar > .fpd-close,
	html[data-pbx-desk]:not([data-pbx-desk-on]) .fpd-container.fpd-wrapper.fpd-layout-small.fpd-secondary-visible fpd-main-bar > .fpd-close {
		display: flex !important;
	}
}

/* ---------- v4.2: panoul în stânga (`fpd_deskPanelSide` = left) ---------- */
/* Userul, după ce a văzut panoul în dreapta: „cred că aș prefera ca panoul să fie în stânga”. Aceleași reguli ca în
   v4.0, oglindite; meniul cu trei puncte și eticheta cu mărimea, care stau în stânga barei de sus, ajung chiar deasupra
   panoului. Partea se alege din opțiune, ca cele două să poată fi comparate. */
html[data-pbx-desk-on][data-pbx-desk-side="left"] .fpd-modal-product-designer > .fpd-modal-inner > .fpd-wrapper.fpd-layout-small fpd-main-wrapper,
html[data-pbx-desk-on][data-pbx-desk-side="left"] .fpd-modal-product-designer > .fpd-modal-inner > .fpd-wrapper.fpd-layout-small[data-pbx-strip][data-pbx-modbar] fpd-main-wrapper {
	margin-left: var(--pbx-desk-w) !important;
}
html[data-pbx-desk-on][data-pbx-desk-side="left"] .fpd-modal-product-designer > .fpd-modal-inner > .fpd-wrapper.fpd-layout-small::after,
html[data-pbx-desk-on][data-pbx-desk-side="left"] .pbx-top-tip {
	left: 0;
	right: auto;
	border-left: 0;
	border-right: 1px solid #e3e7ec;
}
html[data-pbx-desk-on][data-pbx-desk-side="left"] .pbx-home-bar:not(.pbx-home-fab),
html[data-pbx-desk-on][data-pbx-desk-side="left"] .pbx-photo-bar,
html[data-pbx-desk-on][data-pbx-desk-side="left"] .pbx-text-bar,
html[data-pbx-desk-on][data-pbx-desk-side="left"] fpd-element-toolbar.fpd-smart.fpd-layout-small {
	left: 0 !important;
	right: auto !important;
	border-left: 0;
	border-right: 1px solid #e3e7ec;
}
html[data-pbx-desk-on][data-pbx-desk-side="left"] .pbx-home-bar.pbx-home-fab,
html[data-pbx-desk-on][data-pbx-desk-side="left"] fpd-actions-bar [data-pos="modal"] .fpd-done {
	left: 20px;
	right: auto;
}
html[data-pbx-desk-on][data-pbx-desk-side="left"] .fpd-upload-zone-panel.fpd-active,
html[data-pbx-desk-on][data-pbx-desk-side="left"] .fpd-container.fpd-wrapper.fpd-layout-small.fpd-module-visible fpd-main-bar > .fpd-module-content {
	left: 0 !important;
	right: auto !important;
	border-left: 0;
	border-right: 1px solid #e3e7ec;
}
html[data-pbx-desk-on][data-pbx-desk-side="left"] .fpd-container.fpd-wrapper.fpd-layout-small fpd-main-bar > .fpd-close {
	left: calc(var(--pbx-desk-w) - 50px) !important;
	right: auto !important;
}
html[data-pbx-desk-on][data-pbx-desk-side="left"] .pbx-toast {
	left: calc(var(--pbx-desk-w) + (100% - var(--pbx-desk-w)) / 2);
}
html[data-pbx-desk-on][data-pbx-desk-side="left"] .fpd-precart-overlay.fpd-precart-sheetmode {
	justify-content: flex-start;
	padding: 0 0 20px 20px;
}

/* ---------- v4.3: avertismentul în bandă + banda sub bara de sus și pe calculator ---------- */
/* Alegerile userului (3 oct 2026, macheta studiu-ui/variante-bara-poza/calculator-sfaturi.html): „bandă sub bara de sus”,
   „avertismentul îi ia locul sfatului”, „cât e valabil”, „același loc peste tot” (deci și pe telefon). Starea o pune
   fpd-home-bar.js (`pbx-top-tip-warn`), la cererea fpd-photo-touch.js (`window.pbxTopWarn`). */
.pbx-top-tip > span {
	flex: 1 1 auto;
	min-width: 0;
}
.pbx-top-tip.pbx-top-tip-warn {
	background: #fff4f2;
	border-bottom-color: #f3c6c0;
	color: #b3261e;
	font-weight: 600;
}
.pbx-top-tip.pbx-top-tip-warn svg {
	fill: #b3261e;
}
.pbx-top-tip-x {
	flex: none;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #f3c6c0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.pbx-top-tip-x[hidden] {
	display: none;
}
.pbx-top-tip .pbx-top-tip-x svg {
	width: 12px;
	height: 12px;
}
/* pe calculator: banda nu mai e în panou, ci deasupra tabloului, pe lățimea zonei de lucru */
html[data-pbx-desk-on] .pbx-top-tip {
	left: 0;
	right: var(--pbx-desk-w);
	width: auto;
	height: 44px;
	min-height: 0;
	padding: 0 20px;
	align-items: center;
	justify-content: center;
	border-left: 0;
	border-bottom: 1px solid #e3e7ec;
	font-size: 14px;
	line-height: 1.3;
}
html[data-pbx-desk-on] .pbx-top-tip.pbx-top-tip-warn {
	border-bottom-color: #f3c6c0;
}
html[data-pbx-desk-on] .pbx-top-tip > i {
	margin-top: 0;
}
html[data-pbx-desk-on] .pbx-top-tip > span {
	flex: 0 1 auto;
	-webkit-line-clamp: 2;
}
html[data-pbx-desk-on] .pbx-top-tip-x {
	margin-left: 6px;
}
html[data-pbx-desk-on][data-pbx-desk-side="left"] .pbx-top-tip {
	left: var(--pbx-desk-w);
	right: 0;
	border-right: 0;
}
/* zona de lucru începe sub bandă (și rămâne acolo cât banda e goală, ca tabloul să nu sară) */
html[data-pbx-desk-on] .fpd-modal-product-designer > .fpd-modal-inner > .fpd-wrapper.fpd-layout-small[data-pbx-strip="b"] fpd-main-wrapper,
html[data-pbx-desk-on] .fpd-modal-product-designer > .fpd-modal-inner > .fpd-wrapper.fpd-layout-small[data-pbx-strip="b"][data-pbx-modbar] fpd-main-wrapper {
	height: calc(100% - var(--fpd-actions-bar-height) - 44px) !important;
	margin-top: 44px !important;
}

/* ---------- v4.4: calculator, câmpul de text din panou pe toată lățimea ---------- */
/* Userul (3 oct 2026): „câmpul de text din panou e prea îngust și este spațiu suficient”. Câmpul se aliniază cu butoanele
   de sub el (20 px de la marginile panoului), iar textul pe un singur rând nu mai derulează pe orizontală: se rupe la
   vedere și câmpul crește cu el (în design rămâne tot pe un rând; ruperea e doar a câmpului). */
html[data-pbx-desk-on] fpd-element-toolbar.fpd-smart .fpd-sub-panel > .fpd-panel-edit-text.fpd-active {
	padding-left: var(--pbx-desk-text-pad, 0px);
	padding-right: var(--pbx-desk-text-pad, 0px);
}
html[data-pbx-desk-on] fpd-element-toolbar[data-pbx-text-lines="1"] .fpd-panel-edit-text textarea[data-control="text"] {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	overflow-x: hidden;
	overflow-y: auto;
	height: 73px; /* două rânduri, unde câmpul nu știe să crească singur */
}
@supports (field-sizing: content) {
	html[data-pbx-desk-on] fpd-element-toolbar .fpd-panel-edit-text textarea[data-control="text"],
	html[data-pbx-desk-on] fpd-element-toolbar[data-pbx-text-lines="1"] .fpd-panel-edit-text textarea[data-control="text"] {
		field-sizing: content;
		height: auto;
		min-height: 49px;
		max-height: 145px;
	}
}

/* ---------- v4.5: calculator, funcțiile meniului la vedere în bara de sus (fpd-top-bar.js) ---------- */
/* Userul (3 oct 2026): „avem destul loc să adăugăm funcțiile din meniul din stânga în bara de sus”. Același
   `.pbx-top-menu`, întins pe un rând; clasa o pune scriptul doar cu panoul de calculator pornit. */
.pbx-top-menu.pbx-top-inline {
	z-index: 10001; /* ca restul barei de sus: foile și mesajele îl acoperă */
	flex-direction: row;
	align-items: center;
	gap: 2px;
	min-width: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.pbx-top-menu.pbx-top-inline .pbx-top-item {
	height: 36px;
	padding: 0 10px;
	gap: 7px;
	font-size: 13.5px;
	white-space: nowrap;
	border-radius: 9px;
}
.pbx-top-menu.pbx-top-inline .pbx-top-item svg {
	width: 17px;
	height: 17px;
}
.pbx-top-menu.pbx-top-inline .pbx-top-item:hover {
	background: #f1f3f6;
}
.pbx-top-menu.pbx-top-inline .pbx-top-item.pbx-off {
	background: transparent;
	cursor: default;
}
.pbx-top-menu.pbx-top-inline .pbx-top-item[data-item="reset"] {
	margin: 0 0 0 14px;
	padding: 0 10px;
	border-top: 0;
	position: relative;
}
.pbx-top-menu.pbx-top-inline .pbx-top-item[data-item="reset"]::before {
	content: '';
	position: absolute;
	left: -8px;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: #e3e7ec;
}

/* ---------- v4.6: calculator, butonul verde al verificării pe un singur rând ---------- */
/* Userul (3 oct 2026), după ce a pus textul „Da, Adaugă în coș”: pe calculator, în cardul de 340 px, butonul se rupea pe
   două rânduri (pe telefon încape). Litera puțin mai mică și spații mai strânse; textul nu se mai rupe. */
html[data-pbx-desk-on] .fpd-precart-sheetmode .fpd-precart-ok {
	gap: 6px;
	padding: 0 10px;
	font-size: 14.5px;
	white-space: nowrap;
}
html[data-pbx-desk-on] .fpd-precart-sheetmode .fpd-precart-ok svg {
	width: 18px;
	height: 18px;
}
html[data-pbx-desk-on] .fpd-precart-sheetmode .fpd-precart-price::before {
	margin-right: 6px;
}

/* ---------- v4.7: colajul aranjat singur și „Alt loc” (fpd-collage.js) ---------- */
/* Macheta aleasă de user pe 4 oct 2026: studiu-ui/variante-bara-poza/colaj-aranjat-singur.html. */
/* butonul „Încarcă toate pozele” din bara de jos: închis la culoare, ca acțiunea principală a ecranului gol */
.pbx-home-bar .pbx-home-btn.pbx-home-bulk {
	background: #1f2d3d;
	color: #fff;
	flex: 1 1 auto;
}
.pbx-home-bar .pbx-home-btn.pbx-home-bulk svg {
	fill: currentColor;
}
/* cât pozele se urcă și se așază singure: foaia de poze a FPD lucrează nevăzută, iar jos stă bara noastră de progres */
html[data-pbx-bulk] .fpd-upload-zone-panel,
html[data-pbx-bulk] .pbx-home-bar,
html[data-pbx-bulk] .pbx-photo-bar,
html[data-pbx-bulk] fpd-element-toolbar {
	opacity: 0 !important;
	pointer-events: none !important;
}
.pbx-bulk {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10000000002;
	box-sizing: border-box;
	padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px));
	background: #fff;
	border-top: 1px solid #e3e7ec;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -4px 18px rgba(31, 45, 61, .12);
	color: #1f2d3d;
	font-size: 14px;
}
.pbx-bulk[hidden] {
	display: none;
}
.pbx-bulk-l {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
	font-weight: 600;
}
.pbx-bulk-l b {
	font-variant-numeric: tabular-nums;
}
.pbx-bulk-tr {
	height: 8px;
	border-radius: 4px;
	background: #f1f3f6;
	overflow: hidden;
}
.pbx-bulk-tr u {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 4px;
	background: #11875a;
	transition: width .3s ease;
}
html[data-pbx-desk-on] .pbx-bulk {
	right: auto;
	width: var(--pbx-desk-w);
	border-radius: 0;
	box-shadow: none;
	border-right: 1px solid #e3e7ec;
}
html[data-pbx-desk-on][data-pbx-desk-side="right"] .pbx-bulk {
	left: auto;
	right: 0;
}
/* „Alt loc” e apăsat: butonul rămâne luminat, banda de sus e o notă (albastră), nu un avertisment */
html[data-pbx-swap] .pbx-photo-bar .pbx-photo-swap {
	background: #e3e9fb;
	color: #3b5bdb;
	outline: 1.5px solid #3b5bdb;
}
.pbx-top-tip.pbx-top-tip-note {
	background: #eef2fd;
	border-bottom-color: #c9d5f6;
	color: #1f2d3d;
	font-weight: 600;
}
.pbx-top-tip.pbx-top-tip-note .pbx-top-tip-x {
	border-color: #c9d5f6;
}

/* ---------- v4.8: colaj, ecranul „Ai ales prea multe poze” (fpd-collage.js) ---------- */
.pbx-pick {
	position: fixed;
	inset: 0;
	z-index: 10000000003;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(24, 24, 27, .45);
	font-family: inherit;
	color: #1f2d3d;
}
.pbx-pick-card {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 560px;
	max-height: 88%;
	display: flex;
	flex-direction: column;
	padding: 18px 16px calc(14px + env(safe-area-inset-bottom, 0px));
	background: #fff;
	border-radius: 20px 20px 0 0;
	box-shadow: 0 -10px 30px rgba(31, 45, 61, .2);
}
.pbx-pick-card h3 {
	margin: 0 44px 4px 0;
	font-size: 18px;
	line-height: 1.25;
	font-weight: 700;
	color: #1f2d3d;
}
.pbx-pick-sub {
	margin: 0 0 12px;
	font-size: 13.5px;
	line-height: 1.35;
	color: #5b6775;
}
.pbx-pick-x {
	position: absolute;
	right: 12px;
	top: 12px;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f1f3f6;
	color: #1f2d3d;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.pbx-pick-grid {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	padding: 2px;
	-webkit-overflow-scrolling: touch;
}
.pbx-pick-item {
	position: relative;
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: #eceff3 center / cover no-repeat;
	cursor: pointer;
	opacity: .45;
	-webkit-tap-highlight-color: transparent;
}
.pbx-pick-item.pbx-on {
	opacity: 1;
	outline: 3px solid #11875a;
	outline-offset: -1px;
}
.pbx-pick-item::after {
	content: '';
	position: absolute;
	right: 5px;
	top: 5px;
	width: 22px;
	height: 22px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 2px solid #fff;
	background: rgba(31, 45, 61, .35);
}
.pbx-pick-item.pbx-on::after {
	border-color: #11875a;
	background: #11875a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.200 4.800 12l-1.400 1.400L9 19 21 7l-1.400-1.400z'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.pbx-pick-note {
	margin: 8px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: #b3261e;
}
.pbx-pick-note[hidden] {
	display: none;
}
.pbx-pick-foot {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
}
.pbx-pick-count {
	flex: none;
	font-size: 13.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.pbx-pick-go {
	flex: 1 1 auto;
	height: 48px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 24px;
	background: #11875a;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
.pbx-pick-go:disabled {
	background: #c9d0d8;
	cursor: default;
}
@media (min-width: 768px) {
	.pbx-pick {
		align-items: center;
	}
	.pbx-pick-card {
		border-radius: 20px;
		max-height: 80%;
	}
	.pbx-pick-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* ---------- v4.9: galeria de poze, fără fereastra „UNDEFINED” și fără miniaturi spălăcite ---------- */
/* Userul, pe iPhone (4 oct 2026): la atingerea unei poze din galerie apărea o clipă o fereastră albă cu „UNDEFINED”
   și pozele păreau „mai luminate”. Amândouă sunt ale motorului și țin de mouse: previzualizarea mare de la trecerea cu
   mouse-ul (`.fpd-thumbnail-preview`, cu titlul pozei, care la pozele urcate lipsește) și estomparea la 80 % a
   miniaturii de sub cursor. Pe telefon, atingerea ține loc de „mouse deasupra”, deci rămâneau lipite de poza atinsă. */
body > .fpd-thumbnail-preview {
	display: none !important;
}
.fpd-container .fpd-grid.fpd-photo-grid > .fpd-item:hover > picture,
.fpd-container .fpd-grid.fpd-photo-grid > .fpd-item:hover > img {
	opacity: 1;
}
/* semnul apăsării: miniatura se strânge puțin cât e ținută */
.fpd-container .fpd-grid.fpd-photo-grid > .fpd-item:active > picture {
	transform: scale(.97);
	transition: transform .08s ease;
}

/* ---------- v5.0: bara pozei, forma „c” (ordinea aleasă de user pe 4 oct 2026) ---------- */
/* Macheta: studiu-ui/variante-bara-poza/bara-pozei-ordine.html, varianta B („poza sus, caseta jos”). Sus, ce lucrează pe
   poză în caseta ei: Potrivește, Centrează, −, + (și Rotește, unde designul lasă). Jos, ce privește caseta: Schimbă locul
   (la colaje) și uneltele FPD ale elementului, cu Șterge ultimul și roșu. Bara FPD stă nevăzută dedesubt (ca la forma „b”),
   iar uneltele ei sunt apăsate prin butoanele noastre. */
.pbx-photo-fit {
	display: none;
}
.pbx-photo-bar[data-variant="c"] {
	padding: 12px 12px calc(14px + env(safe-area-inset-bottom, 0px));
}
.pbx-photo-bar[data-variant="c"] .pbx-photo-row {
	flex-wrap: wrap;
	gap: 8px 6px;
}
.pbx-photo-bar[data-variant="c"] .pbx-photo-btn {
	flex: 1 1 0;
	height: 40px;
	border-radius: 11px;
	font-size: 13px;
}
.pbx-photo-bar[data-variant="c"] .pbx-photo-btn[hidden] {
	display: none;
}
.pbx-photo-bar[data-variant="c"] .pbx-photo-btn svg {
	width: 18px;
	height: 18px;
}
.pbx-photo-bar[data-variant="c"] .pbx-photo-fit { display: flex; order: 1; }
.pbx-photo-bar[data-variant="c"] .pbx-photo-center { order: 2; }
.pbx-photo-bar[data-variant="c"] .pbx-photo-rotate { order: 7; } /* pe rândul de jos: cu el sus, cele cinci butoane nu încap pe un rând de telefon */
.pbx-photo-bar[data-variant="c"] .pbx-photo-minus { order: 4; }
.pbx-photo-bar[data-variant="c"] .pbx-photo-plus { order: 5; }
.pbx-photo-bar[data-variant="c"] .pbx-photo-minus,
.pbx-photo-bar[data-variant="c"] .pbx-photo-plus {
	flex: 0 0 46px;
	padding: 0;
}
.pbx-photo-bar[data-variant="c"] .pbx-photo-minus > span,
.pbx-photo-bar[data-variant="c"] .pbx-photo-plus > span {
	display: none;
}
/* despărțitorul devine ruperea de rând */
.pbx-photo-bar[data-variant="c"] .pbx-photo-sep {
	display: block;
	order: 6;
	flex: 0 0 100%;
	height: 0;
	margin: 0;
}
.pbx-photo-bar[data-variant="c"] .pbx-photo-swap { order: 7; }
.pbx-photo-bar[data-variant="c"] .pbx-photo-proxies {
	display: contents;
}
.pbx-photo-bar[data-variant="c"] .pbx-photo-proxy {
	order: 8;
	flex-direction: row;
}
.pbx-photo-bar[data-variant="c"] .pbx-photo-proxy[data-tool="fpd-tool-reset"] {
	display: none; /* „Potrivește” e sus, butonul nostru */
}
.pbx-photo-bar[data-variant="c"] .pbx-photo-proxy[data-tool="fpd-tool-remove"] {
	order: 9;
	color: #b3261e;
}
.pbx-photo-bar[data-variant="c"] .pbx-photo-glyph {
	height: 18px;
	font-size: 16px;
	line-height: 18px;
}
/* „Potrivește” se colorează doar cât caseta e descoperită */
.pbx-photo-bar[data-variant="c"][data-gap] .pbx-photo-fit {
	background: #e9edf9;
	color: #2b47b8;
	outline: 1.5px solid #3b5bdb;
}

/* ---------- v5.1: ochiul din bara de sus (previzualizarea, fpd-top-bar.js + fpd-precart.js) ---------- */
/* Alegerea userului (4 oct 2026, macheta studiu-ui/variante-bara-poza/previzualizare-ochi.html, varianta B): ochi rotund
   între mărime și butonul principal; bara rămâne pe un rând. Cu ochiul la vedere, la colaje butonul spune scurt
   „Poze · 2 din 9” (pe telefon), iar eticheta cu mărimea se scurtează singură dacă nu mai are loc (fpd-top-bar.js). */
.pbx-top-eye {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f1f3f6;
	color: #1f2d3d;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.pbx-top-eye svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}
.pbx-top-eye:active {
	background: #e3e9fb;
	color: #3b5bdb;
}
html:not([data-pbx-desk-on]) .fpd-container.fpd-wrapper[data-pbx-eye].pbx-need-photos {
	--pbx-wait-photos: 'Poze';
}

/* ---------- v5.2: avertismentul din banda de sus, mai bland ---------- */
/* Userul (4 oct 2026): „avertismentele rosii mi se par prea tari”. Din cinci variante desenate
   (studiu-ui/variante-bara-poza/avertisment-culori.html) a incercat intai C (rosu foarte deschis), apoi a ales B:
   fond alb, text obisnuit (inchis la culoare, neingrosat); rosii raman doar semnul si o dunga subtire in stanga. */
.pbx-top-tip.pbx-top-tip-warn {
	background: #fff;
	border-bottom-color: #e3e7ec;
	box-shadow: inset 3px 0 0 #d9534a;
	color: #1f2d3d;
	font-weight: 500;
}
.pbx-top-tip.pbx-top-tip-warn > i svg {
	fill: #d9534a;
}
.pbx-top-tip.pbx-top-tip-warn .pbx-top-tip-x {
	border-color: #d5dbe2;
}
.pbx-top-tip.pbx-top-tip-warn .pbx-top-tip-x svg {
	fill: #5b6878;
}
html[data-pbx-desk-on] .pbx-top-tip.pbx-top-tip-warn {
	border-bottom-color: #e3e7ec;
}