/* Age group badge */
.agegroup-badge {
	background: rgba(37, 99, 235, 0.5);
	color: #43149c;
	border-radius: 12px;
	padding: 2px 4px;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 13px;
	font-weight: 500;
	margin-left: 2px;
}

/* Gender badge */
.gender-badge {
	background: #43149c;
	color: #fff;
	border-radius: 12px;
	padding: 2px 4px;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 13px;
	font-weight: 500;
}

/* Grille infos (stock, articles, livraison, retour) */
.collection-infos-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
	margin: 2px 0 0 0;
	width: 100%;
}

@media (max-width: 700px) {
	.collection-infos-grid {
		grid-template-columns: 1fr 1fr;
	}

	.label-badge,
	.btn-save-later-infos {
		display: none !important;
	}
}

.infos-grid-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1.5px solid #e5e7eb;
	background: #fff;
	border-radius: 12px;
	padding: 2px 4px;
	font-size: 10px;
	font-weight: 700;
	box-sizing: border-box;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.infos-grid-item svg {
	flex-shrink: 0;
	height: 16px;
}

.infos-grid-item.stock-out {
	color: #e11d48;
	border-color: #e11d48;
	background: #fff0f3;
}

.infos-grid-item.stock-low {
	color: #f59e42;
	border-color: #f59e42;
	background: #fff7ed;
}

.infos-grid-item.stock-ok {
	color: #16a34a;
	border-color: #16a34a;
	background: #f0fdf4;
}

.infos-grid-item.articles-ok {
	background: rgba(67, 20, 156, 0.08);
	color: #43149c;
}

.infos-grid-item.articles-none {
	color: #888;
	border-color: #e5e7eb;
	background: #f3f4f6;
}

.infos-grid-item.free-delivery {
	color: #16a34a;
	border-color: #16a34a;
	background: #f0fdf4;
}

.infos-grid-item.free-return {
	color: #43149c;
	border-color: #43149c;
	align-items: center;
	justify-content: space-between;
	background: #f3f0ff;
	cursor: pointer;
	transition: background 0.18s;
}

.infos-grid-item.free-return:hover {
	background: #ede9fe;
}

/* Modal retour gratuit */
.modal-return-bg {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(67, 20, 156, 0.13);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-return-float {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 8px 32px rgba(67, 20, 156, 0.13);
	padding: 32px 22px 22px 22px;
	max-width: 420px;
	min-width: 220px;
	max-height: 70vh;
	overflow-y: auto;
	position: relative;
	animation: floatInDesc .22s cubic-bezier(.71, .3, .71, .49);
}

.modal-return-content p {
	color: #43149c;
	font-size: 15px;
	margin: 0 0 10px 0;
	line-height: 1.6;
}

.close-modal-return {
	position: absolute;
	top: 10px;
	right: 16px;
	background: none;
	border: none;
	font-size: 18px;
	color: #43149c;
	cursor: pointer;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 4px;
	transition: color 0.18s;
	z-index: 2;
}

.close-modal-return:hover {
	color: #e11d48;
}

.btn-save-later-infos {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.btn-save-later-infos {
	padding: 2px 4px;
	color: #43149c;
	background: #fff;
	border: 2px solid #43149c;
	border-radius: 12px;
	font-size: 10px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.12s;
	box-shadow: 0 2px 8px rgba(67, 20, 156, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
}

.btn-save-later-infos:hover,
.btn-save-later-infos:active {
	background: #ede9fe;
	color: #2e1065;
	transform: scale(1.04);
}

.btn-save-later-infos svg {
	height: 16px;
}

/* Actions boutons (ajouter au panier, acheter) */
.collection-actions-row {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 8px;
	margin: 2px 0 0 0;
	flex-wrap: wrap;
	width: 100%;
}

@media (max-width: 600px) {
	.collection-actions-row {
		flex-direction: column;
		align-items: stretch;
		gap: 7px;
	}
}

.collection-actions-row button {
	flex: 1 1 0;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
}

@media (max-width: 600px) {
	.collection-actions-row {
		flex-direction: column;
		align-items: stretch;
		gap: 7px;
	}
}

.btn-add-cart-infos {
	display: flex;
	padding: 2px 4px;
	color: #43149c;
	background: #fff;
	border: 2px solid #43149c;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	gap: 2px;
	cursor: pointer;
	transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.12s;
	box-shadow: 0 2px 8px rgba(67, 20, 156, 0.06);
	align-items: center;
	justify-content: center;
}

.btn-add-cart-infos:hover,
.btn-add-cart-infos:active {
	background: #ede9fe;
	color: #2e1065;
	transform: scale(1.04);
}

.btn-add-cart-infos svg {
	height: 16px
}

.btn-buy-now-infos {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2px 4px;
	color: #fff;
	background: #43149c;
	border: none;
	border-radius: 12px;
	font-size: 10px;
	gap: 2px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.12s;
	box-shadow: 0 2px 8px rgba(67, 20, 156, 0.09);
}

.btn-buy-now-infos:hover,
.btn-buy-now-infos:active {
	background: #2e1065;
	color: #fff;
	transform: scale(1.04);
}

/* Bloc prix infos */
.collection-price-row-infos {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 4px;
	margin: 6px 0 0 0;
	flex-wrap: wrap;
}

.selling-price-infos {
	color: blueviolet;
	text-decoration: line-through;
	font-size: 14px;
	font-weight: 600;
	margin-right: 2px;
}

.price-total-infos {
	color: #16a34a;
	font-size: 16px;
	font-weight: 700;
	margin-right: 2px;
}

.price-total-infos.with-selling {
	color: #43149c;
	font-size: 16px;
	font-weight: 700;
	margin-right: 2px;
}

.promo-badge-infos {
	display: flex;
	align-items: center;
	gap: 2px;
	color: #fff;
	background: #e11d48;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	padding: 2px 6px 2px 6px;
	margin-left: 2px;
	box-shadow: 0 2px 8px rgba(225, 29, 72, 0.08);
}

.promo-badge-infos svg {
	margin-right: 2px;
	stroke: #fff;
}

.per-set-infos {
	color: #888;
	font-size: 13px;
	font-weight: 400;
	margin-left: 4px;
}

.quantity-row-infos {
	display: flex;
	align-items: center;
	gap: 4px;
}

#qt-minus,
#qt-plus {
	border: 2px solid #43149c;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: #43149c;
	transition: color 0.2s;
	cursor: pointer;
}

#qt-input {
	border: 2px solid #43149c;
	border-radius: 8px;
	width: 48px;
	text-align: center;
	color: #43149c;
	font-size: 16px;
	outline: none;
}

#qt-error {
	color: #b91c1c;
	font-size: 13px;
}

/* Description collection (clamp 3 lignes, noir, voir plus) */
.collection-description-infos {
	color: #111;
	font-size: 15px;
	margin: 2px 0 0 0;
	line-height: 1.5;
	max-width: 100%;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	position: relative;
	word-break: break-word;
}

.see-more-btn {
	color: #2563eb;
	background: none;
	border: none;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	margin-left: 0;
	margin-top: 2px;
	padding: 0 4px;
	transition: color 0.18s;
}

.see-more-btn:hover {
	color: #43149c;
	text-decoration: underline;
}

/* Modal float description */
.modal-description-bg {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(34, 34, 44, 0.18);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-description-float {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 8px 32px rgba(67, 20, 156, 0.13);
	padding: 32px 22px 22px 22px;
	max-width: 420px;
	min-width: 220px;
	max-height: 70vh;
	overflow-y: auto;
	position: relative;
	animation: floatInDesc .22s cubic-bezier(.71, .3, .71, .49);
}

@keyframes floatInDesc {
	from {
		transform: translateY(40px) scale(0.97);
		opacity: 0;
	}

	to {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

.modal-description-content {
	color: #111;
	font-size: 15px;
	line-height: 1.6;
	white-space: pre-line;
}

.close-modal-description {
	position: absolute;
	top: 10px;
	right: 16px;
	background: none;
	border: none;
	font-size: 28px;
	color: #888;
	cursor: pointer;
	transition: color 0.18s;
	z-index: 2;
}

.close-modal-description:hover {
	color: #43149c;
}

/* Titre collection (nom) */
.collection-title-infos {
	color: #43149c;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.13;
	margin-bottom: 0px;
	word-break: break-word;
	white-space: pre-line;
}

/* Slogan collection */
.collection-slogan-infos {
	color: #888;
	font-family: 'Permanent Marker', 'Caveat', 'Comic Sans MS', cursive, graffiti, sans-serif;
	font-size: 18px;
	margin-bottom: 2px;
	margin-top: -2px;
	letter-spacing: 0.5px;
	word-break: break-word;
}

/* Layout principal colonne */
.collection-details-infos {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

/* Ligne du haut : catégorie + bouton */
.infos-row-top {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 12px;
}

.category-badge {
	display: flex;
	align-items: center;
	gap: 7px;
	color: #2563eb;
	background: rgba(37, 99, 235, 0.12);
	padding: 4px 12px 4px 8px;
	border-radius: 10px;
	font-weight: 500;
	font-size: 1rem;
	cursor: pointer;
	transition: background 0.18s;
}

.category-badge:hover {
	background: rgba(37, 99, 235, 0.22);
}

.category-badge .fa-tag {
	color: #2563eb;
	font-size: 1.1em;
}

.subscribe-infos-btn {
	color: #fff;
	background: #2563eb;
	border: none;
	border-radius: 12px;
	padding: 4px 14px 4px 14px;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.07);
	transition: background 0.18s;
}

.subscribe-infos-btn:hover {
	background: #1d4ed8;
}

/* Badge vedette */
.featured-infos-badge {
	display: flex;
	align-items: center;
	width: 98%;
	color: #fff;
	background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
	border-radius: 12px;
	padding: 4px 8px;
	font-size: 1.05rem;
	font-weight: 600;
	gap: 4px;
	box-shadow: 0 2px 8px rgba(124, 58, 237, 0.08);
}

.featured-infos-badge .fa-star {
	color: #ffe066;
	font-size: 1.1em;
}




#select-size-or-color-or-set {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
}

.variants-list, .size-options-list {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 2px;
	padding: 1px 5px 1px 1px;
	border: 1.5px solid blueviolet;
	border-radius: 0% 0% 0% 22px;;
}

.select-title-colors, .select-title-sizes {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	font-weight: bold;
	color: #fff;
	background: blueviolet;
	padding: 4px 6px;
	border-radius: 0% 4px 4px 22px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-weight: bold;
}

.color-badge {
	width: 24px;
	height: 24px;
	border-radius: 100%;
	box-shadow: 0 2px 8px #eee;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;
	transition: border 0.2s;
}

.color-badge.one {
	width: 16px;
	height: 16px;
}

.color-badge:hover {
	box-shadow: 0 2px 12px rgba(67, 20, 156, 0.2);
	transform: scale(1.1);
}

.infos-select-variants {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 2px;
	padding: 4px 6px;
	border: 1.5px solid blueviolet;
	border-radius: 22px 0% 0% 0%;
	box-sizing: border-box;
	background-color: blueviolet;
	color: white;
	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	font-weight: bold;
}

.color-name-span,
.weight-span,
.size-span {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
}

.size-option {
	padding: 2px 4px;
	border: 1.5px solid #43149c;
	border-radius: 16px;
	background: #fff;
	color: #43149c;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.18s, color 0.18s, border-color 0.18s;
}