/**
 * Sticker Studio for WooCommerce — estilos del configurador.
 *
 * Todo va con ámbito .ss-customizer para no pisar el tema.
 * La vista previa replica el material elegido (holográfico, brillantina,
 * espejo, transparente) y la forma de corte en CSS puro.
 */

.ss-customizer {
	--ss-accent: #ffd84d;
	--ss-accent-ink: #1a1503;
	--ss-ink: #101418;
	--ss-ink-soft: #5b6470;
	--ss-paper: #ffffff;
	--ss-line: #e4e7ec;
	--ss-line-strong: #c9ced6;
	--ss-good: #0e9f5d;
	--ss-warn: #b45309;
	--ss-bad: #d92d20;
	--ss-radius: 14px;
	--ss-radius-sm: 9px;
	--ss-shadow: 0 1px 2px rgba(16, 20, 24, 0.06), 0 8px 24px rgba(16, 20, 24, 0.07);

	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 2.25rem;
	align-items: start;
	margin: 0 0 2.5rem;
	color: var(--ss-ink);
	font-size: 15px;
	line-height: 1.45;
}

.ss-customizer *,
.ss-customizer *::before,
.ss-customizer *::after {
	box-sizing: border-box;
}

.ss-noscript {
	grid-column: 1 / -1;
	padding: 1rem 1.25rem;
	background: #fff6d6;
	border: 1px solid #f0d77a;
	border-radius: var(--ss-radius-sm);
}

/* ====================================================================== */
/* Vista previa (escenario)                                                */
/* ====================================================================== */

.ss-stage {
	position: sticky;
	top: 2rem;
	display: grid;
	place-items: center;
	min-height: 420px;
	padding: 3rem 2.5rem;
	border: 1px solid var(--ss-line);
	border-radius: var(--ss-radius);
	box-shadow: var(--ss-shadow);
	overflow: hidden;
	/* Cuadrícula de transparencia, como en los editores de diseño. */
	background-color: #f4f5f7;
	background-image: conic-gradient(#e9ebee 25%, transparent 0 50%, #e9ebee 0 75%, transparent 0);
	background-size: 22px 22px;
}

.ss-sticker {
	position: relative;
	width: min(100%, 340px);
	max-height: 340px;
	transition: border-radius 0.25s ease;
}

.ss-sticker__media {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: grid;
	place-items: center;
}

.ss-sticker__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	-webkit-user-drag: none;
	user-select: none;
}

.ss-sticker__placeholder {
	display: grid;
	place-items: center;
	gap: 0.6rem;
	padding: 2rem 1rem;
	color: var(--ss-ink-soft);
	font-size: 0.85rem;
	text-align: center;
}

/* --- Formas de corte ------------------------------------------------- */

/* Cuadrado, círculo y esquinas redondeadas: papel blanco con borde de
   troquel; la imagen se recorta dentro. */
.ss-stage[data-shape='square'] .ss-sticker,
.ss-stage[data-shape='circle'] .ss-sticker,
.ss-stage[data-shape='rounded'] .ss-sticker {
	background: #fff;
	padding: 4%;
	box-shadow: 0 1px 0 rgba(16, 20, 24, 0.18), 0 14px 28px -12px rgba(16, 20, 24, 0.45);
}

.ss-stage[data-shape='square'] .ss-sticker {
	border-radius: 2px;
}

.ss-stage[data-shape='rounded'] .ss-sticker,
.ss-stage[data-shape='rounded'] .ss-sticker .ss-sticker__media {
	border-radius: 12%;
}

.ss-stage[data-shape='circle'] .ss-sticker,
.ss-stage[data-shape='circle'] .ss-sticker .ss-sticker__media {
	border-radius: 50%;
}

/* Corte contorneado: sin papel de fondo; el borde blanco del troquel se
   simula encadenando drop-shadows alrededor del PNG transparente. */
.ss-stage[data-shape='die_cut'] .ss-sticker {
	background: transparent;
	padding: 0;
	box-shadow: none;
}

.ss-stage[data-shape='die_cut'] .ss-sticker__media img {
	filter:
		drop-shadow(3px 0 0 #fff)
		drop-shadow(-3px 0 0 #fff)
		drop-shadow(0 3px 0 #fff)
		drop-shadow(0 -3px 0 #fff)
		drop-shadow(2px 2px 0 #fff)
		drop-shadow(-2px -2px 0 #fff)
		drop-shadow(0 10px 14px rgba(16, 20, 24, 0.35));
}

/* ====================================================================== */
/* Efectos de material en la vista previa                                  */
/* ====================================================================== */

.ss-sticker__overlay,
.ss-sticker__gloss {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
}

.ss-stage[data-shape='rounded'] .ss-sticker__overlay,
.ss-stage[data-shape='rounded'] .ss-sticker__gloss {
	border-radius: 12%;
}

.ss-stage[data-shape='circle'] .ss-sticker__overlay,
.ss-stage[data-shape='circle'] .ss-sticker__gloss {
	border-radius: 50%;
}

/* Holográfico: arcoíris en movimiento sobre el diseño. */
.ss-stage[data-material='holographic'] .ss-sticker__overlay {
	opacity: 0.55;
	background: linear-gradient(
		115deg,
		#ff8ae2 0%,
		#ffd34d 18%,
		#7dffb0 38%,
		#6fd2ff 58%,
		#b58cff 78%,
		#ff8ae2 100%
	);
	background-size: 300% 300%;
	mix-blend-mode: screen;
	animation: ss-holo 6s linear infinite;
}

@keyframes ss-holo {
	0% { background-position: 0% 50%; filter: hue-rotate(0deg); }
	100% { background-position: 300% 50%; filter: hue-rotate(360deg); }
}

/* Brillantina: puntitos de destello en varias capas. */
.ss-stage[data-material='glitter'] .ss-sticker__overlay {
	opacity: 0.8;
	mix-blend-mode: screen;
	background-image:
		radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.95) 0 1px, transparent 2px),
		radial-gradient(circle at 78% 26%, rgba(255, 214, 130, 0.9) 0 1.2px, transparent 2.4px),
		radial-gradient(circle at 32% 64%, rgba(140, 220, 255, 0.9) 0 1px, transparent 2px),
		radial-gradient(circle at 64% 82%, rgba(255, 255, 255, 0.85) 0 1.4px, transparent 2.6px),
		radial-gradient(circle at 88% 62%, rgba(255, 170, 220, 0.85) 0 1px, transparent 2px),
		radial-gradient(circle at 46% 36%, rgba(255, 255, 255, 0.7) 0 1px, transparent 2px);
	background-size: 90px 90px, 120px 120px, 70px 70px, 140px 140px, 100px 100px, 60px 60px;
	animation: ss-glitter 2.4s steps(2, end) infinite;
}

@keyframes ss-glitter {
	50% { opacity: 0.45; }
}

/* Espejo: degradado metálico frío. */
.ss-stage[data-material='mirror'] .ss-sticker__overlay {
	opacity: 0.75;
	background: linear-gradient(
		135deg,
		#dfe5ec 0%,
		#ffffff 22%,
		#9aa6b5 45%,
		#eef2f7 60%,
		#b7c1cd 80%,
		#f5f8fb 100%
	);
	mix-blend-mode: overlay;
}

/* Transparente: el diseño deja ver la cuadrícula de fondo. */
.ss-stage[data-material='transparent'] .ss-sticker__media img {
	opacity: 0.62;
}

.ss-stage[data-material='transparent'][data-shape='square'] .ss-sticker,
.ss-stage[data-material='transparent'][data-shape='circle'] .ss-sticker,
.ss-stage[data-material='transparent'][data-shape='rounded'] .ss-sticker {
	background: rgba(255, 255, 255, 0.35);
}

/* Acabado lustroso: veta de brillo diagonal. Mate la apaga. */
.ss-stage[data-finish='glossy'] .ss-sticker__gloss {
	opacity: 1;
	background: linear-gradient(
		120deg,
		transparent 32%,
		rgba(255, 255, 255, 0.42) 45%,
		rgba(255, 255, 255, 0.1) 52%,
		transparent 60%
	);
}

.ss-stage[data-finish='matte'] .ss-sticker__media img {
	filter: saturate(0.92) contrast(0.98);
}

.ss-stage[data-finish='matte'][data-shape='die_cut'] .ss-sticker__media img {
	filter:
		saturate(0.92) contrast(0.98)
		drop-shadow(3px 0 0 #fff)
		drop-shadow(-3px 0 0 #fff)
		drop-shadow(0 3px 0 #fff)
		drop-shadow(0 -3px 0 #fff)
		drop-shadow(2px 2px 0 #fff)
		drop-shadow(-2px -2px 0 #fff)
		drop-shadow(0 10px 14px rgba(16, 20, 24, 0.35));
}

/* --- Insignias sobre el escenario ------------------------------------ */

.ss-stage__size,
.ss-stage__dpi {
	position: absolute;
	font-size: 0.78rem;
	font-weight: 600;
	padding: 0.3rem 0.65rem;
	border-radius: 999px;
	background: rgba(16, 20, 24, 0.82);
	color: #fff;
	letter-spacing: 0.01em;
}

.ss-stage__size {
	bottom: 0.9rem;
	right: 0.9rem;
}

.ss-stage__dpi {
	top: 0.9rem;
	left: 0.9rem;
}

.ss-stage__dpi[data-level='good'] { background: var(--ss-good); }
.ss-stage__dpi[data-level='ok'] { background: var(--ss-warn); }
.ss-stage__dpi[data-level='low'] { background: var(--ss-bad); }

/* ====================================================================== */
/* Formulario                                                              */
/* ====================================================================== */

.ss-form {
	display: grid;
	gap: 1.5rem;
	margin: 0;
}

.ss-field {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.ss-field__label {
	display: block;
	margin: 0 0 0.6rem;
	padding: 0;
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--ss-ink);
}

/* Oculta los radios nativos pero los deja accesibles. */
.ss-shape input,
.ss-material input,
.ss-finish input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	clip-path: inset(50%);
	overflow: hidden;
}

/* --- Forma ------------------------------------------------------------ */

.ss-shapes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 0.6rem;
}

.ss-shape {
	display: grid;
	justify-items: center;
	gap: 0.45rem;
	padding: 0.8rem 0.5rem 0.7rem;
	border: 1.5px solid var(--ss-line);
	border-radius: var(--ss-radius-sm);
	background: var(--ss-paper);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ss-shape:hover {
	border-color: var(--ss-line-strong);
	transform: translateY(-1px);
}

.ss-shape:has(input:checked) {
	border-color: var(--ss-ink);
	box-shadow: 0 0 0 1.5px var(--ss-ink), 0 6px 14px -8px rgba(16, 20, 24, 0.5);
}

.ss-shape:has(input:focus-visible) {
	outline: 2px solid var(--ss-ink);
	outline-offset: 2px;
}

.ss-shape__icon {
	width: 34px;
	height: 34px;
	background: linear-gradient(160deg, #fff, #eef0f3);
	border: 2px solid var(--ss-ink);
	box-shadow: 2px 2px 0 rgba(16, 20, 24, 0.18);
}

.ss-shape__icon--square { border-radius: 2px; }
.ss-shape__icon--rounded { border-radius: 9px; }
.ss-shape__icon--circle { border-radius: 50%; }
.ss-shape__icon--die_cut {
	border-radius: 46% 54% 58% 42% / 48% 44% 56% 52%;
}

.ss-shape__name {
	font-size: 0.78rem;
	font-weight: 600;
	text-align: center;
	color: var(--ss-ink);
}

/* --- Material ---------------------------------------------------------- */

.ss-materials {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 0.6rem;
}

.ss-material {
	display: grid;
	justify-items: center;
	gap: 0.45rem;
	padding: 0.8rem 0.5rem 0.7rem;
	border: 1.5px solid var(--ss-line);
	border-radius: var(--ss-radius-sm);
	background: var(--ss-paper);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ss-material:hover {
	border-color: var(--ss-line-strong);
	transform: translateY(-1px);
}

.ss-material:has(input:checked) {
	border-color: var(--ss-ink);
	box-shadow: 0 0 0 1.5px var(--ss-ink), 0 6px 14px -8px rgba(16, 20, 24, 0.5);
}

.ss-material:has(input:focus-visible) {
	outline: 2px solid var(--ss-ink);
	outline-offset: 2px;
}

/* Muestra redonda con esquinita despegada (guiño a la pegatina real). */
.ss-material__swatch {
	position: relative;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(16, 20, 24, 0.18);
	box-shadow: inset 0 -2px 4px rgba(16, 20, 24, 0.08), 0 2px 4px rgba(16, 20, 24, 0.12);
	overflow: hidden;
}

.ss-material__swatch::after {
	content: '';
	position: absolute;
	right: -7px;
	bottom: -7px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: linear-gradient(315deg, #fff 0 48%, rgba(16, 20, 24, 0.16) 50%, transparent 52%);
}

.ss-material__swatch--vinyl {
	background: linear-gradient(150deg, #ffffff 0%, #e8ebef 100%);
}

.ss-material__swatch--holographic {
	background: conic-gradient(from 200deg, #ff8ae2, #ffd34d, #7dffb0, #6fd2ff, #b58cff, #ff8ae2);
}

.ss-material__swatch--transparent {
	background-color: #fdfdfd;
	background-image: conic-gradient(#dfe2e7 25%, transparent 0 50%, #dfe2e7 0 75%, transparent 0);
	background-size: 10px 10px;
}

.ss-material__swatch--glitter {
	background:
		radial-gradient(circle at 25% 30%, rgba(255, 255, 255, 0.95) 0 1px, transparent 2px),
		radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.9) 0 1px, transparent 2px),
		radial-gradient(circle at 45% 75%, rgba(255, 255, 255, 0.8) 0 1px, transparent 2px),
		linear-gradient(140deg, #f6c6ff 0%, #ffd34d 50%, #8fe3ff 100%);
}

.ss-material__swatch--mirror {
	background: linear-gradient(135deg, #eef2f7 0%, #9aa6b5 40%, #ffffff 55%, #b7c1cd 100%);
}

.ss-material__name {
	font-size: 0.78rem;
	font-weight: 600;
	text-align: center;
	color: var(--ss-ink);
}

/* --- Acabado ------------------------------------------------------------ */

.ss-finishes {
	display: inline-flex;
	gap: 0.4rem;
	padding: 0.3rem;
	border: 1.5px solid var(--ss-line);
	border-radius: 999px;
	background: #f6f7f9;
}

.ss-finish span {
	display: inline-block;
	padding: 0.42rem 1.1rem;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ss-ink-soft);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.ss-finish:has(input:checked) span {
	background: var(--ss-ink);
	color: #fff;
	box-shadow: 0 2px 6px rgba(16, 20, 24, 0.3);
}

.ss-finish:has(input:focus-visible) span {
	outline: 2px solid var(--ss-ink);
	outline-offset: 2px;
}

/* --- Tamaño -------------------------------------------------------------- */

.ss-sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.85rem;
}

.ss-chip {
	padding: 0.45rem 0.9rem;
	border: 1.5px solid var(--ss-line);
	border-radius: 999px;
	background: var(--ss-paper);
	color: var(--ss-ink);
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.ss-chip:hover {
	border-color: var(--ss-line-strong);
	transform: translateY(-1px);
}

.ss-chip.is-active {
	border-color: var(--ss-ink);
	background: var(--ss-ink);
	color: #fff;
}

.ss-chip:focus-visible {
	outline: 2px solid var(--ss-ink);
	outline-offset: 2px;
}

.ss-custom-size {
	display: flex;
	align-items: flex-end;
	gap: 0.6rem;
}

.ss-custom-size__field {
	display: grid;
	gap: 0.3rem;
	flex: 1;
	max-width: 140px;
}

.ss-custom-size__field span {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--ss-ink-soft);
}

.ss-customizer .ss-custom-size__field input[type='number'],
.ss-customizer .ss-custom-qty input[type='number'] {
	width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1.5px solid var(--ss-line);
	border-radius: var(--ss-radius-sm);
	background: var(--ss-paper);
	color: var(--ss-ink);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
}

.ss-customizer .ss-custom-size__field input[type='number']:focus,
.ss-customizer .ss-custom-qty input[type='number']:focus {
	outline: none;
	border-color: var(--ss-ink);
	box-shadow: 0 0 0 1px var(--ss-ink);
}

.ss-ratio-lock {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin-bottom: 1px;
	border: 1.5px solid var(--ss-line);
	border-radius: var(--ss-radius-sm);
	background: var(--ss-paper);
	color: var(--ss-ink-soft);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ss-ratio-lock[aria-pressed='true'] {
	background: var(--ss-accent);
	border-color: var(--ss-accent);
	color: var(--ss-accent-ink);
}

.ss-ratio-lock:focus-visible {
	outline: 2px solid var(--ss-ink);
	outline-offset: 2px;
}

/* --- Cantidad: tabla de tramos ------------------------------------------- */

.ss-tiers {
	display: grid;
	border: 1.5px solid var(--ss-line);
	border-radius: var(--ss-radius-sm);
	overflow: hidden;
	margin-bottom: 0.85rem;
	background: var(--ss-paper);
}

.ss-tier {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 0.85rem;
	padding: 0.62rem 0.95rem;
	border: 0;
	border-bottom: 1px solid var(--ss-line);
	background: transparent;
	font: inherit;
	font-size: 0.9rem;
	color: var(--ss-ink);
	text-align: left;
	cursor: pointer;
	transition: background 0.12s ease;
}

.ss-tier:last-child {
	border-bottom: 0;
}

.ss-tier:hover {
	background: #f6f7f9;
}

.ss-tier.is-active {
	background: #fff6d6;
	box-shadow: inset 3px 0 0 var(--ss-accent);
}

.ss-tier:focus-visible {
	outline: 2px solid var(--ss-ink);
	outline-offset: -2px;
}

.ss-tier__qty {
	font-weight: 700;
}

.ss-tier__price {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ss-tier__discount {
	justify-self: end;
	min-width: 54px;
	text-align: right;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--ss-good);
}

.ss-custom-qty {
	display: grid;
	gap: 0.3rem;
	max-width: 200px;
}

.ss-custom-qty span {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--ss-ink-soft);
}

/* --- Subida de diseño ------------------------------------------------------ */

.ss-upload {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 0.35rem;
	padding: 1.6rem 1.2rem 1.4rem;
	border: 2px dashed var(--ss-line-strong);
	border-radius: var(--ss-radius);
	background: #fafbfc;
	color: var(--ss-ink-soft);
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.ss-upload:hover,
.ss-upload:focus-visible {
	border-color: var(--ss-ink);
	background: #fffdf2;
	outline: none;
}

.ss-upload.is-dragover {
	border-color: var(--ss-accent);
	border-style: solid;
	background: #fff6d6;
	color: var(--ss-ink);
}

.ss-upload.is-uploading {
	pointer-events: none;
	opacity: 0.85;
}

.ss-upload.is-shake {
	animation: ss-shake 0.4s ease;
	border-color: var(--ss-bad);
}

@keyframes ss-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-5px); }
	50% { transform: translateX(5px); }
	75% { transform: translateX(-3px); }
}

.ss-upload__title {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--ss-ink);
}

.ss-upload__hint {
	margin: 0;
	font-size: 0.78rem;
}

.ss-upload__progress {
	width: 100%;
	max-width: 260px;
	height: 6px;
	margin-top: 0.5rem;
	border-radius: 999px;
	background: var(--ss-line);
	overflow: hidden;
}

.ss-upload__progress span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--ss-accent);
	transition: width 0.2s ease;
}

.ss-upload__done {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-top: 0.7rem;
	padding: 0.6rem 0.8rem;
	border: 1.5px solid var(--ss-line);
	border-radius: var(--ss-radius-sm);
	background: var(--ss-paper);
}

.ss-upload__done[hidden] {
	display: none;
}

.ss-upload__done img {
	width: 46px;
	height: 46px;
	object-fit: contain;
	border-radius: 6px;
	background-color: #f4f5f7;
	background-image: conic-gradient(#e9ebee 25%, transparent 0 50%, #e9ebee 0 75%, transparent 0);
	background-size: 10px 10px;
}

.ss-upload__filename {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.85rem;
	font-weight: 600;
}

.ss-upload__remove {
	padding: 0.35rem 0.8rem;
	border: 1.5px solid var(--ss-line-strong);
	border-radius: 999px;
	background: var(--ss-paper);
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--ss-ink);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.ss-upload__remove:hover {
	border-color: var(--ss-ink);
	background: #f6f7f9;
}

.ss-error {
	margin: 0.6rem 0 0;
	padding: 0.55rem 0.8rem;
	border-radius: var(--ss-radius-sm);
	background: #fef0ef;
	border: 1px solid #f3c1bd;
	color: var(--ss-bad);
	font-size: 0.85rem;
	font-weight: 600;
}

/* --- Resumen y CTA ----------------------------------------------------------- */

.ss-summary {
	padding: 1rem 1.1rem;
	border: 1.5px solid var(--ss-line);
	border-radius: var(--ss-radius);
	background: var(--ss-paper);
	box-shadow: var(--ss-shadow);
}

.ss-summary__line {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
}

.ss-summary__label {
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

.ss-summary__per-unit {
	flex: 1;
	font-size: 0.82rem;
	color: var(--ss-ink-soft);
}

.ss-summary__total {
	font-size: 1.65rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.ss-customizer .ss-add-to-cart {
	width: 100%;
	padding: 0.95rem 1.4rem;
	border: 0;
	border-radius: var(--ss-radius-sm);
	background: var(--ss-accent);
	color: var(--ss-accent-ink);
	font-size: 1.02rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	cursor: pointer;
	box-shadow: 0 2px 0 rgba(16, 20, 24, 0.22), 0 10px 22px -10px rgba(255, 191, 0, 0.9);
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.ss-customizer .ss-add-to-cart:hover {
	transform: translateY(-1px);
	filter: brightness(1.03);
	box-shadow: 0 3px 0 rgba(16, 20, 24, 0.22), 0 14px 26px -10px rgba(255, 191, 0, 0.95);
}

.ss-customizer .ss-add-to-cart:active {
	transform: translateY(1px);
	box-shadow: 0 1px 0 rgba(16, 20, 24, 0.22);
}

.ss-customizer .ss-add-to-cart:focus-visible {
	outline: 3px solid var(--ss-ink);
	outline-offset: 2px;
}

/* ====================================================================== */
/* Carrito: miniatura del diseño del cliente                               */
/* ====================================================================== */

img.ss-cart-thumb {
	background-color: #f4f5f7;
	background-image: conic-gradient(#e9ebee 25%, transparent 0 50%, #e9ebee 0 75%, transparent 0);
	background-size: 12px 12px;
	border-radius: 8px;
	object-fit: contain;
}

/* ====================================================================== */
/* Responsive y accesibilidad                                              */
/* ====================================================================== */

@media (max-width: 880px) {
	.ss-customizer {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.ss-stage {
		position: static;
		min-height: 320px;
		padding: 2rem 1.2rem;
	}

	.ss-sticker {
		width: min(100%, 260px);
		max-height: 260px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ss-customizer *,
	.ss-customizer *::before,
	.ss-customizer *::after {
		animation-duration: 0.001s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001s !important;
	}
}