/**
 * Блок иконок преимуществ. Значения размеров и цветов приходят из настроек
 * плагина как CSS-переменные, поэтому ничего править в этом файле не нужно.
 */

/* Значения по умолчанию. Настройки плагина печатают свои в :root после
   этого файла и перекрывают их — поэтому здесь их объявлять нельзя внутри
   .gpi-icons, иначе локальное объявление победит настройки. */
:root {
	--gpi-icon-size: 34px;
	--gpi-icon-color: #1f9d55;
	--gpi-label-size: 14px;
	--gpi-gap: 12px;
}

.gpi-icons {
	display: grid;
	gap: var(--gpi-gap, 12px);
	margin: 1.2em 0;
	padding: 0;
	list-style: none;
}

.gpi-icons--cols-auto {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.gpi-icons--cols-1 {
	grid-template-columns: 1fr;
}

.gpi-icons--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gpi-icons--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gpi-icons--cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gpi-icon {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	line-height: 1.3;
	list-style: none;
}

.gpi-icon::before,
.gpi-icon::marker {
	content: none;
}

.gpi-icon__glyph {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--gpi-icon-size, 34px);
	height: var(--gpi-icon-size, 34px);
	color: var(--gpi-icon-color, #1f9d55);
}

.gpi-icon__glyph svg {
	width: 100%;
	height: 100%;
	display: block;
}

.gpi-icon__glyph img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

.gpi-icon__label {
	font-size: var(--gpi-label-size, 14px);
	color: var(--gpi-label-color, inherit);
}

/* Плитки с фоном. */
.gpi-icons--card .gpi-icon {
	padding: 10px 12px;
	border-radius: 10px;
	background: rgba(31, 157, 85, 0.07);
}

/* Плитки с рамкой. */
.gpi-icons--bordered .gpi-icon {
	padding: 10px 12px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 10px;
}

@media (max-width: 480px) {
	.gpi-icons--cols-3,
	.gpi-icons--cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* В каталоге блок компактнее. */
.woocommerce-loop-product__link + .gpi-icons,
ul.products .gpi-icons {
	--gpi-icon-size: 22px;
	--gpi-label-size: 12px;
	--gpi-gap: 6px;
	margin: 0.5em 0;
}