/*
 * EMS-app zichtbaar maken (opdracht 0054). Hoort bij inc/ems.php.
 * Kleur: lichtoranje #ffeae0 zoals het blok "Daarom Thuisaccu Webshop" op de homepage (geen groen:
 * dat betekent op deze site voorraad en levertijd).
 */

/* USP-balk: de derde regel past pas vanaf 1280 px op één regel, daaronder verbergen */
@media (max-width: 1279px) {
	.taw-hd__usp .taw-hd__usp-item--ems { display: none; }
}

/* Productpagina: eerste regel van de opsomming onder de prijs (zelfde opmaak, met link) */
.taw-ems-usp { margin-bottom: .55rem; }
.taw-ems-usp a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.taw-ems-usp a:hover { color: var(--taw-brand); }

/* Productkaart */
/* Lijntje boven de regel, zodat hij los staat van de opsomming erboven (Valentijn 08-11). */
.taw-card .taw-card__ems {
	position: relative;
	margin: .45rem 0 0;
	padding: .45rem 0 0 .8rem;
	border-top: 1px solid var(--taw-line);
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--taw-ink);
}
.taw-card .taw-card__ems::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: .45rem;
	font-size: .8em;
	line-height: 1.6;
	color: var(--taw-brand);
}

/* Blok op omvormerpagina's en homepage */
.taw-ems-blok {
	display: flex;
	flex-direction: column;
	gap: .9rem;
	margin: 0 0 1.5rem;
	padding: 1rem 1.1rem;
	background: #ffeae0;
	border-radius: var(--taw-radius);
	color: var(--taw-ink);
	font-size: .9rem;
	line-height: 1.5;
}
.taw-ems-blok p { margin: 0; }
.taw-ems-blok .taw-ems-blok__kop {
	margin: 0 0 .25rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--taw-ink-strong);
}
.taw-ems-blok__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.1rem;
}
.taw-ems-blok__links a { color: var(--taw-ink-strong); font-weight: 600; }
.taw-ems-blok .taw-ems-blok__knop {
	display: inline-block;
	padding: .55rem 1.1rem;
	background: var(--taw-brand);
	border-radius: var(--taw-radius-pill);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.taw-ems-blok .taw-ems-blok__knop:hover { background: var(--taw-brand-dark); color: #fff; }

.taw-ems-blok--home { margin: 0; padding: 1.25rem 1.4rem; }
.taw-ems-blok--home .taw-ems-blok__kop { font-size: 1.15rem; }

@media (min-width: 768px) {
	.taw-ems-blok {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 1.5rem;
	}
	.taw-ems-blok__tekst { max-width: 46rem; }
	.taw-ems-blok__links { flex: none; }
}