/* gl-affiliate: pick boxes, grids, comparison tables, planner. Colours follow the child theme's green. */
.gl-pick {
	display: grid;
	grid-template-columns: minmax(0, 200px) 1fr;
	gap: 1.25em;
	margin: 1.5em 0;
	padding: 1.25em;
	border: 1px solid #d7d7d7;
	border-radius: 4px;
	background: #fff;
	scroll-margin-top: 1em;
}
.gl-pick__media img,
.gl-pick__media svg,
.gl-tile__media img,
.gl-tile__media svg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: 3px;
}
.gl-pick__name { margin: 0 0 .4em; font-size: 1.2em; }
.gl-pick__bestfor, .gl-pick__verdict { margin: 0 0 .75em; }
.gl-pick__specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .25em 1em; margin: 0 0 1em; font-size: .9em; }
.gl-pick__specs div { display: flex; gap: .4em; }
.gl-pick__specs dt { font-weight: 600; }
.gl-pick__specs dd { margin: 0; }
.gl-pick__proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; margin: 0 0 1em; font-size: .95em; }
.gl-pick__label { margin: 0 0 .25em; font-weight: 600; }
.gl-pick__proscons ul { margin: 0 0 0 1.1em; }
.gl-pick__tested { margin: 0 0 .75em; padding: .35em .6em; display: inline-block; background: #eef6ee; border-left: 3px solid #2f7d32; font-size: .9em; }
.gl-pick__price { margin: 0 0 .75em; }
.gl-pick__buttons { display: flex; flex-wrap: wrap; gap: .5em; }
.gl-btn { margin: 0; }

.gl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1em;
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}
.gl-tile {
	display: flex;
	flex-direction: column;
	gap: .5em;
	padding: .75em;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	background: #fff;
	scroll-margin-top: 1em;
}
.gl-tile__name { margin: 0; font-size: 1em; line-height: 1.3; }
.gl-tile__bestfor { margin: 0; font-size: .875em; }
.gl-tile .gl-pick__buttons { margin-top: auto; }
.gl-tile .gl-btn { width: 100%; text-align: center; font-size: .9em; }

.gl-compare table { min-width: 560px; }
.gl-compare th[scope="row"] { font-weight: 600; }
.gl-compare__tested { font-size: .75em; padding: 0 .35em; background: #eef6ee; }

.gl-planner { margin: 1.5em 0; padding: 1.25em; border: 1px solid #d7d7d7; border-radius: 4px; background: #fbfbfb; }
.gl-planner__group { margin: 0 0 1.25em; padding: 0; border: 0; }
.gl-planner__group legend { font-weight: 700; margin-bottom: .5em; }
.gl-planner__hint { margin: 0 0 .75em; font-size: .9em; }
.gl-planner__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75em 1em; margin-bottom: .75em; }
.gl-planner label { display: flex; flex-direction: column; gap: .25em; font-size: .9em; }
.gl-planner input, .gl-planner select { width: 100%; }
.gl-planner__segment { display: grid; grid-template-columns: 1fr 1fr auto; gap: .75em; align-items: end; margin-bottom: .5em; }
.gl-planner__remove { padding: .4em .8em; line-height: 1; }
.gl-planner__add { margin-bottom: .5em; }
.gl-planner__result:not(:empty) { margin-top: 1.25em; padding-top: 1em; border-top: 1px solid #d7d7d7; }
.gl-planner__out { margin-left: 1.1em; }
.gl-planner__warn { padding: .5em .75em; border-left: 3px solid #b3261e; background: #fdf1f0; }
.gl-planner__disclaimer { margin: 1em 0 0; color: #555; }
.gl-power-check__title { margin: 0 0 .75em; }

@media (max-width: 600px) {
	.gl-pick { grid-template-columns: 1fr; }
	.gl-pick__media { max-width: 220px; }
	.gl-pick__proscons { grid-template-columns: 1fr; }
	.gl-grid { grid-template-columns: 1fr 1fr; gap: .75em; }
	.gl-planner__segment { grid-template-columns: 1fr 1fr; }
	.gl-planner__remove { grid-column: span 2; }
}

.gl-meter label { max-width: 320px; margin-bottom: .75em; }
.gl-meter__bar { height: 14px; margin: .5em 0; background: #e3e3e3; border-radius: 7px; overflow: hidden; }
.gl-meter__bar span { display: block; height: 100%; background: linear-gradient(90deg, #2f7d32, #f3d36b, #b3261e); }