/* goodcoffee.dk — [gc_kop] kopdiagram */

.gc-kop{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:18px;
	margin:0;
	padding:24px 20px 26px;
	background:
		radial-gradient(120% 90% at 30% 0%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
		linear-gradient(165deg, #FAF6F0 0%, #F1E8DB 100%);
	border:1px solid #EADFD1;
	border-radius:14px;
	box-shadow:0 1px 2px rgba(58,35,23,.05), 0 8px 22px -14px rgba(58,35,23,.35);
}

.gc-kop__glas{
	width:104px;
	height:auto;
	flex:none;
	display:block;
	filter:drop-shadow(0 2px 6px rgba(58,35,23,.10));
}

.gc-kop__side{flex:1 1 158px;min-width:158px}

.gc-kop__key{list-style:none;margin:0;padding:0}
.gc-kop__key li{
	display:flex;
	align-items:baseline;
	gap:10px;
	padding:8px 0;
	font-size:14.5px;
	line-height:1.35;
	border-bottom:1px solid rgba(58,35,23,.08);
}
.gc-kop__key li:last-child{border-bottom:0}

.gc-kop__prik{
	width:11px;
	height:11px;
	border-radius:50%;
	flex:none;
	align-self:center;
	box-shadow:0 0 0 1px rgba(58,35,23,.14) inset, 0 0 0 3px rgba(255,255,255,.7);
}
.gc-kop__navn{flex:1;color:#3A2A1E;font-weight:500}
.gc-kop__ml{
	color:#8A7663;
	font-variant-numeric:tabular-nums;
	white-space:nowrap;
	font-size:13.5px;
}

.gc-kop__total{
	margin:14px 0 0;
	font-size:14px;
	color:#3A2A1E;
	font-weight:700;
	font-variant-numeric:tabular-nums;
}
.gc-kop__total span{
	display:inline-block;
	font-size:10.5px;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:#A08D79;
	font-weight:600;
	margin-right:6px;
}

/* kompakt: kun glasset, til kort */
.gc-kop--kompakt{
	display:flex;
	align-items:center;
	justify-content:center;
	padding:14px 0 10px;
	border:0;
	border-radius:0;
	box-shadow:none;
	aspect-ratio:16/10;
	background:
		radial-gradient(70% 80% at 50% 18%, #FFFFFF 0%, rgba(255,255,255,0) 70%),
		linear-gradient(168deg, #F8F3EC 0%, #EDE2D3 100%);
}
.gc-kop--kompakt .gc-kop__glas{
	width:auto;
	height:100%;
	max-height:158px;
	filter:drop-shadow(0 3px 8px rgba(58,35,23,.13));
}

@media(max-width:600px){
	.gc-kop{flex-direction:column;align-items:center;gap:18px;padding:22px 20px}
	.gc-kop__glas{width:104px}
	.gc-kop__side{flex:1 1 auto;width:100%;max-width:260px}
}