.tshirtd-app {
	--tshirtd-primary: #1a1a2e;
	--tshirtd-accent: #ff5a3c;
	--tshirtd-accent-dark: #e6431f;
	--tshirtd-bg: #f6f6fb;
	--tshirtd-border: #e6e6f0;
	--tshirtd-radius: 16px;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--tshirtd-primary);
	max-width: 1200px;
	margin: 0 auto;
	background: var(--tshirtd-bg);
	border-radius: var(--tshirtd-radius);
	padding: 26px;
	box-sizing: border-box;
}
.tshirtd-app * { box-sizing: border-box; font-family: inherit; }

.tshirtd-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-end;
	background: #fff;
	border: 1px solid var(--tshirtd-border);
	border-radius: var(--tshirtd-radius);
	padding: 18px 20px;
	margin-bottom: 20px;
	box-shadow: 0 2px 10px rgba(20, 20, 43, 0.04);
}
.tshirtd-field { display: flex; flex-direction: column; gap: 6px; }
.tshirtd-field label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; opacity: .55; }

.tshirtd-select, .tshirtd-input {
	border: 1px solid var(--tshirtd-border);
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 500;
	background: #fff;
	color: var(--tshirtd-primary);
	min-width: 180px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.tshirtd-select:focus, .tshirtd-input:focus { outline: none; border-color: var(--tshirtd-accent); box-shadow: 0 0 0 3px rgba(255, 90, 60, 0.15); }

.tshirtd-colors { display: flex; gap: 8px; flex-wrap: wrap; }
.tshirtd-color-swatch {
	width: 30px; height: 30px; border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px var(--tshirtd-border);
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease;
}
.tshirtd-color-swatch:hover { transform: scale(1.08); }
.tshirtd-color-swatch.is-active { box-shadow: 0 0 0 2px var(--tshirtd-accent); transform: scale(1.1); }

.tshirtd-sizes { display: flex; gap: 6px; flex-wrap: wrap; }
.tshirtd-size-btn {
	min-width: 40px; height: 34px; padding: 0 10px; border-radius: 9px;
	border: 1px solid var(--tshirtd-border); background: #fff; cursor: pointer;
	font-size: 12.5px; font-weight: 600; color: var(--tshirtd-primary);
	transition: all .12s ease;
}
.tshirtd-size-btn:hover { border-color: var(--tshirtd-accent); }
.tshirtd-size-btn.is-active { background: var(--tshirtd-primary); border-color: var(--tshirtd-primary); color: #fff; }
.tshirtd-size-btn .tshirtd-size-surcharge { display: block; font-size: 9.5px; font-weight: 500; opacity: .7; }

.tshirtd-side-toggle { display: inline-flex; flex-wrap: wrap; gap: 3px; background: var(--tshirtd-bg); border-radius: 10px; padding: 3px; max-width: 100%; }
.tshirtd-side-btn {
	border: none; background: transparent; padding: 9px 16px; cursor: pointer; border-radius: 8px;
	font-size: 13px; font-weight: 600; color: var(--tshirtd-primary); opacity: .55; transition: all .15s ease;
	white-space: nowrap;
}
.tshirtd-side-btn.is-active { background: #fff; color: var(--tshirtd-primary); opacity: 1; box-shadow: 0 2px 6px rgba(20,20,43,.08); }

.tshirtd-main { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 24px; }
@media (max-width: 860px) { .tshirtd-main { grid-template-columns: 1fr; } }

.tshirtd-canvas-wrap { background: #fff; border: 1px solid var(--tshirtd-border); border-radius: var(--tshirtd-radius); padding: 20px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 2px 10px rgba(20, 20, 43, 0.04); }
.tshirtd-canvas-stage { position: relative; width: 100%; max-width: 480px; aspect-ratio: 500 / 600; overflow: hidden; border-radius: 8px; }
.tshirtd-mockup, .tshirtd-mockup svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.tshirtd-mockup { pointer-events: none; }
.tshirtd-mockup img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tshirtd-canvas-stage canvas { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
/* Fabric.js postavlja svom wrapper divu (.canvas-container) fiksnu širinu/visinu u
   pikselima (npr. 500x600) umjesto postotka - na uskim mobilnim ekranima to uzrokuje
   da platno "iscuri" izvan vidljivog okvira udesno. Prisilno ga vežemo na stage. */
.tshirtd-canvas-stage .canvas-container {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
}
.tshirtd-print-guide {
	position: absolute; border: 2px dashed rgba(0,0,0,.18); border-radius: 6px; pointer-events: none;
}
.tshirtd-hint { font-size: 12px; opacity: .55; margin-top: 14px; text-align: center; }

.tshirtd-sidepanel { display: flex; flex-direction: column; gap: 16px; }
.tshirtd-panel-group { background: #fff; border: 1px solid var(--tshirtd-border); border-radius: var(--tshirtd-radius); padding: 18px 20px; box-shadow: 0 2px 10px rgba(20, 20, 43, 0.04); }
.tshirtd-panel-group h4 { margin: 0 0 14px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .55; }

.tshirtd-row { display: flex; gap: 10px; align-items: center; margin: 10px 0; }
.tshirtd-color-input { width: 42px; height: 38px; border: 1px solid var(--tshirtd-border); border-radius: 8px; padding: 2px; background: #fff; }
.tshirtd-range { flex: 1; }

.tshirtd-btn {
	width: 100%; border: none; border-radius: 11px; padding: 12px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
	transition: opacity .15s ease, transform .1s ease, box-shadow .15s ease;
}
.tshirtd-btn:active { transform: scale(.98); }
.tshirtd-btn-secondary { background: var(--tshirtd-primary); color: #fff; }
.tshirtd-btn-secondary:hover { opacity: .92; }
.tshirtd-btn-primary {
	background: linear-gradient(135deg, var(--tshirtd-accent), var(--tshirtd-accent-dark));
	color: #fff; font-size: 15px; font-weight: 700; padding: 15px 16px;
	box-shadow: 0 6px 16px rgba(255, 90, 60, 0.28);
}
.tshirtd-btn-primary:hover { box-shadow: 0 8px 20px rgba(255, 90, 60, 0.36); }
.tshirtd-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.tshirtd-upload-btn {
	display: block; text-align: center; border: 2px dashed var(--tshirtd-border); border-radius: 10px;
	padding: 16px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--tshirtd-primary);
	transition: border-color .15s ease, background .15s ease;
}
.tshirtd-upload-btn:hover { border-color: var(--tshirtd-accent); background: #fff7f5; }

.tshirtd-object-controls { justify-content: center; }
.tshirtd-icon-btn {
	width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--tshirtd-border); background: #fff;
	cursor: pointer; font-size: 15px;
}
.tshirtd-icon-btn:hover { background: var(--tshirtd-bg); }
.tshirtd-icon-btn-danger:hover { background: #fdeceb; border-color: #ff5a3c; color: #ff5a3c; }

.tshirtd-summary { text-align: center; }
.tshirtd-price { font-size: 26px; font-weight: 700; margin-bottom: 12px; }

.tshirtd-message { margin-top: 10px; font-size: 13px; padding: 10px; border-radius: 8px; }
.tshirtd-message.is-success { background: #e9f9ee; color: #1e7a3d; }
.tshirtd-message.is-error { background: #fdeceb; color: #b3271a; }