/**
 * The trust band at the foot of every page.
 *
 * Kept apart from forside.css because that file is only enqueued on the front
 * page, and this band now appears throughout the shop. It carries its own
 * custom properties for the same reason: it renders outside .fly1-front and
 * inherits nothing from it.
 */
/*
 * A band that runs the full width of the window, not just the column.
 *
 * The section sits inside a centred container with padding, so it is pulled
 * out to the viewport edges and given that padding back on the inside. 100vw
 * would include the scrollbar and cause a sideways scroll of its own; the
 * calc pair below measures from the element instead, so it stays exact.
 */
/*
 * This band renders on the footer hook, outside .fly1-front, so it cannot
 * inherit the custom properties declared there. It carries its own.
 *
 * The neighbours are pale grey: #f7f7f7 above, #eee below. A third light band
 * would have merged with both. This one takes the deep blue the hero and the
 * part-number panel already use, so the foot of the page closes with a colour
 * the page opened with, and the payment row beneath it reads as its own strip.
 */
.f1-trygghet {
	--f1-blue: #4FB3FF;
	--f1-ink: #FFFFFF;
	--f1-muted: #A9C2D2;
	color: var(--f1-ink);
	/* Sits between the price notice and the payment logos, flush against both:
	   three bands stacked with no gap, so they read as one footer block. The
	   neighbours pad 15px at the sides, so this matches them and the three
	   bands line up down the page. */
	margin: 0;
	padding: 28px 15px;
	background: var(--f1-deep-band, #12212C);
	border-top: 0;
}

.f1-trygghet-rad {
	max-width: 1341px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.f1-trygg {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.f1-trygg i {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 15px 0;
	background: rgba(79, 179, 255, .16);
	color: var(--f1-blue);
	font-size: 15px;
}

.f1-trygg-tekst {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.f1-trygg strong {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--f1-ink);
}

.f1-trygg span {
	font-size: 0.86rem;
	color: var(--f1-muted);
	line-height: 1.45;
}


@media (max-width: 900px) {
	.f1-trygghet-rad {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.f1-trygghet-rad {
		grid-template-columns: 1fr;
	}
}