.kouruset-benefits {
	position: relative;
	z-index: 20;
	width: 100%;
	margin: 0 0 34px;
	background: var(--kouruset-red);
	color: #fff;
}
.kouruset-benefits__inner {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	width: min(var(--kouruset-content), 100%);
	margin: 0 auto;
}
.kouruset-benefit {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	min-height: 78px;
	padding: 16px 12px;
	border: 0;
	border-right: 1px solid rgba(255,255,255,.3);
	background: transparent;
	color: #fff;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
}
.kouruset-benefit:first-of-type { border-left: 1px solid rgba(255,255,255,.3); }
.kouruset-benefit:hover,
.kouruset-benefit:focus-visible { background: rgba(0,0,0,.08); }
.kouruset-benefit__icon {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
}
.kouruset-benefit__icon svg {
	display: block;
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
body.kouruset.single-product .kouruset-benefits { grid-column: 1 / -1; }
body.kouruset.woocommerce-shop .kouruset-benefits,
body.kouruset.tax-product_cat .kouruset-benefits { margin-bottom: 24px; }

/* on phones all five benefits are visible without a hidden horizontal
 * gesture or an asymmetric 2+2+1 grid. Use five equal-height low rows with the
 * icon before the label. */
@media (max-width: 700px) {
	.kouruset-benefits {
		margin-bottom: 22px;
	}
	.kouruset-benefits__inner {
		display: grid !important;
		grid-template-columns: 1fr !important;
		width: calc(100% - 32px) !important;
		margin: 0 auto !important;
		overflow: visible !important;
	}
	.kouruset-benefit,
	body.kouruset.woocommerce-cart .kouruset-benefit {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 11px !important;
		width: 100% !important;
		min-width: 0 !important;
		min-height: 46px !important;
		padding: 9px 14px !important;
		border: 0 !important;
		border-bottom: 1px solid rgba(255,255,255,.28) !important;
		background: transparent !important;
		font-size: 12px !important;
		line-height: 1.2 !important;
		text-align: left !important;
	}
	.kouruset-benefit:first-of-type { border-top: 1px solid rgba(255,255,255,.28) !important; }
	.kouruset-benefit__icon,
	.kouruset-benefit__icon svg {
		width: 20px !important;
		height: 20px !important;
		flex: 0 0 20px !important;
	}
	.kouruset-benefit__label {
		min-width: 0;
		flex: 1 1 auto;
	}
}

/* labels are always part of the benefit contract; Bridge/plugin rules
 * must not make the modal trigger look like an icon-only control. */
.kouruset-benefit__label {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	color: #fff !important;
}