/*
|--------------------------------------------------------------------------
| PrintLab Editor Público — Shell visual (inspirado en LaTostadora)
|--------------------------------------------------------------------------
| Exclusivo del Editor Público (public-editor.php). No compartir selectores
| con printlab-editor.css (Editor Interno) ni depender de sus variables.
| Cero cambios de lógica: todo lo que aquí se posiciona/oculta sigue
| controlado por public-editor.js exactamente igual que antes (style.display
| inline, style.borderColor inline, etc.) — este archivo solo da estilo a
| esos mismos estados, nunca los sustituye.
*/

/*
|--------------------------------------------------------------------------
| Sprint 5 — Fuentes propias (self-hosted, Google Fonts OFL)
|--------------------------------------------------------------------------
| Descargadas del subset "latin" (cubre español: ñ, á, é, í, ó, ú, ü están
| dentro de U+0000-00FF) vía la API oficial fonts.googleapis.com/css2, con
| User-Agent moderno para forzar entrega en .woff2. Varias de estas fuentes
| (Roboto, Open Sans, Montserrat, Oswald, Raleway, Playfair Display,
| Merriweather, Dancing Script, Caveat) las sirve Google como fuente
| variable: un único archivo cubre los pesos 400 y 700 — por eso varias
| reglas de abajo comparten el mismo url(). Lato y Poppins sí traen un
| archivo estático distinto por peso. El resto (Bebas Neue, Anton, Fjalla
| One, Pacifico, Permanent Marker, Indie Flower, Righteous) solo existen en
| peso 400 en origen. Arial no está aquí: es fuente de sistema.
*/

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/roboto-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/roboto-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/open-sans-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/open-sans-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/montserrat-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/montserrat-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/lato-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/lato-700.woff2') format('woff2');
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/poppins-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/poppins-700.woff2') format('woff2');
}

@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/oswald-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/oswald-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/raleway-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/raleway-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/playfair-display-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/playfair-display-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Merriweather';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/merriweather-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Merriweather';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/merriweather-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Bebas Neue';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/bebas-neue-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Anton';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/anton-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Fjalla One';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/fjalla-one-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Pacifico';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/pacifico-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Dancing Script';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/dancing-script-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Dancing Script';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/dancing-script-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Caveat';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/caveat-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Caveat';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/caveat-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Permanent Marker';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/permanent-marker-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Indie Flower';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/indie-flower-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Righteous';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/righteous-400.woff2') format('woff2');
}

#printlab-app-root {
	--pla-bg: #ffffff;
	--pla-bg-sunken: #f7f8f9;
	--pla-border: #e2e4e8;
	--pla-text: #1d2327;
	--pla-text-muted: #6b7280;
	--pla-accent: #2271b1;
	--pla-accent-hover: #185a8c;
	--pla-accent-soft: rgba(34, 113, 177, 0.08);
	--pla-danger: #b32d2e;
	--pla-success: #2e7d32;
	--pla-radius: 10px;
	--pla-radius-sm: 6px;
	--pla-shadow-sm: 0 1px 2px rgba(17, 24, 39, .05);
	--pla-shadow-md: 0 1px 2px rgba(17, 24, 39, .04), 0 10px 24px -8px rgba(17, 24, 39, .16);
	--pla-shadow-lg: 0 2px 4px rgba(17, 24, 39, .05), 0 16px 40px -12px rgba(17, 24, 39, .22);
	--pla-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#printlab-app-root,
#printlab-app-root *,
#printlab-app-root *::before,
#printlab-app-root *::after {
	box-sizing: border-box;
}

/* Toma toda la pantalla, por encima del tema — el editor público es una
   experiencia dedicada, no un bloque más dentro de la página de producto. */
#printlab-app-root {
	position: fixed;
	top: 0;
	left: 0;
	/* width/height explícitos en unidades de viewport, NO "inset:0". Un
	   position:fixed solo se ancla al viewport si ningún ancestro entre
	   este nodo y <html> establece su propio containing block (transform,
	   filter, perspective, contain o will-change en el árbol del tema —
	   algo fuera de nuestro control, ya que este shortcode se inserta
	   dentro del contenido normal de una página del tema, no en una
	   plantilla dedicada). "inset:0" hereda el tamaño de ESE ancestro,
	   que puede colapsar a 0 si su único contenido es este nodo (al
	   volverse fixed, deja de aportar altura al flujo). vw/vh, en
	   cambio, se resuelven siempre contra el viewport real, sea cual
	   sea el containing block de posicionamiento — por eso neutralizan
	   el problema sin depender de conocer qué ancestro del tema lo causa. */
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	z-index: 999999;
	display: grid;
	grid-template-areas:
		"topbar topbar"
		"rail   stage";
	grid-template-columns: 240px 1fr;
	grid-template-rows: 96px 1fr;
	background: var(--pla-bg-sunken);
	font-family: var(--pla-font);
	font-size: 13px;
	color: var(--pla-text);
}

html:has(#printlab-app-root),
body:has(#printlab-app-root) {
	overflow: hidden;
	height: 100%;
}

#printlab-app-root button {
	cursor: pointer;
	font-family: inherit;
}

.printlab-app-icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	display: block;
}

.printlab-app-icon--sm {
	width: 16px;
	height: 16px;
}

/* ============ Topbar: selector de vistas ============ */

.printlab-app-topbar {
	grid-area: topbar;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pla-bg);
	border-bottom: 1px solid var(--pla-border);
	padding: 0 16px;
	overflow-x: auto;
}

.printlab-app-view-tabs {
	display: flex;
	gap: 6px;
}

.printlab-app-view-btn {
	border: 1px solid var(--pla-border);
	background: var(--pla-bg);
	color: var(--pla-text);
	border-radius: 999px;
	padding: 6px 16px;
	font-size: 13px;
	text-transform: capitalize;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.printlab-app-view-btn:hover {
	border-color: var(--pla-accent);
	background: var(--pla-accent-soft);
}

.printlab-app-view-btn--active {
	background: var(--pla-accent);
	border-color: var(--pla-accent);
	color: #fff;
	box-shadow: var(--pla-shadow-sm);
}

/* ============ Rail: acciones (texto/imagen/eliminar/color/talla) ============ */

.printlab-app-rail {
	grid-area: rail;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	padding: 16px 8px;
	background: var(--pla-bg);
	border-right: 1px solid var(--pla-border);
	overflow-y: auto;
}

.printlab-app-rail-btn {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border: 1px solid var(--pla-border);
	background: var(--pla-bg);
	border-radius: var(--pla-radius);
	box-shadow: var(--pla-shadow-sm);
	color: var(--pla-text);
	transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.printlab-app-rail-btn:hover {
	background: var(--pla-accent-soft);
	color: var(--pla-accent);
	box-shadow: var(--pla-shadow-md);
	transform: translateY(-1px);
}

.printlab-app-rail-btn:active {
	transform: translateY(0);
}

.printlab-app-rail-btn--danger:hover {
	background: #fdecea;
	color: var(--pla-danger);
}

.printlab-app-rail-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.printlab-app-rail-icon .printlab-app-icon {
	width: 26px;
	height: 26px;
}

.printlab-app-rail-label {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
}

.printlab-app-hidden-input {
	display: none;
}

.printlab-app-text-context-bar {
	display: none;
}

/* Columna de miniaturas de vista — exclusiva de desktop, ver el bloque
   @media (min-width:769px) más abajo. Oculta por defecto aquí (fuera de
   cualquier media query) como estado de seguridad — en móvil nunca se
   activa porque nada dentro de @media (max-width:768px) la toca. */
.printlab-app-view-thumbs {
	display: none;
}

/* Galería "Ver" (solo desktop) — cerrado por defecto vía [hidden]. La
   regla visible vive dentro del @media (min-width:769px) de abajo,
   condicionada a :not([hidden]) para no pisar nunca el [hidden] del
   HTML si algún día se toca el orden de las hojas de estilo. */
.printlab-app-view-gallery-modal {
	display: none;
}

.printlab-app-view-gallery-modal:not([hidden]) {
	display: flex;
	position: fixed;
	inset: 0;
	z-index: 1000001;
	align-items: center;
	justify-content: center;
}

.printlab-app-view-gallery-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 24, 39, .6);
}

.printlab-app-view-gallery-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(900px, 92vw);
	max-height: 88vh;
	background: var(--pla-bg);
	border-radius: var(--pla-radius);
	box-shadow: var(--pla-shadow-lg);
	overflow: hidden;
}

.printlab-app-view-gallery-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: var(--pla-radius-sm);
	background: var(--pla-bg-sunken);
	color: var(--pla-text-muted);
	cursor: pointer;
	z-index: 1;
}

.printlab-app-view-gallery-close:hover {
	background: var(--pla-bg);
	color: var(--pla-text);
}

.printlab-app-view-gallery-body {
	display: flex;
	flex-direction: column-reverse;
	min-height: 0;
}

.printlab-app-view-gallery-thumbs {
	display: flex;
	flex-direction: row;
	gap: 10px;
	width: auto;
	flex-shrink: 0;
	padding: 12px;
	overflow-x: auto;
	overflow-y: hidden;
	background: var(--pla-bg-sunken);
	border-right: none;
	border-top: 1px solid var(--pla-border);
}

.printlab-app-view-gallery-thumb {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
	width: 64px;
	border: 2px solid transparent;
	border-radius: var(--pla-radius-sm);
	background: var(--pla-bg);
	padding: 4px;
	cursor: pointer;
	color: var(--pla-text-muted);
	font-size: 10px;
	font-weight: 600;
	text-transform: capitalize;
}

.printlab-app-view-gallery-thumb img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--pla-radius-sm);
}

.printlab-app-view-gallery-thumb.printlab-app-view-btn--active {
	border-color: var(--pla-accent);
	color: var(--pla-accent);
}

.printlab-app-view-gallery-main {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	min-width: 0;
	min-height: 0;
}

.printlab-app-view-gallery-image {
	max-width: 100%;
	max-height: 60vh;
	object-fit: contain;
}

/* ============ Stage: lienzo ============ */

.printlab-app-stage {
	grid-area: stage;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: auto;
	padding: 16px;
}

/* Acoplamiento crítico: canvasEl.closest('.printlab-public-canvas-wrap')
   en canvas.js (fitToView) lee el clientWidth de este elemento. Debe
   seguir siendo el ancestro directo del <canvas> y su ancho no debe
   depender de los paneles superpuestos (viven en una capa aparte). */
.printlab-public-canvas-wrap {
	width: 100%;
	max-width: 600px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	box-shadow: var(--pla-shadow-md);
}

.printlab-public-canvas-wrap canvas {
	max-width: 100%;
}

/* Fabric.js genera .canvas-container (wrapper) + dos <canvas> apilados:
   .lower-canvas (el original, id=printlab-editor-canvas, donde se pinta
   el mockup real) y .upper-canvas (capa transparente encima, para
   selección/controles). El selector genérico "canvas" de la regla de
   arriba aplicaba fondo blanco a AMBAS capas — el upper-canvas, situado
   encima, tapaba por completo el contenido del lower-canvas. Se fuerza
   aquí transparencia explícita en las 4 capas para que el fondo/sombra
   de "tarjeta" solo lo aporte el contenedor exterior. */
.canvas-container,
.upper-canvas,
.lower-canvas {
	background: transparent !important;
	background-color: transparent !important;
}

/* ============ CTA (botón "Añadir al carrito") ============ */

.printlab-app-cta {
	border: none;
	background: var(--pla-accent);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	padding: 12px 28px;
	border-radius: var(--pla-radius);
	box-shadow: var(--pla-shadow-sm);
	transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}

.printlab-app-cta:hover {
	background: var(--pla-accent-hover);
	box-shadow: var(--pla-shadow-md);
	transform: translateY(-1px);
}

.printlab-app-cta:active {
	transform: translateY(0);
}

.printlab-app-cta--compact {
	padding: 8px 18px;
	font-size: 13px;
}

#printlab-public-finalize .printlab-public-btn-label-short {
	display: none;
	align-items: center;
	gap: 6px;
}

/* ============ Paneles flotantes (texto/imagen/color/talla) ============ */

/* Capa hermana de rail/stage/bottombar — a propósito fuera del grid, para
   que abrir/cerrar un panel nunca altere el ancho de .printlab-public-canvas-wrap
   ni dispare fitToView() sin querer. El display:none/block lo sigue
   controlando el JS existente (panel.style.display) tal cual; aquí solo
   se da forma a los estados que ese JS ya produce. */
.printlab-app-overlays {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 1000000;
}

.printlab-app-panel {
	display: none;
	position: absolute;
	top: 106px;
	left: 96px;
	width: 300px;
	max-height: calc(100vh - 100px);
	overflow-y: auto;
	background: var(--pla-bg);
	border: 1px solid var(--pla-border);
	border-radius: var(--pla-radius);
	box-shadow: var(--pla-shadow-lg);
	padding: 18px;
	pointer-events: auto;
	/* Anima cada vez que public-editor.js pone style.display='block' — una
	   animación (a diferencia de una transition) sí se relanza al pasar de
	   display:none a visible, sin necesitar ningún cambio de JS. La salida
	   no se anima: display:none corta el render al instante, y animarla
	   requeriría que el JS retrasara ese cambio — fuera del alcance de
	   este sprint (cero cambios en public-editor.js). */
	animation: printlab-panel-in .18s ease;
}

@keyframes printlab-panel-in {
	from {
		opacity: 0;
		transform: translateY(6px) scale(.98);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.printlab-app-panel-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.printlab-app-panel-title {
	font-size: 14px;
	font-weight: 700;
}

.printlab-app-panel-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: none;
	border-radius: var(--pla-radius-sm);
	background: none;
	color: var(--pla-text-muted);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.printlab-app-panel-close:hover {
	background: var(--pla-bg-sunken);
	color: var(--pla-text);
}

.printlab-app-field-label {
	display: block;
	margin-top: 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--pla-text-muted);
}

.printlab-app-textarea,
.printlab-app-select {
	width: 100%;
	margin-top: 4px;
	padding: 8px;
	border: 1px solid var(--pla-border);
	border-radius: var(--pla-radius-sm);
	font-family: inherit;
	font-size: 13px;
	color: var(--pla-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.printlab-app-textarea:focus,
.printlab-app-select:focus {
	outline: none;
	border-color: var(--pla-accent);
	box-shadow: 0 0 0 3px var(--pla-accent-soft);
}

.printlab-app-color-input {
	width: 100%;
	height: 34px;
	margin-top: 4px;
	padding: 2px;
	border: 1px solid var(--pla-border);
	border-radius: var(--pla-radius-sm);
}

/* ============ Lista de fuentes con vista previa (Sprint 5) ============ */

.printlab-app-font-list {
	margin-top: 4px;
	max-height: 220px;
	overflow-y: auto;
	border: 1px solid var(--pla-border);
	border-radius: var(--pla-radius-sm);
	background: var(--pla-bg);
}

.printlab-app-font-row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 8px 12px;
	border: none;
	border-bottom: 1px solid var(--pla-border);
	background: var(--pla-bg);
	color: var(--pla-text);
	text-align: left;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.printlab-app-font-row:last-child {
	border-bottom: none;
}

.printlab-app-font-row:hover {
	background: var(--pla-accent-soft);
}

.printlab-app-font-row--active {
	background: var(--pla-accent-soft);
	color: var(--pla-accent);
	box-shadow: inset 3px 0 0 var(--pla-accent), var(--pla-shadow-sm);
}

.printlab-app-font-preview {
	font-size: 20px;
	line-height: 1;
	min-width: 34px;
	flex-shrink: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.printlab-app-font-name {
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.printlab-app-row {
	display: flex;
	gap: 6px;
	margin-top: 10px;
}

.printlab-app-btn {
	flex: 1;
	border: 1px solid var(--pla-border);
	background: var(--pla-bg);
	color: var(--pla-text);
	border-radius: var(--pla-radius-sm);
	padding: 8px 10px;
	font-size: 12px;
	font-weight: 600;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.printlab-app-btn:hover {
	background: var(--pla-accent-soft);
	border-color: var(--pla-accent);
	color: var(--pla-accent);
}

.printlab-align-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.printlab-app-stepper {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
}

.printlab-app-stepper-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--pla-border);
	background: var(--pla-bg);
	color: var(--pla-text);
	border-radius: var(--pla-radius-sm);
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.printlab-app-stepper-btn:hover {
	background: var(--pla-accent-soft);
	border-color: var(--pla-accent);
	color: var(--pla-accent);
}

.printlab-app-stepper-value {
	min-width: 32px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
}

.printlab-app-dropzone {
	border: 2px dashed var(--pla-border);
	border-radius: var(--pla-radius);
	padding: 28px 14px;
	text-align: center;
	background: var(--pla-bg-sunken);
	transition: border-color .15s ease, background .15s ease;
}

.printlab-app-dropzone-title {
	margin: 0 0 12px;
	font-weight: 600;
	font-size: 13px;
}

.printlab-app-dropzone-sep {
	margin: 0 0 12px;
	color: var(--pla-text-muted);
	font-size: 12px;
}

.printlab-app-dropzone-hint {
	margin-top: 12px;
	font-size: 11px;
	color: var(--pla-text-muted);
}

.printlab-app-error {
	display: none;
	color: var(--pla-danger);
	font-size: 12px;
	margin-top: 8px;
}

/* ============ Galería de imágenes recientes (Sprint 6) ============ */

.printlab-app-recent-images {
	display: none;
	margin-top: 16px;
}

.printlab-app-recent-images-title {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--pla-text-muted);
}

.printlab-app-recent-images-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

.printlab-app-recent-thumb {
	position: relative;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--pla-border);
	border-radius: var(--pla-radius-sm);
	overflow: hidden;
	background: var(--pla-bg-sunken);
	cursor: pointer;
	box-shadow: var(--pla-shadow-sm);
	transition: box-shadow .15s ease, transform .15s ease;
}

.printlab-app-recent-thumb:hover {
	box-shadow: var(--pla-shadow-md);
	transform: translateY(-1px);
}

.printlab-app-recent-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.printlab-app-recent-thumb-remove {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(29, 35, 39, .55);
	color: #fff;
	cursor: pointer;
	transition: background .15s ease;
}

.printlab-app-recent-thumb-remove:hover {
	background: var(--pla-danger);
}

.printlab-app-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Acoplamiento crítico: .printlab-color-swatch debe seguir siendo
   descendiente de #printlab-public-color-swatches (bindVariationSelectors
   en public-editor.js hace querySelectorAll sobre ese contenedor). */
.printlab-color-swatch {
	display: inline-block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid var(--pla-border);
	cursor: pointer;
	box-shadow: var(--pla-shadow-sm);
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.printlab-color-swatch:hover {
	transform: scale(1.08);
	box-shadow: var(--pla-shadow-md);
}

.printlab-app-swatch-selected {
	margin-top: 10px;
	font-size: 12px;
	color: var(--pla-text-muted);
}

/* ============ Móvil: rail + bottombar fundidos en franja inferior ============ */

@media (max-width: 768px) {

	#printlab-app-root {
		/* Alturas nominales de la franja fija inferior (rail + bottombar),
		   sin la zona de gestos del sistema — se usan como base para
		   calcular, en un único sitio, cuánto espacio deben reservar
		   .printlab-app-stage y .printlab-app-panel. env(safe-area-inset-bottom)
		   se suma aparte en cada calc() porque solo el rail (el elemento
		   que de verdad toca bottom:0) necesita crecer para absorberla. */
		--pla-mobile-rail-h: 72px;
		--pla-mobile-bottombar-h: 0px;
		/* Alto de la barra contextual de edición de texto (7 iconos en 2
		   filas, con etiqueta) — sustituye a .printlab-app-rail solo
		   mientras hay un texto seleccionado (#printlab-app-root.printlab-app-text-selected).
		   Necesita más alto que el rail normal (1 fila, sin etiqueta), así
		   que .printlab-app-stage/.printlab-app-panel/.printlab-app-bottombar
		   cambian su reserva de espacio inferior en ese estado — ver las
		   reglas "printlab-app-text-selected" más abajo. */
		--pla-mobile-context-h: 96px;
		grid-template-areas:
			"topbar"
			"stage";
		grid-template-columns: 1fr;
		grid-template-rows: 56px 1fr;
	}

	.printlab-app-stage {
		padding-bottom: calc(var(--pla-mobile-rail-h) + var(--pla-mobile-bottombar-h) + env(safe-area-inset-bottom, 0px));
	}

	.printlab-app-rail {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		/* La caja crece con la safe area, pero la fila de iconos conserva
		   su alto original: el extra va como padding-bottom, no como
		   espacio libre encogido dentro de los 72px de siempre. */
		height: calc(var(--pla-mobile-rail-h) + env(safe-area-inset-bottom, 0px));
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		gap: 6px;
		padding: 8px 10px;
		padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
		border-right: none;
		border-top: 1px solid var(--pla-border);
		overflow-x: auto;
		overflow-y: hidden;
		z-index: 2;
	}

	.printlab-app-rail-btn {
		flex: 1 1 0;
		min-width: 0;
		padding: 8px 2px;
		flex-direction: column;
		gap: 5px;
	}

	.printlab-app-rail-icon .printlab-app-icon {
		width: 20px;
		height: 20px;
	}

	.printlab-app-rail-label {
		display: block;
		font-size: 9px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	/* CTA movido dentro del rail (antes vivía en el <footer>, ya eliminado
	   del HTML) — margin-left:auto lo empuja al extremo derecho de la fila
	   con flex-direction:row de arriba, independientemente de que el resto
	   de botones use justify-content:space-around entre ellos. */
	.printlab-app-rail .printlab-app-cta {
		flex: 0 0 auto;
		margin-left: auto;
	}

	/* ============ Barra contextual de edición de texto (móvil) ============
	   Patrón La Tostadora: al seleccionar un texto, sustituye por completo
	   al rail normal (mismo hueco fijo inferior) por 7 accesos directos a
	   las secciones que YA existen dentro de #printlab-public-text-panel —
	   nada de HTML/lógica duplicados, solo se cambia qué sección de ese
	   panel es visible. Oculta por defecto; solo aparece cuando
	   #printlab-app-root lleva la clase printlab-app-text-selected
	   (bindTextPanel() en public-editor.js la añade/quita en los mismos
	   eventos selection:created/updated/cleared que ya usaba refreshPanel(),
	   sin tocar esa función). */
	.printlab-app-text-context-bar {
		display: none;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: calc(var(--pla-mobile-context-h) + env(safe-area-inset-bottom, 0px));
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: 1fr;
		gap: 2px 4px;
		padding: 6px 8px;
		padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
		background: var(--pla-bg);
		border-top: 1px solid var(--pla-border);
		overflow: hidden;
		z-index: 2;
	}

	#printlab-app-root.printlab-app-text-selected .printlab-app-rail {
		display: none;
	}

	#printlab-app-root.printlab-app-text-selected .printlab-app-text-context-bar {
		display: grid;
	}

	#printlab-app-root.printlab-app-text-selected .printlab-app-stage {
		padding-bottom: calc(var(--pla-mobile-context-h) + var(--pla-mobile-bottombar-h) + env(safe-area-inset-bottom, 0px));
	}

	#printlab-app-root.printlab-app-text-selected .printlab-app-panel {
		bottom: calc(var(--pla-mobile-context-h) + var(--pla-mobile-bottombar-h) + env(safe-area-inset-bottom, 0px));
	}

	.printlab-app-context-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		border: none;
		background: transparent;
		border-radius: var(--pla-radius-sm);
		color: var(--pla-text);
		font-size: 9px;
		font-weight: 600;
		line-height: 1.1;
	}

	/* Sin esto, un toque sobre el propio SVG puede quedar registrado en
	   el SVG como target en vez de burbujear de forma fiable hasta el
	   <button>, según el navegador/motor táctil — deja pasar el toque
	   directo al botón padre en los 7 iconos por igual, ninguno lo tenía. */
	.printlab-app-context-btn .printlab-app-icon {
		pointer-events: none;
	}

	.printlab-app-context-btn:active,
	.printlab-app-context-btn--active {
		background: var(--pla-accent-soft);
		color: var(--pla-accent);
	}

	/* Secciones del panel de texto: en desktop se ven todas a la vez (sin
	   ninguna regla aquí que las afecte). En móvil, solo la que coincide
	   con el icono tocado en la barra contextual — controlado por JS
	   añadiendo/quitando printlab-app-text-section--active, mismo patrón
	   que ya usan .printlab-app-font-row--active o .printlab-app-view-btn--active. */
	.printlab-app-text-section {
		display: none;
	}

	.printlab-app-text-section--active {
		display: block;
	}

	.printlab-app-cta {
		padding: 10px 16px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
	}

	.printlab-public-btn-label-full {
		display: none;
	}

	#printlab-public-finalize .printlab-public-btn-label-short {
		display: inline-flex;
	}

	.printlab-app-panel {
		top: auto;
		left: 0;
		right: 0;
		bottom: calc(var(--pla-mobile-rail-h) + var(--pla-mobile-bottombar-h) + env(safe-area-inset-bottom, 0px));
		width: 100%;
		max-height: 55vh;
		border-radius: var(--pla-radius) var(--pla-radius) 0 0;
	}

	/* iOS Safari hace zoom automático al enfocar cualquier campo de texto
	   con font-size < 16px. En desktop se mantienen los 13px originales
	   (aquí no aplica ese comportamiento); esta regla solo actúa ≤768px. */
	.printlab-app-textarea,
	.printlab-app-select {
		font-size: 16px;
	}

	.printlab-app-topbar-logo {
		display: none;
	}

	.printlab-app-topbar-cart {
		display: none;
	}

	.printlab-app-topbar-cart-wrap {
		display: none;
	}

	.printlab-app-view-gallery-btn-mobile {
		display: flex;
		align-items: center;
		gap: 5px;
		flex-shrink: 0;
		border: 1px solid var(--pla-border);
		background: var(--pla-bg);
		color: var(--pla-text);
		font-size: 12px;
		font-weight: 600;
		padding: 6px 12px;
		border-radius: var(--pla-radius);
		margin-left: 8px;
	}

	.printlab-app-view-gallery-btn-mobile .printlab-app-icon {
		width: 16px;
		height: 16px;
	}

	.printlab-app-status-toast {
		top: 68px;
	}

}

/* ============================================================
   Selector de vistas como miniaturas laterales — SOLO DESKTOP
   ============================================================
   Bloque nuevo y separado del @media (max-width:768px) de arriba — no
   se toca ni una línea de ese bloque. Umbral complementario (≥769px)
   para que nunca coincidan los dos a la vez. En móvil, #printlab-public-view-selector
   (pestañas de texto) sigue exactamente igual que siempre: esta media
   query nunca llega a aplicarse ahí. */
@media (min-width: 769px) {

	/* Las pestañas de vista (#printlab-public-view-selector) siguen
	   renderizándose vía JS igual que en móvil — sustituidas aquí por
	   #printlab-public-view-thumbs, así que se ocultan solo a ellas, no
	   toda la topbar, que ahora sí se usa (logo + carrito). */
	#printlab-public-view-selector {
		display: none;
	}

	/* Desktop ya tiene su propio botón "Ver" (miniaturas laterales,
	   .printlab-app-view-thumbs-toggle) — el móvil (display:flex dentro
	   de @media (max-width:768px)) no debe verse aquí. */
	.printlab-app-view-gallery-btn-mobile {
		display: none;
	}

	.printlab-app-topbar {
		display: flex;
		justify-content: space-between;
	}

	.printlab-app-topbar-logo {
		height: 84px;
		width: auto;
	}

	.printlab-app-topbar-cart-wrap {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.printlab-app-topbar-name {
		font-size: 15px;
		font-weight: 500;
		color: var(--pla-text-muted);
		white-space: nowrap;
	}

	.printlab-app-topbar-price {
		font-size: 15px;
		font-weight: 600;
		color: var(--pla-text);
		white-space: nowrap;
	}

	.printlab-app-topbar-cart {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border: none;
		border-radius: var(--pla-radius-sm);
		background: transparent;
		color: var(--pla-text);
		cursor: pointer;
		transition: background .15s ease, color .15s ease;
	}

	.printlab-app-topbar-cart:hover {
		background: var(--pla-bg-sunken);
		color: var(--pla-accent);
	}

	/* El CTA grande de abajo lo sustituye el icono de carrito de la
	   topbar en desktop — this.finalize() sigue siendo el mismo, solo
	   cambia el disparador visual (ver bindUI() en public-editor.js). */
	#printlab-public-finalize {
		display: none;
	}

	#printlab-app-root {
		grid-template-areas:
			"topbar topbar topbar"
			"rail   stage   views";
		grid-template-columns: 240px 1fr 108px;
		grid-template-rows: 96px 1fr;
	}

	#printlab-app-root.printlab-app-rail-collapsed {
		grid-template-columns: 84px 1fr 108px;
	}

	#printlab-app-root.printlab-app-rail-collapsed .printlab-app-rail-btn {
		flex-direction: column;
		gap: 5px;
		padding: 10px 4px;
	}

	#printlab-app-root.printlab-app-rail-collapsed .printlab-app-rail-label {
		font-size: 10px;
	}

	#printlab-app-root.printlab-app-rail-collapsed .printlab-app-rail-icon .printlab-app-icon {
		width: 18px;
		height: 18px;
	}

	.printlab-app-view-thumbs {
		grid-area: views;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		padding: 16px 8px;
		background: var(--pla-bg);
		border-left: 1px solid var(--pla-border);
		overflow-y: auto;
	}

	.printlab-app-view-thumbs-toggle {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		width: 100%;
		border: 1px solid var(--pla-border);
		border-radius: var(--pla-radius-sm);
		background: var(--pla-bg-sunken);
		padding: 8px 4px;
		color: var(--pla-text);
		font-size: 10px;
		font-weight: 600;
		cursor: pointer;
		transition: border-color .15s ease, color .15s ease;
	}

	.printlab-app-view-thumbs-toggle:hover {
		border-color: var(--pla-accent);
		color: var(--pla-accent);
	}

	.printlab-app-view-thumbs-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		width: 100%;
	}

	.printlab-app-view-thumb {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		width: 100%;
		border: 2px solid transparent;
		border-radius: var(--pla-radius-sm);
		background: transparent;
		padding: 4px;
		color: var(--pla-text-muted);
		transition: border-color .15s ease, color .15s ease;
	}

	.printlab-app-view-thumb:hover {
		border-color: var(--pla-accent-soft);
	}

	.printlab-app-view-thumb.printlab-app-view-btn--active {
		border-color: var(--pla-accent);
		color: var(--pla-accent);
	}

	.printlab-app-view-thumb-img {
		width: 100%;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		border-radius: var(--pla-radius-sm);
		box-shadow: var(--pla-shadow-sm);
		background: var(--pla-bg-sunken);
	}

	.printlab-app-view-thumb-label {
		font-size: 10px;
		font-weight: 600;
		text-transform: capitalize;
		line-height: 1.2;
	}

	/* Galería "Ver" — modal con diseño real superpuesto por vista.
	   :not([hidden]) en vez de un simple selector de clase para que el
	   atributo hidden del HTML siga siendo la única fuente de verdad de
	   si el modal está abierto o cerrado. */
	.printlab-app-view-gallery-modal:not([hidden]) {
		display: flex;
		position: fixed;
		inset: 0;
		z-index: 1000001;
		align-items: center;
		justify-content: center;
	}

	.printlab-app-view-gallery-backdrop {
		position: absolute;
		inset: 0;
		background: rgba(17, 24, 39, .6);
	}

	.printlab-app-view-gallery-panel {
		position: relative;
		display: flex;
		flex-direction: column;
		width: min(900px, 92vw);
		max-height: 88vh;
		background: var(--pla-bg);
		border-radius: var(--pla-radius);
		box-shadow: var(--pla-shadow-lg);
		overflow: hidden;
	}

	.printlab-app-view-gallery-close {
		position: absolute;
		top: 12px;
		right: 12px;
		width: 36px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		border-radius: var(--pla-radius-sm);
		background: var(--pla-bg-sunken);
		color: var(--pla-text-muted);
		cursor: pointer;
		z-index: 1;
	}

	.printlab-app-view-gallery-close:hover {
		background: var(--pla-bg);
		color: var(--pla-text);
	}

	.printlab-app-view-gallery-body {
		display: flex;
		flex-direction: row;
		min-height: 0;
	}

	.printlab-app-view-gallery-thumbs {
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: 120px;
		flex-shrink: 0;
		padding: 20px 12px;
		overflow-x: visible;
		overflow-y: auto;
		background: var(--pla-bg-sunken);
		border-top: none;
		border-right: 1px solid var(--pla-border);
	}

	.printlab-app-view-gallery-thumb {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		border: 2px solid transparent;
		border-radius: var(--pla-radius-sm);
		background: var(--pla-bg);
		padding: 4px;
		cursor: pointer;
		color: var(--pla-text-muted);
		font-size: 10px;
		font-weight: 600;
		text-transform: capitalize;
	}

	.printlab-app-view-gallery-thumb img {
		width: 100%;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		border-radius: var(--pla-radius-sm);
	}

	.printlab-app-view-gallery-thumb.printlab-app-view-btn--active {
		border-color: var(--pla-accent);
		color: var(--pla-accent);
	}

	.printlab-app-view-gallery-main {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 24px;
		min-width: 0;
	}

	.printlab-app-view-gallery-image {
		max-width: 100%;
		max-height: 76vh;
		object-fit: contain;
	}

}

/* ============ Precio dentro del CTA (rail) ============ */

.printlab-app-cta-price {
	font-weight: 400;
	opacity: .9;
}

/* ============ Toast de estado (setStatus()) ============
   Sustituye al antiguo #printlab-public-status dentro de .printlab-app-bottombar
   (eliminado del HTML). Vive como hijo directo de #printlab-app-root,
   position:fixed, para no depender de ningún contenedor con su propia
   caja/scroll. Oculto por defecto; setStatus() añade/quita is-visible
   según haya o no texto — nunca toca display directamente. */
.printlab-app-status-toast {
	position: fixed;
	top: 108px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000002;
	max-width: 90vw;
	padding: 8px 16px;
	background: rgba(17, 24, 39, .82);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	text-align: center;
	border-radius: var(--pla-radius-sm);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}

.printlab-app-status-toast.is-visible {
	opacity: 1;
}

/* ============ Modal "Cambiar producto" ============
   Mismo patrón visual que .printlab-app-view-gallery-modal (backdrop +
   panel + botón cerrar), con el mismo concepto de layout que su
   versión desktop (sidebar a la izquierda + área principal a la
   derecha) — pero aquí fijo en cualquier ancho, sin @media: la
   sidebar son solo botones de categoría (texto corto, "Hombre"/
   "Tazas"), no miniaturas de imagen, así que cabe de sobra incluso en
   móvil sin necesitar apilarse encima del grid. */
.printlab-app-product-switch-modal {
	display: none;
}

.printlab-app-product-switch-modal:not([hidden]) {
	display: flex;
	position: fixed;
	inset: 0;
	z-index: 1000001;
	align-items: center;
	justify-content: center;
}

.printlab-app-product-switch-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 24, 39, .6);
}

.printlab-app-product-switch-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(900px, 92vw);
	max-height: 88vh;
	background: var(--pla-bg);
	border-radius: var(--pla-radius);
	box-shadow: var(--pla-shadow-lg);
	overflow: hidden;
	padding: 20px;
}

.printlab-app-product-switch-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: var(--pla-radius-sm);
	background: var(--pla-bg-sunken);
	color: var(--pla-text-muted);
	cursor: pointer;
	z-index: 1;
}

.printlab-app-product-switch-close:hover {
	background: var(--pla-bg);
	color: var(--pla-text);
}

.printlab-app-product-switch-title {
	display: block;
	font-size: 16px;
	margin-bottom: 14px;
}

.printlab-app-product-switch-body {
	display: flex;
	flex-direction: row;
	gap: 18px;
	min-height: 0;
	overflow: hidden;
}

.printlab-app-product-switch-categories {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 128px;
	flex-shrink: 0;
	overflow-y: auto;
	padding-right: 14px;
	border-right: 1px solid var(--pla-border);
}

.printlab-app-product-switch-category {
	display: block;
	width: 100%;
	text-align: left;
	border: 1px solid transparent;
	border-radius: var(--pla-radius-sm);
	background: transparent;
	color: var(--pla-text-muted);
	padding: 9px 12px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.printlab-app-product-switch-category:hover {
	background: var(--pla-bg-sunken);
	color: var(--pla-text);
}

.printlab-app-product-switch-category.is-active {
	border-color: var(--pla-accent);
	color: var(--pla-accent);
	background: var(--pla-bg-sunken);
}

.printlab-app-product-switch-main {
	flex: 1;
	min-width: 0;
	min-height: 0;
	overflow-y: auto;
}

.printlab-app-product-switch-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 12px;
}

.printlab-app-product-switch-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--pla-border);
	border-radius: var(--pla-radius-sm);
	background: var(--pla-bg);
	padding: 10px;
	cursor: pointer;
	text-align: center;
	transition: border-color .15s ease;
}

.printlab-app-product-switch-card:hover {
	border-color: var(--pla-accent);
}

.printlab-app-product-switch-card-img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--pla-radius-sm);
	background: var(--pla-bg-sunken);
}

.printlab-app-product-switch-card-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--pla-text);
}

.printlab-app-product-switch-card-price {
	font-size: 13px;
	font-weight: 700;
	color: var(--pla-accent);
}

/* ============ Modal "Elegir talla y cantidad" ============
   Mismo patrón visual que .printlab-app-view-gallery-modal (backdrop +
   panel + botón cerrar), pero con reglas propias para funcionar tanto en
   móvil como en desktop — a diferencia de esa galería, que es
   desktop-only, este NO va dentro de @media (min-width:769px). */
.printlab-app-size-qty-modal {
	display: none;
}

.printlab-app-size-qty-modal:not([hidden]) {
	display: flex;
	position: fixed;
	inset: 0;
	z-index: 1000001;
	align-items: center;
	justify-content: center;
}

.printlab-app-size-qty-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 24, 39, .6);
}

.printlab-app-size-qty-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(420px, 92vw);
	max-height: 88vh;
	overflow-y: auto;
	background: var(--pla-bg);
	border-radius: var(--pla-radius);
	box-shadow: var(--pla-shadow-lg);
	padding: 24px;
}

.printlab-app-size-qty-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: var(--pla-radius-sm);
	background: var(--pla-bg-sunken);
	color: var(--pla-text-muted);
	cursor: pointer;
	z-index: 1;
}

.printlab-app-size-qty-close:hover {
	background: var(--pla-bg);
	color: var(--pla-text);
}

.printlab-app-size-qty-title {
	font-size: 16px;
	font-weight: 700;
	margin: 0 30px 16px 0;
}

.printlab-app-size-qty-rows {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.printlab-app-size-qty-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--pla-border);
}

.printlab-app-size-qty-name {
	font-size: 14px;
	font-weight: 600;
}

.printlab-app-size-qty-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--pla-border);
	font-size: 15px;
	font-weight: 700;
}

.printlab-app-size-qty-submit {
	width: 100%;
	margin-top: 16px;
}