/* Ace Glove — Section: Product specs (sticky left, fixed background). */

.ags-sp {
	position: relative;
	/* clip, not hidden: hidden would make the section a scroll container and break the sticky column. */
	overflow: clip;
	color: var(--ags-white);
	background: var(--ags-secondary) var(--ags-sp-bg, none) center / cover no-repeat fixed;
}

/* Editable colour overlay. */
.ags-sp::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ags-sp-overlay, #131f2b);
	opacity: var(--ags-sp-overlay-a, 0.82);
	pointer-events: none;
}

.ags-sp__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 56px;
	align-items: start;
	max-width: var(--ags-max);
	margin: 0 auto;
	padding: var(--ags-pad-y) var(--ags-pad-x);
}

.ags-sp__side {
	position: sticky;
	top: 40px;
}

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

.ags-sp .ags-sp__title { margin: 0; color: var(--ags-white); }

.ags-sp .ags-sp__text {
	margin: 22px 0 28px;
	font-size: var(--ags-text-size);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.85);
}

.ags-sp__kpis { display: grid; gap: 12px; }

.ags-sp__kpi {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.15);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.ags-sp__kpi b { font-size: 26px; font-weight: 600; line-height: 1.2; }
.ags-sp__kpi span { font-size: 13px; text-align: right; color: var(--ags-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }

.ags-sp__main { display: grid; gap: 28px; min-width: 0; }

/* --- Table ----------------------------------------------------------------- */

.ags-sp__table {
	overflow: hidden;
	border-radius: var(--ags-about-radius);
	background: var(--ags-white);
	color: var(--ags-secondary);
	box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.6);
}

.ags-sp__row {
	display: grid;
	grid-template-columns: 38% minmax(0, 1fr);
	gap: 16px;
	padding: 15px 28px;
	border-bottom: 1px solid rgba(19, 31, 40, 0.1);
	font-size: var(--ags-text-size);
	transition: background-color var(--ags-speed) var(--ags-ease);
}

.ags-sp__row:nth-child(odd) { background: #f8f9fa; }
.ags-sp__row:hover { background: rgba(0, 127, 62, 0.08); }
.ags-sp__row:last-child { border-bottom: 0; }
.ags-sp__row span { font-weight: 500; color: rgba(19, 31, 40, 0.62); }
.ags-sp__row b { font-weight: 600; }

.ags-sp__row.ags-sp__row--head,
.ags-sp__row.ags-sp__row--head:hover {
	background: var(--ags-secondary);
	color: var(--ags-white);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
}

.ags-sp__row--head span { color: var(--ags-white); font-weight: 600; }

/* --- Options panel ----------------------------------------------------------- */

.ags-sp__opts {
	padding: 28px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--ags-about-radius);
	background: rgba(255, 255, 255, 0.15);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.ags-sp .ags-sp__opts-title {
	margin: 0 0 18px;
	font-size: var(--ags-eyebrow-size);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ags-white);
}

/* Three columns: five groups fill 3 + 2, so no row is left with a single group. */
.ags-sp__groups {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 32px;
}

.ags-sp__group {
	padding: 16px 0 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.ags-sp__group-title {
	display: block;
	margin-bottom: 10px;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ags-primary);
	font-weight: 700;
}

.ags-sp__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.ags-sp__chips span {
	padding: 6px 14px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ags-white);
	transition: background-color var(--ags-speed) var(--ags-ease);
}

.ags-sp__chips span:hover { background: rgba(255, 255, 255, 0.12); }

/* --- Breakpoints --------------------------------------------------------------- */

@media (max-width: 1024px) {
	.ags-sp__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.ags-sp__side { position: static; }
}

/* iOS ignores fixed attachment; fall back to a normal scrolling background. */
@media (hover: none) and (pointer: coarse) {
	.ags-sp { background-attachment: scroll; }
}

@media (max-width: 600px) {
	.ags-sp__row { grid-template-columns: 42% minmax(0, 1fr); padding: 13px 18px; }
	.ags-sp__opts { padding: 22px 18px; }
	.ags-sp__groups { grid-template-columns: minmax(0, 1fr); }
	.ags-sp__kpi b { font-size: 22px; }
}