.iss-studio,
.iss-studio * {
	box-sizing: border-box;
}

.iss-studio {
	--iss-cream: #f7efe3;
	--iss-card: #ffffff;
	--iss-ink: #1b1d23;
	--iss-muted: #77787f;
	--iss-border: #d8dce5;
	--iss-footer: #15161d;
	--iss-shadow: 0 24px 50px rgba(49, 33, 14, 0.12);
	--iss-radius-xl: 28px;
	--iss-radius-lg: 22px;
	--iss-radius-pill: 999px;
	--iss-stage-min-height: 920px;
	padding: 18px;
	border-radius: 34px;
	background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.65), transparent 28%), var(--iss-cream);
	font-family: "DM Sans", "Segoe UI", sans-serif;
	color: var(--iss-ink);
}

.iss-selector-shell {
	max-width: 560px;
	margin: 0 auto;
}

.iss-selector-stage {
	position: relative;
	min-height: 1100px;
	isolation: isolate;
	overflow: hidden;
}

.iss-selector-card {
	position: absolute;
	inset: 0;
	z-index: 3;
	padding: 26px;
	border-radius: 30px;
	background: linear-gradient(180deg, #fffdf9 0%, #ffffff 100%);
	box-shadow: var(--iss-shadow);
	flex-direction: column;
	justify-content: center;
	opacity: 1;
	transform: translateY(0) scale(1);
	transition: opacity 0.24s ease, transform 0.24s ease;
	will-change: opacity, transform;
}

.iss-selector-card.is-leaving,
.iss-selector-card.is-hidden {
	opacity: 0;
	transform: translateY(10px) scale(0.985);
	pointer-events: none;
}

.iss-selector-header {
	margin-bottom: 18px;
}

.iss-selector-title {
	margin: 0 0 8px;
	font-size: 2rem;
	line-height: 1.05;
	font-weight: 800;
}

.iss-selector-copy {
	margin: 0;
	color: var(--iss-muted);
	font-size: 1rem;
}

.iss-product-nav {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0;
}

.iss-product-link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px;
	border: 0;
	border-radius: 22px;
	background: #ffffff;
	box-shadow: var(--iss-shadow);
	color: var(--iss-ink);
	text-decoration: none;
	text-align: left;
	cursor: pointer;
	font: inherit;
}

.iss-product-link-title {
	font-size: 1rem;
	font-weight: 800;
}

.iss-product-link-arrow {
	color: var(--iss-muted);
	font-size: 0.92rem;
}

.iss-product-section {
	margin-bottom: 0;
}

.iss-selector-panels {
	position: absolute;
	inset: 0;
	z-index: 2;
	min-height: var(--iss-stage-min-height);
}

.iss-selector-panel[hidden] {
	display: none !important;
}

.iss-selector-panel {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	transform: translateY(16px) scale(0.985);
	transition: opacity 0.28s ease, transform 0.28s ease;
	pointer-events: none;
	will-change: opacity, transform;
}

.iss-selector-panel.is-active {
	z-index: 4;
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.iss-selector-panel.is-leaving {
	z-index: 3;
	opacity: 0;
	transform: translateY(12px) scale(0.99);
	pointer-events: none;
}

.iss-flip-scene {
	max-width: 560px;
	margin: 0 auto;
	perspective: 1600px;
	-webkit-perspective: 1600px;
}

.iss-card {
	position: relative;
	max-width: 560px;
	margin: 0 auto;
	min-height: var(--iss-stage-min-height);
	border-radius: var(--iss-radius-xl);
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transition: transform 0.75s cubic-bezier(0.22, 0.8, 0.24, 1);
}

.iss-card.is-flipped {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}

.iss-card-face {
	position: absolute;
	inset: 0;
	padding: 22px;
	border-radius: var(--iss-radius-xl);
	background:transparent !important;
	backface-visibility: hidden;
    box-shadow:none !important;
	-webkit-backface-visibility: hidden;
	overflow: unset;
}

.iss-card-back {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}

.iss-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.iss-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.iss-brand {
	display: flex;
	align-items: center;
	gap: 12px;
}

.iss-brand-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--iss-primary);
	color: #ffffff;
	font-size: 16px;
	line-height: 1;
}

.iss-title {
	margin: 0;
	font-size: 1.65rem;
	line-height: 1.1;
	font-weight: 700;
}

.iss-subtitle {
	margin: 4px 0 0;
	color: var(--iss-muted);
	font-size: 0.92rem;
}

.iss-preview-badge,
.iss-preview-badge.iss-live-preview-button {
	padding: 10px 14px;
	border: 0;
	border-radius: var(--iss-radius-pill);
	background: #f5deb0;
	color: #6f5600;
	font-size: 0.78rem;
	font-weight: 700;
	font-family: inherit;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1;
	cursor: pointer;
}

.iss-switch-product {
	padding: 10px 14px;
	border: 1px solid #dadce3;
	border-radius: var(--iss-radius-pill);
	background: #ffffff;
	color: var(--iss-ink);
	font: inherit;
	font-size: 0.86rem;
	font-weight: 800;
	cursor: pointer;
}

.iss-form {
	display: grid;
	gap: 22px;
}

.iss-upload-zone {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	padding: 20px;
	border: 2px dashed var(--iss-border);
	border-radius: 26px;
	background: #ffffff;
	cursor: pointer;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.iss-upload-zone.is-dragover {
	border-color: var(--iss-primary);
	transform: translateY(-1px);
	box-shadow: 0 18px 28px rgba(255, 143, 31, 0.12);
}

.iss-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.iss-upload-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 104px;
	height: 104px;
	border-radius: 30px;
	background: linear-gradient(180deg, #f7f7f7 0%, #f0f0f0 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 14px 28px rgba(19, 21, 28, 0.08);
	color: #686a71;
	overflow: hidden;
}

.iss-upload-icon svg {
	width: 36px;
	height: 36px;
}

.iss-upload-thumbnail {
	position: absolute;
	inset: 0;
	display: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.iss-upload-zone.has-thumbnail .iss-upload-thumbnail {
	display: block;
}

.iss-upload-zone.has-thumbnail .iss-upload-icon svg {
	display: none;
}

.iss-upload-copy h4 {
	margin: 0 0 6px;
	font-size: 1.6rem;
	line-height: 1.1;
	font-weight: 700;
}

.iss-upload-copy p {
	margin: 0 0 14px;
	color: var(--iss-muted);
	font-size: 1rem;
}

.iss-upload-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 8px;
	padding: 13px 24px;
	border-radius: var(--iss-radius-pill);
	background: #15161d;
	color: #ffffff;
	font-weight: 700;
}

.iss-upload-file-name {
	margin-top: 12px;
	font-size: 0.94rem;
	font-weight: 600;
	color: var(--iss-ink);
	word-break: break-word;
}

.iss-options-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
}

.iss-options-grid-two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.iss-option-label {
	margin-bottom: 12px;
	color: #72737a;
	font-size: 0.88rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.iss-pill-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.iss-pill {
	padding: 11px 16px;
	border: 1px solid #dadce3;
	border-radius: var(--iss-radius-pill);
	background: #ffffff;
	color: #6a6d75;
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: all 0.18s ease;
}

.iss-pill.is-active {
	border-color: var(--iss-primary);
	background: var(--iss-primary);
	color: #ffffff;
	box-shadow: 0 10px 20px rgba(255, 143, 31, 0.24);
}

.iss-custom-size-fields {
	margin-top: 14px;
	padding: 14px;
	border: 1px solid #e4e7ee;
	border-radius: 18px;
	background: #faf7f2;
}

.iss-custom-size-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.iss-custom-size-grid label {
	display: grid;
	gap: 8px;
	font-size: 0.92rem;
	font-weight: 700;
	color: #555963;
}

.iss-custom-size-grid input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #d4d9e3;
	border-radius: 14px;
	font: inherit;
}

.iss-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 26px 22px;
	border-radius: 28px;
	background: var(--iss-footer);
	color: #ffffff;
}

.iss-estimate-label {
	margin-bottom: 4px;
	color: rgba(255, 255, 255, 0.64);
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.iss-estimate-price {
	font-size: 2rem;
	line-height: 1;
	font-weight: 800;
}

.iss-estimate-note {
	margin-top: 8px;
	color: #d8d678;
	font-size: 0.94rem;
}

.iss-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

.iss-message {
	min-height: 1.2em;
	font-size: 0.92rem;
	text-align: right;
	color: rgba(255, 255, 255, 0.72);
}

.iss-message.is-error {
	color: #ffc0b5;
}

.iss-message.is-success {
	color: #b8ffd1;
}

.iss-submit {
	padding: 17px 26px;
	border: 0;
	border-radius: var(--iss-radius-pill);
	background: linear-gradient(180deg, #ff9b2f 0%, var(--iss-primary) 100%);
	color: #ffffff;
	font-size: 1.08rem;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 18px 34px rgba(255, 143, 31, 0.34);
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.iss-submit:hover,
.iss-submit:focus {
	transform: translateY(-1px);
}

.iss-submit:disabled {
	opacity: 0.7;
	cursor: wait;
}

.iss-preview-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.iss-preview-note {
	margin: 6px 0 0;
	color: var(--iss-muted);
	font-size: 0.92rem;
}

.iss-preview-back {
	padding: 10px 16px;
	border: 1px solid #dadce3;
	border-radius: var(--iss-radius-pill);
	background: #ffffff;
	color: var(--iss-ink);
	font: inherit;
	font-weight: 800;
	cursor: pointer;
}

.iss-preview-workspace {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 18px;
	min-height: 0;
}

.iss-preview-stage {
	position: relative;
	flex: 1;
	min-height: 430px;
	border: 1px solid #d8dce5;
	border-radius: 32px;
	background:
		linear-gradient(45deg, #f0f2f6 25%, transparent 25%),
		linear-gradient(-45deg, #f0f2f6 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #f0f2f6 75%),
		linear-gradient(-45deg, transparent 75%, #f0f2f6 75%),
		#ffffff;
	background-position: 0 0, 0 12px, 12px -12px, -12px 0;
	background-size: 24px 24px;
	overflow: hidden;
	cursor: grab;
	touch-action: none;
}

.iss-preview-crop-frame {
	position: absolute;
	top: 50%;
	left: 50%;
	/* Fallback box before JS sizes this to the selected shape/size's
	   real aspect ratio (see updateCropFrame() in frontend.js). */
	width: calc(100% - 72px);
	height: calc(100% - 72px);
	transform: translate(-50%, -50%);
	border: 2px dashed rgba(27, 29, 35, 0.35);
	border-radius: 28px;
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 0 0 999px rgba(255, 255, 255, 0.36);
	pointer-events: none;
	z-index: 2;
}

.iss-preview-stage[data-shape="circle"] .iss-preview-crop-frame {
	border-radius: 999px;
}

.iss-preview-shape-label {
	position: absolute;
	top: 18px;
	left: 18px;
	z-index: 3;
	padding: 8px 12px;
	border-radius: 999px;
	background: rgba(21, 22, 29, 0.9);
	color: #ffffff;
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	pointer-events: none;
}

.iss-preview-stage.is-dragging {
	cursor: grabbing;
}

.iss-preview-image {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 76%;
	max-width: none;
	height: auto;
	transform: translate(-50%, -50%);
	transform-origin: center;
	user-select: none;
	pointer-events: none;
	z-index: 1;
}

.iss-preview-controls {
	display: grid;
	gap: 14px;
	padding: 18px;
	border-radius: 24px;
	background: #15161d;
	color: #ffffff;
}

.iss-preview-controls label {
	display: grid;
	gap: 10px;
	margin: 0;
	font-weight: 800;
}

.iss-preview-zoom {
	width: 100%;
	accent-color: var(--iss-primary);
}

.iss-preview-control-row {
	display: flex;
	gap: 10px;
}

.iss-preview-reset,
.iss-preview-apply {
	flex: 1;
	padding: 13px 16px;
	border: 0;
	border-radius: var(--iss-radius-pill);
	font: inherit;
	font-weight: 800;
	cursor: pointer;
}

.iss-preview-reset {
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
}

.iss-preview-apply {
	background: var(--iss-primary);
	color: #ffffff;
}

.iss-shortcode-error {
	padding: 12px 16px;
	border-left: 4px solid #d63638;
	background: #ffffff;
}

@media (max-width: 640px) {
	.iss-studio {
		--iss-stage-min-height: 980px;
	}

	.iss-card {
		min-height: var(--iss-stage-min-height);
	}

	.iss-card-face {
		padding: 18px;
	}

	.iss-header,
	.iss-footer {
		flex-direction: column;
		align-items: stretch;
	}

	.iss-selector-stage,
	.iss-selector-panels,
	.iss-card {
		min-height: auto;
	}


	.iss-selector-panels {
		position: relative;
		inset: auto;
	}

	.iss-selector-panel {
		position: relative;
		inset: auto;
	}

	.iss-header-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.iss-upload-zone,
	.iss-options-grid,
	.iss-custom-size-grid {
		grid-template-columns: 1fr;
	}

	.iss-upload-icon {
		width: 88px;
		height: 88px;
	}

	.iss-actions {
		align-items: stretch;
	}

	.iss-message {
		text-align: left;
	}

	.iss-submit {
		width: 100%;
	}

	.iss-upload-button {
		width: 100%;
		margin: 0 0 8px;
	}

	.iss-preview-stage {
		min-height: 360px;
	}

	.iss-preview-control-row {
		flex-direction: column;
	}
}