.pup-printcolor { margin-top: 1.5rem; }

.pup-title {
	font-weight: 700; 
	margin-bottom: .5rem; 
}

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

.pup-swatch {
	width: 40px; 
	height: 40px; 
	border-radius: 50%; 
	cursor: pointer; 
	border: 2px solid #ccc; 
	transition: transform .08s ease; 
}

.pup-swatch:hover { transform: scale(1.06); }

.pup-swatch.active { outline:2px solid rgba(0,0,0,.7); border-color: rgba(0,0,0,.7); }


/* Bloc */
.pup-printcolor { margin-top: 12px; }

/* Titre */
.pup-title { font-weight: 700; margin: 0 0 .5rem; }

/* Swatches (ronds) */
.pup-swatches { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.pup-swatch   { width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
                border: 2px solid #ccc; transition: transform .08s ease; }
.pup-swatch:hover { transform: scale(1.06); }
.pup-swatch.active { outline: 2px solid rgba(0,0,0,.7); border-color: rgba(0,0,0,.7); }

/* Aperçu : plein largeur de la colonne gauche */
.pup-preview { margin-top: 6px; }
.pup-preview img {
  display: block;
  width: 100%;         /* prend toute la largeur disponible de la colonne */
  height: auto;        
  max-width: 100%;
  /*border: 1px solid #eee;
  border-radius: 12px;*/
}

/* Option mobile : un peu plus d’air */
@media (max-width: 768px) {
  .pup-swatches { gap: 10px; }
  .pup-swatch { width: 38px; height: 38px; }
}