.sp-personalization[data-sp-personalization-provider="tag_label"] .sp-personalization__field[data-sp-personalization-field="palette"] {
	grid-column: 1 / -1;
}

.sp-personalization[data-sp-personalization-provider="tag_label"] .sp-personalization__field[data-sp-personalization-field="artwork_category"] {
	grid-column: 1 / -1;
	grid-template-columns: max-content minmax(0, 1fr);
	align-items: center;
	column-gap: .8rem;
}

.sp-personalization[data-sp-personalization-provider="tag_label"] .sp-personalization__field[data-sp-personalization-field="label"] {
	grid-column: span 8;
}

.sp-personalization[data-sp-personalization-provider="tag_label"] .sp-personalization__field--quantity {
	grid-column: span 4;
}

.sp-personalization[data-sp-personalization-provider="tag_label"] .sp-personalization__field[data-sp-personalization-field="label"] .sp-personalization__field-copy,
.sp-personalization[data-sp-personalization-provider="tag_label"] .sp-personalization__field--quantity .sp-personalization__field-copy {
	min-height: 2.55rem;
}

.sp-personalization[data-sp-personalization-provider="tag_label"] .sp-personalization__field[data-sp-personalization-field="shape"] .sp-personalization__picker {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.sp-personalization[data-sp-personalization-provider="tag_label"] .sp-personalization__field[data-sp-personalization-field="palette"] .sp-personalization__picker {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sp-personalization[data-sp-personalization-provider="tag_label"] .sp-personalization__field[data-sp-personalization-field="artwork"] .sp-personalization__picker {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	max-height: 172px;
	padding: 2px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
}

.sp-tag-label-shape-swatch {
	width: min(100%, 64px);
	height: 25px;
	background: linear-gradient(90deg, var(--sp-preview-panel, #d1c2ff) 0 28%, var(--sp-preview-base, #f5f0ff) 28% 100%);
	box-shadow: inset 0 0 0 1px rgb(48 32 93 / 20%);
}

.sp-tag-label-palette-swatch {
	width: min(100%, 52px);
	height: 25px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--sp-preview-panel) 0 30%, var(--sp-preview-base) 30% 78%, var(--sp-preview-ink) 78% 100%);
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%);
}

.sp-tag-label-shape-swatch[data-sp-shape="capsule"] {
	border-radius: 999px;
}

.sp-tag-label-shape-swatch[data-sp-shape="arrow"] {
	clip-path: polygon(0 8%, 76% 8%, 100% 50%, 76% 92%, 0 92%);
}

.sp-tag-label-shape-swatch[data-sp-shape="ticket"] {
	clip-path: polygon(3% 0, 97% 0, 97% 34%, 100% 50%, 97% 66%, 97% 100%, 3% 100%, 3% 66%, 0 50%, 3% 34%);
}

.sp-tag-label-shape-swatch[data-sp-shape="ribbon_tail"] {
	clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
}

.sp-tag-label-shape-swatch[data-sp-shape="beveled_plaque"] {
	clip-path: polygon(6% 0, 94% 0, 100% 24%, 100% 76%, 94% 100%, 6% 100%, 0 76%, 0 24%);
}

.sp-personalization[data-sp-personalization-provider="tag_label"] .sp-personalization__preview-canvas {
	aspect-ratio: var(--sp-preview-aspect, 4.5) / 1;
}

.sp-tag-label-preview {
	--sp-preview-aspect: 4.5;
	--sp-preview-text-scale: 1;
	--sp-preview-text-size: 5.63;
	--sp-preview-artwork-left: 11.111%;
	--sp-preview-artwork-width: 20%;
	--sp-preview-text-left: 21.852%;
	--sp-preview-text-right: 18%;
	position: relative;
	display: block;
	aspect-ratio: var(--sp-preview-aspect) / 1;
	min-width: 0;
	padding: 0;
	overflow: hidden;
	container-type: inline-size;
	background: linear-gradient(90deg, var(--sp-preview-panel) 0 25%, var(--sp-preview-base) 25% 100%);
	color: var(--sp-preview-ink);
}

.sp-tag-label-preview__template,
.sp-tag-label-preview__artwork {
	position: absolute;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	object-fit: contain;
}

.sp-tag-label-preview__template {
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
}

.sp-tag-label-preview[data-sp-has-template="true"] {
	overflow: visible;
	background: transparent;
	box-shadow: none;
}

.sp-tag-label-preview[data-sp-has-template="true"] .sp-tag-label-preview__template {
	filter: drop-shadow(0 6px 9px rgb(31 24 56 / 12%));
}

.sp-tag-label-preview__artwork {
	top: 50%;
	left: var(--sp-preview-artwork-left);
	z-index: 1;
	width: var(--sp-preview-artwork-width);
	height: auto;
	transform: translate(-50%, -50%);
}

.sp-tag-label-preview__text {
	position: absolute;
	top: 50%;
	left: var(--sp-preview-text-left);
	right: var(--sp-preview-text-right);
	z-index: 2;
	min-width: 0;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	color: var(--sp-preview-ink);
	font-family: "Hanken Grotesk", "Hind Siliguri", sans-serif;
	font-size: calc(var(--sp-preview-text-size) * 1cqi * var(--sp-preview-text-scale));
	font-weight: 700;
	font-style: normal;
	line-height: 1;
	letter-spacing: .02em;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sp-personalization-cart-preview .sp-tag-label-preview .sp-tag-label-preview__template {
	width: 100%;
	height: 100%;
}

.sp-personalization-cart-preview .sp-tag-label-preview .sp-tag-label-preview__artwork {
	width: var(--sp-preview-artwork-width);
	height: auto;
}

.sp-tag-label-preview[data-sp-shape="arrow"] {
	--sp-preview-artwork-left: 10.741%;
	--sp-preview-artwork-width: 20%;
	--sp-preview-text-left: 27.407%;
	--sp-preview-text-right: 9%;
}

.sp-tag-label-preview[data-sp-shape="ticket"] {
	--sp-preview-artwork-left: 14.667%;
	--sp-preview-artwork-width: 20%;
	--sp-preview-text-left: 31.111%;
	--sp-preview-text-right: 15%;
}

.sp-tag-label-preview[data-sp-shape="ticket"][data-sp-palette="sage_mint"] {
	--sp-preview-artwork-left: 15.185%;
	--sp-preview-text-left: 33.333%;
}

.sp-tag-label-preview[data-sp-shape="ribbon_tail"] {
	--sp-preview-artwork-left: 11.481%;
	--sp-preview-artwork-width: 20%;
	--sp-preview-text-left: 27.407%;
	--sp-preview-text-right: 15%;
}

.sp-tag-label-preview[data-sp-shape="beveled_plaque"] {
	--sp-preview-artwork-left: 12.222%;
	--sp-preview-artwork-width: 19.407%;
	--sp-preview-text-left: 28.889%;
	--sp-preview-text-right: 14%;
}

@supports not (font-size: 1cqi) {
	.sp-tag-label-preview__text {
		font-size: clamp(12px, calc(var(--sp-preview-text-size) * 1vw * var(--sp-preview-text-scale)), calc(32px * var(--sp-preview-text-size) / 5.63));
	}
}

@media (max-width: 640px) {
	.sp-personalization[data-sp-personalization-provider="tag_label"] .sp-personalization__field[data-sp-personalization-field="artwork_category"] {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-personalization[data-sp-personalization-provider="tag_label"] .sp-personalization__field--quantity {
		grid-column: span 2;
	}

	.sp-personalization[data-sp-personalization-provider="tag_label"] .sp-personalization__field[data-sp-personalization-field="label"] {
		grid-column: span 4;
	}

	.sp-personalization[data-sp-personalization-provider="tag_label"] .sp-personalization__field[data-sp-personalization-field="palette"] .sp-personalization__picker {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sp-personalization[data-sp-personalization-provider="tag_label"] .sp-personalization__field[data-sp-personalization-field="shape"] .sp-personalization__picker,
	.sp-personalization[data-sp-personalization-provider="tag_label"] .sp-personalization__field[data-sp-personalization-field="artwork"] .sp-personalization__picker {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sp-personalization[data-sp-personalization-provider="tag_label"] .sp-personalization__field[data-sp-personalization-field="artwork"] .sp-personalization__picker {
		max-height: 166px;
	}
}

@media (max-width: 420px) {
	.sp-personalization[data-sp-personalization-provider="tag_label"] .sp-personalization__field[data-sp-personalization-field="label"],
	.sp-personalization[data-sp-personalization-provider="tag_label"] .sp-personalization__field--quantity {
		grid-column: 1 / -1;
	}

	.sp-personalization[data-sp-personalization-provider="tag_label"] .sp-personalization__field[data-sp-personalization-field="shape"] .sp-personalization__picker,
	.sp-personalization[data-sp-personalization-provider="tag_label"] .sp-personalization__field[data-sp-personalization-field="artwork"] .sp-personalization__picker {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sp-personalization[data-sp-personalization-provider="tag_label"] .sp-personalization__field[data-sp-personalization-field="label"] .sp-personalization__field-copy,
	.sp-personalization[data-sp-personalization-provider="tag_label"] .sp-personalization__field--quantity .sp-personalization__field-copy {
		min-height: 0;
	}
}

.sp-personalization-cart-preview .sp-tag-label-preview__template,
.sp-personalization-cart-preview .sp-tag-label-preview__artwork {
	filter: none;
}