/* Etik Bakkal Çekirdek — ürün rozetleri (kartlarda ve ürün sayfasında). */

.etik-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	pointer-events: none;
}

.etik-badge {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 8px;
	border-radius: 11px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
	color: #2b2b2b;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
}

/* Renkler: koyu yazı, açık zemin (en az 4,5:1 karşıtlık). */
.etik-badge--low {
	background: #fde8e6;
	color: #9a1c12;
}

.etik-badge--best {
	background: #fdecd6;
	color: #8a4700;
}

.etik-badge--new {
	background: #e9f3d6;
	color: #2f4a00;
}

.etik-badge--tag {
	background: #efe9fb;
	color: #4a2a8a;
}

/* Kart: görselin sol alt köşesi. */
.box-image .etik-badges--card {
	position: absolute;
	bottom: 8px;
	left: 8px;
	z-index: 2;
	max-width: calc(100% - 16px);
}

/* Kartın üzerine gelince temanın "Hızlı Görünüm" şeridi görselin altından çıkar (yalnızca
 * masaüstünde). Rozetler şeridi örtmesin diye onunla birlikte yukarı kayar. */
@media (min-width: 550px) and (hover: hover) {
	.box-image:has(.grid-tools .quick-view) .etik-badges--card {
		transition: transform 0.2s ease;
	}

	.has-hover:hover .box-image:has(.grid-tools .quick-view) .etik-badges--card,
	.box-image:has(.grid-tools .quick-view:focus-visible) .etik-badges--card {
		transform: translateY(-36px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.box-image .etik-badges--card {
		transition: none !important;
	}
}

/* Ürün sayfası: başlığın üstü. */
.etik-badges--page {
	margin: 0 0 8px;
}

.etik-badges--page .etik-badge {
	height: 26px;
	padding: 0 10px;
	border-radius: 13px;
	box-shadow: none;
	font-size: 12px;
}

@media (max-width: 549px) {
	.box-image .etik-badges--card {
		bottom: 6px;
		left: 6px;
	}

	.box-image .etik-badges--card .etik-badge {
		height: 20px;
		padding: 0 6px;
		font-size: 10px;
	}
}