/* ============================================================
   FotoPrint Studio 2026 – Patch responsive pentru editorul
   de încărcare fotografii (plugin-ul PPC PhotoPrinting Pro).

   Rezolvă: fotografiile încărcate care ies din ecran pe mobil.

   Principiile patch-ului („blind”, funcționează la orice lățime):
   1. Grilele de thumbnail folosesc auto-fill + minmax(0,…) —
      numărul de coloane se adaptează automat la spațiul real;
      o coloană nu poate niciodată să depășească containerul.
   2. Toți copiii de grilă primesc min-width:0 (previne
      „grid blowout” cauzat de conținutul cu lățime intrinsecă).
   3. Imaginile și cardurile sunt limitate la max-width:100%.
   4. Elementele cu min-width fix (select de format, chitanța
      de comandă) devin fluide pe mobil.
   ============================================================ */

/* ---------- 1. Grilele de thumbnail: adaptive, nu fixe ---------- */

/* Desktop: carduri ~214px, dar auto-fill renunță la coloane dacă nu încape */
.ppc-editor [data-ppc-upload-thumbs].ppc-thumb-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(214px, 100%), 1fr)) !important;
	gap: 20px 10px !important;
}

/* Tabletă / mobil mare: coloane adaptive (1 sau 2, după spațiu) */
@media (max-width: 760px) {
	.ppc-editor [data-ppc-upload-thumbs].ppc-thumb-grid {
		grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)) !important;
		gap: 14px 10px !important;
	}
}

/* Telefoane: o singură coloană fluidă — imposibil de depășit */
@media (max-width: 480px) {
	.ppc-editor [data-ppc-upload-thumbs].ppc-thumb-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.ppc-photo-card {
		max-width: 280px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* Grila de verificare din pasul 3 — aceeași protecție */
.ppc-thumb-grid,
.ppc-thumb-grid.large {
	grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)) !important;
}

/* ---------- 2. Copiii de grilă: niciodată mai lați ca pista ---------- */

.ppc-photo-card,
.ppc-thumb,
.ppc-canvas-wrap,
.ppc-controls,
.ppc-photo-list,
.ppc-review-box,
.ppc-editor-workspace > * {
	min-width: 0 !important;
	max-width: 100% !important;
}

.ppc-photo-card {
	width: 100% !important;
	box-sizing: border-box !important;
}

/* ---------- 3. Imaginile rămân în card ---------- */

.ppc-photo-card img,
.ppc-thumb img,
.ppc-card-image-btn img {
	max-width: 100% !important;
	height: auto;
}

.ppc-card-image-btn img {
	width: 100% !important;
	max-width: 146px !important;
	object-fit: contain !important;
}

/* ---------- 4. Rândul „Cantitate”: fără min-content care explodează ---------- */

.ppc-card-qty-row {
	grid-template-columns: minmax(0, 1fr) 18px 46px 18px !important;
}

.ppc-card-qty-row label {
	min-width: 0 !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- 5. Containerele editorului: fluide, cu borduri care nu sar în afară ---------- */

.ppc-editor,
.ppc-page-wizard,
.ppc-step.is-active,
.ppc-editor-upload,
.ppc-editor-workspace,
.ppc-product-editor-auto {
	min-width: 0 !important;
	max-width: 100% !important;
}

.ppc-editor {
	box-sizing: border-box !important;
}

.ppc-page-wizard .ppc-step.is-active {
	box-sizing: border-box !important;
}

/* Workspace de editare (pasul 2): pe mobil o singură coloană fluidă */
@media (max-width: 1050px) {
	.ppc-editor .ppc-editor-workspace {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* ---------- 6. Elemente cu lățimi fixe -> fluide pe mobil ---------- */

.ppc-bulk-format-box select {
	min-width: 0 !important;
	max-width: 100% !important;
	box-sizing: border-box;
}

.ppc-review-box {
	min-width: 0 !important;
}

.ppc-stepper button {
	min-width: 0 !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- 7. Bara de progres și panourile nu depășesc ecranul ---------- */

.ppc-upload-progress,
.ppc-source-buttons,
.ppc-upload-info {
	max-width: 100% !important;
	min-width: 0 !important;
}

/* ---------- 8. Garda finală: nimic din editor nu derulează pagina orizontal ---------- */

.ppc-editor {
	overflow-x: hidden;
}

@supports (overflow: clip) {
	.ppc-editor {
		overflow-x: clip;
	}
}