/* Ace Glove — Section: Product highlights (icon card grid). */

.ags-hl {
	position: relative;
	overflow: hidden;
	background: var(--ags-white);
}


.ags-hl__inner {
	position: relative;
	z-index: 1;
	max-width: var(--ags-max);
	margin: 0 auto;
	padding: var(--ags-pad-y) var(--ags-pad-x);
}

.ags-hl__head { margin-bottom: 40px; }

.ags-hl .ags-hl__eyebrow {
	margin: 0 0 12px;
	font-size: var(--ags-eyebrow-size);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ags-primary);
}

.ags-hl .ags-hl__title {
	margin: 0;
	color: var(--ags-secondary);
}

.ags-hl__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.ags-hl__card {
	padding: 30px 26px;
	border: 1px solid rgba(19, 31, 40, 0.08);
	border-radius: var(--ags-about-radius);
	background: #f0f1f3;
	color: var(--ags-secondary);
	box-shadow: 0 20px 40px -30px rgba(19, 31, 40, 0.4);
	transition: background-color var(--ags-speed) var(--ags-ease), color var(--ags-speed) var(--ags-ease), transform var(--ags-speed) var(--ags-ease);
}

.ags-hl__card:hover {
	background: var(--ags-primary);
	color: var(--ags-white);
	transform: translateY(-4px);
}

.ags-hl__icon {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin-bottom: 22px;
	border: 1px solid rgba(0, 127, 62, 0.5);
	border-radius: 50%;
	background: rgba(0, 127, 62, 0.12);
	transition: background-color var(--ags-speed) var(--ags-ease), border-color var(--ags-speed) var(--ags-ease);
}

.ags-hl__icon svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: var(--ags-primary);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke var(--ags-speed) var(--ags-ease);
}

.ags-hl__card:hover .ags-hl__icon { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.6); }
.ags-hl__card:hover .ags-hl__icon svg { stroke: var(--ags-white); }

.ags-hl .ags-hl__card-title {
	margin: 0 0 10px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	color: inherit;
}

.ags-hl .ags-hl__card-text {
	margin: 0;
	font-size: var(--ags-text-size);
	line-height: 1.65;
	color: inherit;
	opacity: 0.8;
}

@media (max-width: 1100px) {
	.ags-hl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.ags-hl__grid { grid-template-columns: minmax(0, 1fr); }
	.ags-hl__head { margin-bottom: 28px; }
}