/**
 * Lista Allergen Display — Frontend Styles
 *
 * Structural base styles for the allergen icon grid.
 * Visual properties (colours, typography, sizing) are controlled
 * by Bricks element panel controls and injected via Bricks' CSS engine.
 *
 * @package Listapage\AllergenDisplay
 * @version 1.1.0
 */

.lad-allergen-grid {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 12px;
}

.lad-allergen-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.lad-allergen-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	width: 28px;
	height: 28px;
	box-sizing: border-box;
}

.lad-allergen-icon svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: currentColor;
}

.lad-allergen-label {
	display: block;
	margin-top: 4px;
	line-height: 1.3;
	font-size: 12px;
}

/* Default status colours (overridden by Bricks controls) */
.lad-allergen-item--contains .lad-allergen-icon {
	color: #e74c3c;
}

.lad-allergen-item--traces .lad-allergen-icon {
	color: #f39c12;
}

.lad-allergen-item--none .lad-allergen-icon {
	color: #cccccc;
}